HTML attributes are similar to metadata(data about data). They give useful information about the HTML elements.

In below html, hyperlink tag has an attribute href that is telling the destination, where you will be redirected after clicking on it.

<a href="http://www.yahoo.com">Yahoo</a>

 

HTML Attribute Structure

  • HTML Attributes are always included in starting tag.

  • Attributes always have some value that tells the additional information in context of an element. e.g. <tag attribute:value></tag>

  • Attribute values are always placed inside single or double quotes, in HTML5 we can give attribute value without quotes.

Common Attributes

Attributes common to most of the tags are discussed below:

  •  Id

  •  class

Id

Its a unique identifier for an element within a webpage.

e.g. if you want to give specific portion of your webpage a different style OR

You want script(s) to pick data from specific portion with a fixed name then use the id attribute.

<div id="Sales"> </div>

Class

if you want to give a similar style/property to multiple portions of your website you can assign class attribute appropriately. e.g.

<div class="fancy">
    this is first block of my page.    
</div>

</div><div class="fancy">
    this is second block of my page.    
</div>

 

TRY EXAMPLE

 

NOTE: For accessing elements with id and class in css use the (#) and (.) dot property appropriately.

 

Category: