Skip to main content

Introduction to HTML Id | Unique Element Identification

HTML id​

The id attribute in HTML is used to uniquely identify an element on a web page. The id attribute value must be unique within the HTML document, meaning that no other element in the same document can have the same id value.

As an example:

Editor

Loading...

In this example:

  • We have added an id attribute to the <h1> element and given it a value of "my-heading".
  • This ID value is unique within the HTML document, meaning that no other element in the same document can have an id value of "my-heading".
  • We have also added a CSS rule that targets the #my-heading selector, meaning that any element with an id attribute value of "my-heading" will be styled with the CSS properties defined in the rule.
  • We have also added an id attribute to the <a> element and given it a value of "my-link".

Importance Of id​

  • The id attribute is used to uniquely identify an element on a web page.
  • The id attribute value must be unique within the HTML document.
  • The id attribute value should not contain spaces or special characters.
  • The id attribute is case-sensitive, so "my-element" and "my-Element" would be considered different values.
  • The id attribute can be used in conjunction with CSS to style specific elements on a web page.
  • The id attribute can be used in JavaScript to select and manipulate specific elements on a web page using the getElementById() method.
  • The id attribute can be used to create anchor links that allow users to jump to a specific section of a web page.

Difference Between class and id​

The class and id attributes are both used to identify elements.

There are some key differences between the two:

Unique vs Non-Unique​

The id attribute is used to uniquely identify an element on a web page, meaning that no other element in the same document can have the same id value. The class attribute, on the other hand, is not required to be unique, and multiple elements can share the same class value.

Styling vs Structure​

The class attribute is commonly used to group together elements that have a similar styling or purpose, whereas the id attribute is often used to identify specific elements that need to be targeted with JavaScript or CSS.

CSS Selectors​

The id attribute is typically used in CSS selectors to target specific elements on a web page, whereas the class attribute is used to target groups of elements with a shared class value.

JavaScript Manipulation​

The id attribute is often used in JavaScript to select and manipulate specific elements on a web page using the getElementById() method, whereas the class attribute can be used to select groups of elements using the getElementsByClassName() method.

HTML bookmarks allow you to link to a specific section of a web page, rather than just linking to the top of the page. Bookmarks are created by adding an id attribute to the element you want to link to, and then creating a link that points to that id.

As an example:

Editor

Loading...

In this example:

  • We have added an id attribute to each of the heading elements that we want to link to.
  • We have also created three links that point to these id values using the href attribute and a pound sign (#) followed by the id value.
  • This tells the browser to scroll to the section of the page with the specified id value.
  • When a user clicks on one of these links, the browser will automatically scroll to the section of the page with the specified id value. The first link takes the user back to the top of the page.
use unique id

The id values used for bookmarks must be unique within the HTML document, just like any other id value.

The id Attribute in JavaScript​

The id attribute in HTML can be used in JavaScript to select and manipulate specific elements.

As an example:

Editor

Loading...

In this example:

  • We have added an id attribute to the heading element that we want to manipulate using JavaScript.
  • We have also added a button with an onclick attribute that calls a changeColor() function when clicked.
  • Inside the changeColor() function, we use the getElementById() method to select the heading element with the id value of "my-heading".
  • We then use the style property to change the color of the heading to red.
tip

The getElementById() method returns a single element, since id values are required to be unique within the HTML document. If you want to select multiple elements with the same class value, you can use the getElementsByClassName() method instead.