The id attribute in HTML is used to uniquely identify elements in an HTML document. This feature allows you to reference and modify HTML elements in CSS and JavaScript.

Domain Name Reg­is­tra­tion
Build your brand on a great domain
  • Free Wildcard SSL for safer data transfers 
  • Free private reg­is­tra­tion for more privacy
  • Free Domain Connect for easy DNS setup

What is an HTML ID?

An HTML ID is an HTML attribute that helps uniquely identify an HTML element. In an HTML document, each ID must be unique. If two elements share the same ID, the document is not con­sid­ered syn­tac­ti­cal­ly valid. The id attribute is often used with CSS or JavaScript to apply specific styles or perform certain actions on a par­tic­u­lar element.

Note

If you’re just starting out with HTML, our HTML beginner’s tutorial is a helpful resource for nav­i­gat­ing the markup language.

What can HTML IDs be used for?

HTML IDs can be very useful when you want to apply an action to just one element. Here are some instances where the id attribute is commonly used:

  • Styling a website with CSS: You can apply CSS rules to a single HTML element using an ID. This is par­tic­u­lar­ly helpful if you want to highlight a specific element.
  • In­ter­act­ing with JavaScript: In JavaScript, IDs allow you to access certain HTML elements and change their prop­er­ties or content. This is a key part in creating dynamic web pages.
  • Hy­per­links and anchors: IDs can be used to create anchor points within a page, allowing users to jump directly to a specific section when they click a link with the cor­re­spond­ing ID.
Tip

You can assign an ID to any HTML element using the id attribute.

Syntax for HTML’s id attribute

To define an ID in HTML, add the id attribute to the desired element and specify an ID name. Here’s an example:

<p id="Testid">We’re assigning this paragraph the ID “Testid.”</p>
HTML

In this example, we assigned an HTML paragraph the ID “Testid”. Let’s take a look at a more detailed example to see how HTML IDs can be used:

<!DOCTYPE html>
<html>
<head>
    <style>
        #header {
            background-color: blue;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
<h1 id="header">An example of an HTML ID</h1>
<p>The header demonstrates how an HTML ID can be used.</p>
</body>
</html>
HTML

Here, an HTML header is assigned the ID “header”. Since CSS is included in the HTML, the CSS rules for the header ID are applied to the header.

HTML id vs. class – What’s the dif­fer­ence?

The id and the class at­trib­ut­es both help to identify and style HTML elements, but they have distinct prop­er­ties and uses.

  • Unique­ness: In HTML documents, each ID must be unique. An HTML class, on the other hand, can be applied to multiple elements, allowing you to ma­nip­u­late a group of elements si­mul­ta­ne­ous­ly.
  • Speci­fici­ty: IDs have a higher speci­fici­ty than classes. This means that if both an ID and a class are applied to the same HTML element, the ID takes priority. If there are any con­flict­ing styles, the ID’s style will override the class’s styles.
  • Ref­er­enc­ing in CSS: To reference IDs in CSS, a hashtag (#) is placed in front of the ID. To reference classes, a dot (.) is used in front of the class.
HiDrive Cloud Storage
Store and share your data on the go
  • Store, share, and edit data easily
  • Backed up and highly secure
  • Sync with all devices
Go to Main Menu