find and solve || findandsolve.com
Please wait.....

HTML Attributes


.HTML attributes provide additional information about HTML elements which is define additional characteristics or properties of the element such as width and height of an image.Attributes are always specified in the start tag (or opening tag) and usually consists of name/value pairs like name="value".  Attribute values should always be enclosed in quotation marks.

  • All HTML elements can have attributes
  • Attributes provide additional information about elements
  • Attributes are always specified in the start tag

Some attributes are required for certain elements. For instance, an <img> tag must contain a src and alt attributes. Let's take a look at some examples of the attributes usages:

<img src="~/assets/image/example.png" width="40" height="40" alt="demo  image example">
<a href="https://www.findandsolve.com/" title="online learn">findandsolve</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" value="Sylvia">


In the given above example src inside the <img> tag is an attribute and image path provided is its value and also href inside the <a> tag is an attribute and the link provided is its value, and so on.

There are two ways to specify the URL in the src attribute:

  •  Absolute URL - Links to an external image that is hosted on another website. Example: src="~/assets/image/example.png".
  • Relative URL  - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src="example.png". If the URL begins with a slash, it will be relative to the domain. Example: src="/image/example.png".


The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

Example

<a href="https://www.findandsolve.com">Visit Findandsolve</a>


The width and height Attributes

The <img> tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels):

Example

<img src="~/assets/image/example.png" width="400" height="300">


The alt Attribute

The required alt attribute is use for specifies an alternate text  for <img> tag  image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader.

<img src="example.png" alt="image alt name">


General Purpose Attributes

There are some attributes, like as  title, id, style, class, etc. that we can use on the majority of HTML elements. The following section describes their usages.

The style Attribute

<div style="color:green;">This is a red division section.</p>

The id Attribute

The id attribute is used to give a unique div or section name or identifier to an element within a document. This makes it easier to select the element using CSS or JavaScript.

<input type="text" id="fullnameId">
<div id="someContentId">Some content</div>
<p id="informationId">This is a paragraph.</p>

The class Attribute

Like id  and class attribue attribute are also used to identify elements but in some cases when you want to call attribute value in multipile page or multiple html element then you will  use class attribute so class attribute does not have to be unique in the document.

Example

<input type="text" class="form-control">
<div class="divsection">Some text or content</div>
<p class="paragraphclass">This is a paragraph.</p>


The title Attribute

The title attribute to is used to provide advisory text about an element or its content. Try out the following example to understand how this actually works.

<abbr title="World Wide Web ">FindAndSolve</abbr>
<a href="images/example.jpg" title="Click here to view large image">
    <img src="images/example.jpg" alt="Image Example">
</a>