HTML ID Attribute

The HTML id attribute is used to give a unique identifier to an HTML element. It helps developers target specific elements with CSS, access them using JavaScript, and create links that navigate to particular sections of a webpage.

In this tutorial, you will learn how the HTML ID attribute works, how to use it, and how it differs from the class attribute.

What Is the HTML ID Attribute?

The id attribute identifies a single HTML element on a webpage. Its value must be unique within the same HTML document.

Here is a simple example:

<!DOCTYPE html>
<html>
<head>
    <title>HTML ID Example</title>
</head>
<body>

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

    <p id="intro">Learn HTML step by step.</p>

</body>
</html>

In this example, main-heading identifies the heading, while intro identifies the paragraph.

To understand how IDs fit into HTML, read our guide to HTML attributes.

HTML ID Attribute Syntax

The ID attribute is written inside an HTML opening tag. You can choose a meaningful name for the ID.

<tagname id="unique-name">Content</tagname>

For example:

<div id="about-section">
    <h2>About Us</h2>
    <p>Learn more about our website.</p>
</div>

The value about-section uniquely identifies the div element.

Rules for Using the ID Attribute

Follow these important rules when using HTML IDs:

Each ID should be unique within the HTML document.
ID values are case-sensitive, so mainTitle and maintitle are different IDs.
An ID should not contain spaces.
Use meaningful names that describe the element.
An ID can contain letters, numbers, hyphens, underscores, and other valid characters, but it must not be empty.
For easier CSS selection, start IDs with a letter and use simple names.

For example, id="user-profile" is a clear and practical choice.

Using the ID Attribute with CSS

You can style an element with a specific ID by using the hash symbol (#) in CSS.

<!DOCTYPE html>
<html>
<head>
    <style>
        #main-heading {
            color: blue;
            text-align: center;
        }
    </style>
</head>
<body>

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

</body>
</html>

The CSS selector #main-heading applies the specified styles to the element with that ID.

If you want to style multiple elements with the same rules, consider using the HTML class attribute instead.

Using the ID Attribute with JavaScript

JavaScript can select an element by its ID using the getElementById() method. This is useful when you want to change text, update content, or respond to user actions.

<p id="message">Hello, visitor!</p>

<button onclick="changeMessage()">Click Me</button>

<script>
    function changeMessage() {
        document.getElementById("message").textContent =
            "Welcome to Web4Learners!";
    }
</script>

When the user clicks the button, JavaScript finds the element with the ID message and updates its text.

Using IDs to Create Page Bookmarks

You can use IDs to link directly to a particular section of the same webpage. This is helpful for long articles, documentation, and table-of-contents links.

<a href="#contact">Go to Contact Section</a>

<h2 id="contact">Contact Us</h2>
<p>Get in touch with our team.</p>

When a visitor clicks the link, the browser navigates to the element with id="contact".

This technique is useful for building navigation links in tutorials and other long-form content.

Difference Between HTML ID and Class Attributes

Both id and class help identify HTML elements, but they serve different purposes.

Feature	ID Attribute	Class Attribute
Purpose	Identifies a specific element	Groups elements for shared styling or behavior
Uniqueness	Should be unique in a document	Can be reused across elements
CSS selector	`#example`	`.example`
JavaScript	`getElementById()`	`getElementsByClassName()` or other selectors

Use an ID when you need to target one particular element. Use a class when several elements need the same styles or behavior.

Frequently Asked Questions

Can two HTML elements have the same ID?

You should not assign the same ID to multiple elements in one document. Duplicate IDs can cause unexpected behavior when CSS, JavaScript, or browser navigation targets that ID.

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

Yes. An element can have both attributes at the same time.

<p id="intro" class="highlight">Learn HTML easily.</p>

Here, intro identifies the paragraph, while highlight can apply shared styling.

Is the HTML ID attribute case-sensitive?

Yes. For example, id="header" and id="Header" are different values. Keep ID names consistent to avoid mistakes.

Is the ID attribute required in HTML?

No. The ID attribute is optional. Use it when you need a unique identifier for styling, JavaScript, or page navigation.

In this tutorial, you will learn how the HTML ID attribute works, how to use it, and how it differs from the class attribute.

What Is the HTML ID Attribute?

The id attribute identifies a single HTML element on a webpage. Its value must be unique within the same HTML document.

Here is a simple example:

<!DOCTYPE html>
<html>
<head>
    <title>HTML ID Example</title>
