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 JavaS­cript.

Register your domain name
Launch your business on the right domain
  • Free WordPress with .co.uk
  • Free website pro­tec­tion with one Wildcard SSL
  • 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­sidered syn­tactic­ally valid. The id attribute is often used with CSS or JavaS­cript 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­ig­at­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­larly helpful if you want to highlight a specific element.
  • In­ter­act­ing with JavaS­cript: In JavaS­cript, 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­res­pond­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­utes 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 sim­ul­tan­eously.
  • Spe­cificity: IDs have a higher spe­cificity 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­en­cing 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
  • ISO-certified European data centres
  • Highly secure and GDPR compliant
Go to Main Menu