id

id Attribute

The id attribute assigns a unique identifier to an HTML element, allowing targeted styling, scripting, and navigation. Each id must be unique within a document.

Syntax

<element id="unique-id">
  <!-- Content -->
</element>

Example

<p id="preamble"></p>

Styling an Element with id

<h1 id="myHeader">My Header</h1>

Key Points About id

• id names are case-sensitive.
• They must start with a letter (not a number).
• Spaces and special characters are not allowed.

Difference Between id and class

• An id is unique to a single element.
• A class can be used for multiple elements.

Using id and class

<h1 id="myHeader">My Cities</h1>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

Creating Bookmarks with id

The id attribute can be used to create bookmarks for quick navigation within a webpage.

Adding a Bookmark

<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>
<h2>Chapter 1</h2>
<p>Introduction to the topic.</p>
<h2>Chapter 2</h2>
<p>Further exploration.</p>
<h2 id="C4">Chapter 4</h2>
<p>In-depth details.</p>
<h2 id="C10">Chapter 10</h2>
<p>Advanced concepts.</p>

Linking to a Bookmark from Another Page

<a href="page.html#chapter4">Jump to Chapter 4</a>

Best Practices

• Each id must be unique within the document.
• Avoid spaces or special characters in id values.
• Use id for single-use elements and class for reusable styles.

Related Topics

• Global attributes
• JavaScript getElementById() method
• CSS ID Selectors

Conclusion

The id attribute is an essential tool for targeting specific HTML elements in CSS and JavaScript. It facilitates styling, navigation, and dynamic content manipulation. Proper use of id ensures a structured and efficient webpage, allowing seamless interaction between styling and scripting elements.