</head>
<body>

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

    <p id="intro">Learn HTML step by step.</p>

</body>
</html>

In this example, main-heading identifies the heading, while intro identifies the paragraph.

To understand how IDs fit into HTML, read our guide to HTML attributes.

HTML ID Attribute Syntax

The ID attribute is written inside an HTML opening tag. You can choose a meaningful name for the ID.

<tagname id="unique-name">Content</tagname>

For example:

<div id="about-section">
    <h2>About Us</h2>
    <p>Learn more about our website.</p>
</div>

The value about-section uniquely identifies the div element.

Rules for Using the ID Attribute

Follow these important rules when using HTML IDs:

Each ID should be unique within the HTML document.
ID values are case-sensitive, so mainTitle and maintitle are different IDs.
An ID should not contain spaces.
Use meaningful names that describe the element.
An ID can contain letters, numbers, hyphens, underscores, and other valid characters, but it must not be empty.
For easier CSS selection, start IDs with a letter and use simple names.

For example, id="user-profile" is a clear and practical choice.

Using the ID Attribute with CSS

You can style an element with a specific ID by using the hash symbol (#) in CSS.

<!DOCTYPE html>
<html>
<head>
    <style>
        #main-heading {
            color: blue;
            text-align: center;
        }
    </style>
</head>
<body>

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

</body>
</html>

The CSS selector #main-heading applies the specified styles to the element with that ID.

If you want to style multiple elements with the same rules, consider using the HTML class attribute instead.

Using the ID Attribute with JavaScript

JavaScript can select an element by its ID using the getElementById() method. This is useful when you want to change text, update content, or respond to user actions.

<p id="message">Hello, visitor!</p>

<button onclick="changeMessage()">Click Me</button>

<script>
    function changeMessage() {
        document.getElementById("message").textContent =
            "Welcome to Web4Learners!";
    }
</script>

When the user clicks the button, JavaScript finds the element with the ID message and updates its text.

Using IDs to Create Page Bookmarks

You can use IDs to link directly to a particular section of the same webpage. This is helpful for long articles, documentation, and table-of-contents links.

<a href="#contact">Go to Contact Section</a>

<h2 id="contact">Contact Us</h2>
<p>Get in touch with our team.</p>

When a visitor clicks the link, the browser navigates to the element with id="contact".

This technique is useful for building navigation links in tutorials and other long-form content.

Difference Between HTML ID and Class Attributes

Both id and class help identify HTML elements, but they serve different purposes.

Feature	ID Attribute	Class Attribute
Purpose	Identifies a specific element	Groups elements for shared styling or behavior
Uniqueness	Should be unique in a document	Can be reused across elements
CSS selector	`#example`	`.example`
JavaScript	`getElementById()`	`getElementsByClassName()` or other selectors

Use an ID when you need to target one particular element. Use a class when several elements need the same styles or behavior.

Frequently Asked Questions

Can two HTML elements have the same ID?

You should not assign the same ID to multiple elements in one document. Duplicate IDs can cause unexpected behavior when CSS, JavaScript, or browser navigation targets that ID.

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

Yes. An element can have both attributes at the same time.

<p id="intro" class="highlight">Learn HTML easily.</p>

Here, intro identifies the paragraph, while highlight can apply shared styling.

Is the HTML ID attribute case-sensitive?

Yes. For example, id="header" and id="Header" are different values. Keep ID names consistent to avoid mistakes.

Is the ID attribute required in HTML?

No. The ID attribute is optional. Use it when you need a unique identifier for styling, JavaScript, or page navigation.

HTML ID Attribute

What Is the HTML ID Attribute?

HTML ID Attribute Syntax

Rules for Using the ID Attribute

Using the ID Attribute with CSS

Using the ID Attribute with JavaScript

Using IDs to Create Page Bookmarks

Difference Between HTML ID and Class Attributes

Frequently Asked Questions

Can two HTML elements have the same ID?

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

Is the HTML ID attribute case-sensitive?

Is the ID attribute required in HTML?

What Is the HTML ID Attribute?

HTML ID Attribute Syntax

Rules for Using the ID Attribute

Using the ID Attribute with CSS

Using the ID Attribute with JavaScript

Using IDs to Create Page Bookmarks

Difference Between HTML ID and Class Attributes

Frequently Asked Questions

Can two HTML elements have the same ID?

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

Is the HTML ID attribute case-sensitive?

Is the ID attribute required in HTML?

2 thoughts on “HTML ID Attribute”