HTML IDs

HTML IDs are used to give a unique identifier to an HTML element. They help developers identify a specific element on a webpage and target it using CSS or JavaScript.

The id attribute is commonly used to style individual elements, manipulate webpage content, create bookmarks, and connect HTML elements. Unlike classes, an ID should be unique within the same HTML document.

What Is an HTML ID?

An HTML ID is a name assigned to an element using the id attribute. It allows developers to identify and access that particular element.

Here is the basic syntax:

<h1 id="main-heading">Welcome to HTML</h1>

In this example, main-heading is the ID assigned to the heading. CSS and JavaScript can use this ID to select the element.

HTML ID Example

The following example demonstrates how to use an ID to style a specific HTML element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML IDs</title>

    <style>
        #main-heading {
            color: blue;
            text-align: center;
        }

        #description {
            background-color: lightyellow;
            padding: 10px;
        }
    </style>
</head>
<body>

    <h1 id="main-heading">HTML IDs</h1>

    <p id="description">
        Learn how HTML IDs work.
    </p>

</body>
</html>

In this example, CSS uses the # symbol to select elements by ID. The main-heading ID changes the heading’s color and alignment, while description adds a background color and padding to the paragraph.

To understand how IDs differ from reusable classes, explore HTML Classes.

Rules for HTML IDs

Follow these rules when creating IDs:

• Use unique IDs: Do not assign the same ID to multiple elements in one document.
• Avoid spaces: An ID cannot contain whitespace characters.
• Use meaningful names: Choose names such as header, contact-form, or main-content.
• Start CSS selectors with #: Use #main-heading to target an element with id="main-heading".
• Use consistent naming: Clear names make code easier to understand and maintain.

IDs can contain letters, digits, hyphens, underscores, and other permitted characters, but an ID must not be empty. Names beginning with a letter are often easier to work with.

HTML ID vs Class

An ID and a class can both be used to select HTML elements, but they serve different purposes.

HTML ID	HTML Class
Uses the id attribute	Uses the class attribute
Should be unique within a document	Can be reused on multiple elements
CSS selector uses #	CSS selector uses .
Useful for identifying one element	Useful for grouping similar elements

Read Class vs ID for a detailed comparison of these attributes.

Using HTML IDs with JavaScript

JavaScript can select an element by its ID using document.getElementById().

<p id="message">Original message</p>

<button onclick="changeMessage()">Change Text</button>

<script>
    function changeMessage() {
        document.getElementById("message").textContent =
            "The message has changed!";
    }
</script>

When the button is clicked, JavaScript finds the paragraph and changes its text. Learn more about Using IDs with JavaScript.

Frequently Asked Questions

Can two HTML elements have the same ID?

IDs should be unique within an HTML document. Repeated IDs can cause unexpected results when CSS or JavaScript selects an element.

Are HTML IDs case-sensitive?

Yes. For example, mainHeading and mainheading are different IDs.

Can an HTML element have both an ID and a class?

Yes. An element can have one ID and multiple classes.

Can HTML IDs create bookmarks?

Yes. An ID can identify a section that a link navigates to using a fragment, such as href="#contact". Learn more about Using IDs for Bookmarks.