HTML Attributes

HTML attributes are the additional information we add to the tags.

Some attributes are required for the HTML element to work properly such as a hyperlink-reference href attribute inside an anchor tag <a></a> or source src and alternate-text alt attributes inside an <img> tag.

  • We add an attribute in the opening tag syntax after the tag name and before the > to complete the opening tag.
  • We add an equals sign = following the attribute name and then the value for the attribute in double quotes ""
  • If we area dding multiple attribute-value pairs we add a space between them

<a href="about.html" title="Google">Google</a>

The id and class attributes

id and class are generic attributes that we can add to our HTML tags that allow us to identify the tag.

id class
attribute can be added to any HTML tag for assigning a unique identifier for the tag attribute can be added to any HTML element for assigning a generic name
we can not repeat the value of id attribute on the page. No two elements can have same value of the id attribute on one page we can repeat class names for different elements on the page. Multiple elements can have same class attribute value
one element can have only single id attribute one element can have multiple class names
<!-- unique id value news -->
<div id="news">
  <!-- common class div-title between both headings -->
  <h2 class="div-title">News</h2>
  
  <!-- 
    common class content between both paragraphs
    second class of news-para 
  -->
  <p class="content">
    Read todays news
  </p>
</div>
<!-- unique id value events -->
<div id="events">
  <!-- common class div-title between both headings -->
  <h2 class="div-title">Events</h2>

  <!-- 
    common class content between both paragraphs
    second class of events-para 
  -->
  <p class="content events-para">
    Check our events
  </p>
</div>