Element Attributes in HTML

What are Element Attributes in HTML?

An HTML element can have attributes. HTML element's attributes are appended to its opening tag or its sole tag.

ID & Class

Two of the most commonly used attributes are id and class.

Both id and class can be used for:

  • selecting the element for styling in CSS (# for id, . for class),

  • selecting the element in JavaScript (getElementById for id, getElementsByClassName(). for class)

Further, id can be used for fragment identifier linking i.e. linking to a specific place in a document.

The difference between id and class is that:

  • in a given HTML document there can be only one element with a given id whereas there might be an unlimited number of elements with a given class,

  • a given HTML element can only have one id however an unlimited number of classes

<body>
  <div id="horses" class="names, coloration">
    ...
  </div>
  <div id="witchers" class="names, schools">
    ...
  <div>
</body>

Style

An HTML attribute can be styled in two ways:

  • through selecting in CSS and applying respective styling,

  • through applying inline styling using the style attribute.

<p style="background:black;color:white;">
  White text on black background.
</p>

Nowadays, using inline styling is discouraged in favor of CSS.

Global Attributes

id, class and style are examples of global attributes i.e. attributes common to many HTML elements.

Other notable HTML global attributes are:

  • autofocus - indicates the element to be focused once the page loads,

  • hidden - prevents the element from rendering,

  • lang - indicates the element's content language,

  • tabindex - indicates the sequential position in Tab key navigation,

  • title - a description of the element which might be presented as a tooltip by a user agent, and

  • event handlers such as onblur, onchange, onclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmouseenter, onmouseleave, onselect, onsubmit.

We use cookies and similar technologies to enhance the quality of services, maintain statistics and adjust marketing content. You will find more information in the Cookies Policy.

By clicking OK you grant consent to processing of your personal data by us and our Trusted Partners with the purpose of maintain statistics and adjustment of the marketing content pursuant to the Privacy Policy. If you wish to not grant that consent and/or limit its extent click Settings.