HTML IDs

HTML IDs are used to give a unique identifier to an HTML element. The id attribute is useful when you want to identify one specific element on a web page.

IDs are commonly used with CSS, JavaScript, and links that move users to a specific section of a page.

What Is an HTML ID?

An HTML ID is a unique name assigned to an HTML element using the id attribute.

Example

<p id="intro">Welcome to Web4Learners.</p>

In this example:

• id is the HTML attribute.
• intro is the ID value.
• The ID identifies this particular paragraph.

HTML ID Syntax

The basic syntax is:

<element id=”id-name”>Content</element>

For example:

<h1 id=”main-heading”>HTML Tutorial</h1>

The ID should be meaningful and related to the element.

Using IDs with CSS

IDs can be used to apply CSS styles to a specific element.

In CSS, an ID selector starts with the # symbol.

Example

<style>
  #main-heading {
    color: blue;
    font-size: 32px;
  }
</style>

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

The CSS applies only to the element with the main-heading ID.

HTML IDs Should Be Unique

An important rule is that an ID should normally identify only one element on a page.

For example:

<h1 id=”title”>HTML Tutorial</h1>

This is good because the title ID identifies one specific element.

Avoid using the same ID for multiple elements:

<p id="title">First paragraph</p>
<p id="title">Second paragraph</p>

Instead, use a class when the same identifier needs to be reused:

<p class="text">First paragraph</p>
<p class="text">Second paragraph</p>

HTML IDs with JavaScript

IDs are frequently used with JavaScript to find and manipulate a specific element.

<p id="message">Hello World</p>

<script>
  const element = document.getElementById("message");
  element.textContent = "Welcome to Web4Learners!";
</script>

The getElementById() method finds the element whose ID is message.

Using IDs for Page Links

HTML IDs can also be used to create links to specific sections of the same page.

<a href="#html-basics">Learn HTML Basics</a>

<h2 id="html-basics">HTML Basics</h2>

When the user clicks the link, the browser can move to the element with the matching ID.

This is particularly useful for:

• Table of contents
• Long articles
• Documentation pages
• FAQ sections
• Navigation menus

HTML ID vs Class

IDs and classes are both used to identify HTML elements, but they have different purposes.

Feature	ID	Class
Attribute	id	class
CSS selector	#name	.name
Intended use	Unique element	Group of elements
Reusable	Normally no	Yes
JavaScript	Useful for one specific element	Useful for multiple elements

Example:

<h2 id="about">About Us</h2>

<p class="text">First paragraph.</p>
<p class="text">Second paragraph.</p>

Here, about identifies one heading, while text can be reused for multiple paragraphs.

Naming HTML IDs

Use clear and meaningful names for IDs.

Good examples:

<div id="header"></div>
<section id="about"></section>
<section id="contact"></section>

Avoid unnecessarily unclear names such as:

<div id="x1"></div>

IDs can contain letters, digits, hyphens, underscores, and other valid characters, but simple names are easier to read and maintain.

A common naming style is:

<section id="about-us"></section>

IDs and CSS Specificity

ID selectors have higher CSS specificity than class selectors.

For example:

.text {
  color: green;
}

#special-text {
  color: red;
}

If an element has both classes:

<p id="special-text" class="text">Hello</p>

the ID rule generally takes precedence because it has higher specificity.

For larger projects, however, relying heavily on IDs for styling can make CSS harder to maintain. Classes are usually better for reusable styling.

Best Practices for HTML IDs

Follow these practices when using IDs:

• Give each ID a meaningful name.
• Avoid unnecessarily repeating the same ID.
• Use classes for reusable styles.
• Use IDs for unique elements or specific page sections.
• Keep ID names simple and readable.
• Use IDs when creating links to specific sections.
• Use IDs when JavaScript needs to target a specific element.