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 Registration
Build your brand on a great domain
  • Free Wildcard SSL for safer data transfers 
  • Free private registration 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 considered syntactically valid. The id attribute is often used with CSS or JavaScript to apply specific styles or perform certain actions on a particular element.

Note

If you’re just starting out with HTML, our HTML beginner’s tutorial is a helpful resource for navigating 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 particularly helpful if you want to highlight a specific element.
  • Interacting with JavaScript: In JavaScript, IDs allow you to access certain HTML elements and change their properties or content. This is a key part in creating dynamic web pages.
  • Hyperlinks 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 corresponding 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 difference?

The id and the class attributes both help to identify and style HTML elements, but they have distinct properties and uses.

  • Uniqueness: In HTML documents, each ID must be unique. An HTML class, on the other hand, can be applied to multiple elements, allowing you to manipulate a group of elements simultaneously.
  • Specificity: IDs have a higher specificity 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 conflicting styles, the ID’s style will override the class’s styles.
  • Referencing 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
Was this article helpful?
Go to Main Menu