HTML id Attribute: Complete Guide, Syntax, Uses & Examples

The HTML id attribute is one of the most important global attributes in HTML. It is used to give a unique identifier to an HTML element. Once an element has an id, that element can be easily targeted with CSS, JavaScript, links, forms, and other web technologies.

For example:

<p id="intro">Welcome to our website.</p>

Here, intro is the ID of the <p> element.

An id is expected to be unique within an HTML document. This means you should normally assign a particular ID to only one element on a page.

The id attribute is especially useful when you need to identify one specific element rather than a group of elements.

What Is the HTML `id` Attribute?

The HTML id attribute specifies a unique identifier for an HTML element.

It is a global HTML attribute, which means it can be used on almost any HTML element.

The basic syntax is:

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

Example:

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

In this example:

<h2> is the HTML element.
id is the attribute.
"about" is the identifier.
About Us is the content.

The browser can use this identifier to locate the specific element.

Why Is the `id` Attribute Important?

The id attribute connects HTML elements with other parts of a website.

It is commonly used for:

Identifying a unique element
Creating links to a specific section of a page
Selecting elements with CSS
Selecting elements with JavaScript
Connecting labels with form controls
Supporting accessibility relationships
Working with browser APIs
Creating interactive components
Referencing elements from other HTML attributes
Supporting client-side applications

For example, a link can point to an element using its ID:

<a href="#contact">Contact Us</a>

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

When the user clicks the link, the browser can move to the element whose ID is contact.

Basic Example of the `id` Attribute

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

  <h1 id="main-title">My Website</h1>

  <p id="description">
    This is a simple HTML page.
  </p>

</body>
</html>

The page contains two elements with IDs:

main-title
description

Each identifier is unique within the document.

HTML `id` Attribute Syntax

The general syntax is:

id="value"

For example:

<div id="container">
  Content goes here.
</div>

The attribute is written inside the opening tag.

Correct:

<div id="content">Hello</div>

Incorrect:

<div "content">Hello</div>

The value should be enclosed in quotation marks.

The `id` Value Should Be Unique

The most important rule of the id attribute is uniqueness.

For example:

<h2 id="about">About</h2>
<p id="description">Our company information.</p>

This is good because each ID is different.

Avoid assigning the same ID to multiple elements:

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

This creates duplicate IDs.

Although browsers may still render such HTML, duplicate IDs can cause unexpected behavior with CSS, JavaScript, accessibility tools, links, and other technologies.

A better version is:

<p id="first-text">First paragraph</p>
<p id="second-text">Second paragraph</p>

`id` Attribute vs `class` Attribute

The id and class attributes are often confused because both can be used with CSS and JavaScript.

The main difference is their intended purpose.

An id identifies one particular element.

A class identifies a group or category of elements.

Example:

<p id="introduction" class="paragraph">
  Welcome to our website.
</p>

<p class="paragraph">
  This is another paragraph.
</p>

Here:

introduction uniquely identifies the first paragraph.
paragraph can be shared by multiple elements.

A simple way to remember the difference is:

ID = one specific element

Class = a group of elements

Using `id` with CSS

An ID can be selected in CSS by placing a # symbol before the ID name.

HTML:

<h1 id="title">Welcome</h1>

CSS:

#title {
  color: blue;
  font-size: 32px;
}

The #title selector targets the element with id="title".

Another example:

<p id="important">This is important information.</p>

#important {
  font-weight: bold;
}

The paragraph becomes bold.

ID Selectors and CSS Specificity

ID selectors have high specificity in CSS.

For example:

p {
  color: black;
}

.content {
  color: green;
}

#article {
  color: blue;
}

If an element matches all three selectors:

<p id="article" class="content">
  Example text
</p>

the ID selector generally has greater specificity than the class and element selectors.

However, using IDs everywhere in CSS is not always recommended. Classes are often easier to reuse and maintain.

For large projects, many developers prefer classes for styling and reserve IDs for unique identification and behavior.

Using `id` with JavaScript

JavaScript can use an ID to find an element.

The most common method is:

document.getElementById("title");

Example:

<h1 id="title">Hello World</h1>

<script>
  const heading = document.getElementById("title");
  console.log(heading);
</script>

JavaScript finds the element whose ID is title.

You can also change its content:

document.getElementById("title").textContent = "Welcome!";

The heading will then display:

Welcome!

Changing an Element Using Its ID

Consider:

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

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

<script>
function changeMessage() {
  document.getElementById("message").textContent = "New message";
}
</script>

When the button is clicked, JavaScript finds the element with the ID message and changes its text.

Using `id` to Create Internal Page Links

One of the most useful features of IDs is creating links to specific parts of a page.

Example:

<a href="#services">Go to Services</a>

<h2 id="services">Our Services</h2>
<p>We provide several services.</p>

The href="#services" points to:

id="services"

The browser can move to that section when the link is clicked.

This is commonly used for:

Table of contents
Long articles
Documentation
FAQ pages
Navigation menus
One-page websites

Fragment Identifiers

When a URL contains something like:

example.com/page#contact

the part after # is called a fragment identifier.

The browser looks for an element with the matching ID:

<section id="contact">

Therefore:

#contact

points to:

id="contact"

This is an important connection between URLs and HTML IDs.

Using IDs for Table of Contents

IDs are particularly useful for long articles.

Example:

<nav>
  <a href="#introduction">Introduction</a>
  <a href="#features">Features</a>
  <a href="#conclusion">Conclusion</a>
</nav>

<section id="introduction">
  <h2>Introduction</h2>
  <p>...</p>
</section>

<section id="features">
  <h2>Features</h2>
  <p>...</p>
</section>

<section id="conclusion">
  <h2>Conclusion</h2>
  <p>...</p>
</section>

This creates simple internal navigation.

IDs in HTML Forms

The id attribute is very important in forms because it can connect a <label> with a form control.

Example:

<label for="email">Email Address</label>
<input type="email" id="email">

The for attribute of the label matches the id of the input.

Here:

for="email"

matches:

id="email"

This relationship improves usability and accessibility.

Users can click the label to focus the associated input.

Example of a Complete Form

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <button type="submit">Submit</button>
</form>

Each form control has a unique ID.

`id` and Accessibility

IDs can also play an important role in accessibility.

Some ARIA attributes use IDs to establish relationships between elements.

For example:

<p id="password-help">
  Password must contain at least eight characters.
</p>

<input
  type="password"
  aria-describedby="password-help"
>

The value:

aria-describedby="password-help"

references:

id="password-help"

This tells assistive technologies that the paragraph provides additional information about the input.

IDs can therefore help connect related parts of an interface.

Valid Characters in an ID

Modern HTML gives developers considerable flexibility when choosing ID values.

An ID value should not contain spaces.

For example:

<div id="main-content">

is a good choice.

Avoid:

<div id="main content">

because spaces are not allowed within a single ID value.

Good examples include:

id="header"
id="main-content"
id="contact-us"
id="article1"
id="userProfile"

For maximum compatibility and maintainability, simple IDs using letters, numbers, hyphens, and underscores are often easiest to work with.

IDs Should Be Meaningful

A good ID should describe the element.

Good:

<section id="pricing">

Less meaningful:

<section id="box7">

Meaningful names make HTML easier to understand.

Compare:

<div id="main-content">

with:

<div id="x123">

The first example immediately tells another developer what the element represents.

Recommended ID Naming Style

There is no single mandatory naming convention for all projects, but consistency is important.

Common styles include:

id="main-content"

or:

id="main_content"

or:

id="mainContent"

The hyphenated style is very common in HTML and CSS:

id="user-profile"

Choose a style and use it consistently throughout your project.

IDs Are Case-Sensitive

IDs should be treated as case-sensitive when referenced.

For example:

<div id="mainContent">Content</div>

and:

<div id="maincontent">Content</div>

are different identifiers.

Therefore, this:

document.getElementById("mainContent");

does not necessarily refer to:

id="maincontent"

It is best to avoid confusing capitalization.

IDs Must Not Contain Spaces

Do not use spaces inside an ID.

Avoid:

<div id="main content">

Use:

<div id="main-content">

If you need multiple words, hyphens are a simple and readable solution.

Avoid Duplicate IDs

Duplicate IDs are one of the most common mistakes.

Bad:

<div id="product">Product One</div>
<div id="product">Product Two</div>

Better:

<div id="product-one">Product One</div>
<div id="product-two">Product Two</div>

If several elements represent the same type of content, a class may be more appropriate:

<div class="product">Product One</div>
<div class="product">Product Two</div>

Do Not Use IDs as a Replacement for Classes

Suppose you have ten buttons with the same design.

Using ten different IDs only for styling is unnecessary:

<button id="button1">Buy</button>
<button id="button2">Buy</button>
<button id="button3">Buy</button>

A class is usually better:

<button class="buy-button">Buy</button>
<button class="buy-button">Buy</button>
<button class="buy-button">Buy</button>

CSS:

.buy-button {
  padding: 10px 20px;
}

Use an ID when the element needs a unique identity.

Can Multiple Elements Have the Same ID?

Technically, browsers may allow HTML containing duplicate IDs and still display the page. However, this does not make duplicate IDs good practice.

An ID is intended to identify a unique element.

Duplicate IDs can cause problems with:

JavaScript selection
CSS selectors
Internal links
Form associations
Accessibility
Browser APIs
Automated testing
Third-party scripts

Therefore, avoid duplicate IDs.

Difference Between `id` and `name`

The id and name attributes are also different.

Example:

<input id="email" name="email" type="email">

The id identifies the element in the document.

The name is especially important when form data is submitted to a server.

For example:

<input id="username" name="username">

Here:

id="username" identifies the element.
name="username" identifies the form field during form submission.

They can have the same value, but they serve different purposes.

Difference Between `id` and `class`

Feature	`id`	`class`
Main purpose	Unique identification	Grouping elements
Normally unique?	Yes	No
CSS selector	`#name`	`.name`
JavaScript	`getElementById()`	`querySelectorAll()` and others
Can be reused?	Should not be duplicated	Yes
Useful for internal links	Yes	No
Common for styling	Possible	Very common

Example:

<div id="header" class="section"></div>
<div id="footer" class="section"></div>

The IDs identify the individual elements, while the class identifies a shared category.

Selecting an ID with `querySelector()`

Modern JavaScript can also use CSS selectors.

HTML:

<div id="content">Hello</div>

JavaScript:

const element = document.querySelector("#content");

The # indicates that content is an ID selector.

You can then manipulate the element:

element.style.display = "none";

Using `getElementById()`

The classic method is:

const element = document.getElementById("content");

Unlike querySelector(), you do not include # in the argument.

Correct:

document.getElementById("content");

Not:

document.getElementById("#content");

Using IDs with JavaScript Events

An ID can help connect an element to an event.

Example:

<button id="myButton">Click Me</button>

<script>
const button = document.getElementById("myButton");

button.addEventListener("click", function () {
  alert("Button clicked!");
});
</script>

The ID allows JavaScript to find the button.

Using IDs for Dynamic Content

IDs are useful when a script needs to update a particular part of a page.

Example:

<p id="result"></p>

<script>
document.getElementById("result").textContent = "Calculation complete.";
</script>

The script knows exactly where to place the result.

IDs and SEO

The id attribute itself is not a direct ranking factor in the same way that high-quality content, relevant headings, useful page structure, and other SEO considerations are.

However, IDs can support a well-structured website.

For example:

<section id="services">
  <h2>Our Services</h2>
</section>

An internal link can point directly to that section:

<a href="#services">Our Services</a>

This can improve navigation and usability.

IDs may also appear in URLs as fragment identifiers, such as:

example.com/page#services

The main SEO value comes from useful page structure and user experience rather than simply adding IDs.

IDs and Accessibility

IDs can support accessible relationships when used correctly.

For example:

<label for="phone">Phone Number</label>
<input id="phone" type="tel">

This is a simple and important accessibility pattern.

IDs can also connect descriptions:

<div id="description">
  Enter your registered email address.
</div>

<input aria-describedby="description" type="email">

The ID creates a reference between the input and its description.

IDs and ARIA

ARIA attributes frequently use ID references.

For example:

<button aria-controls="menu" aria-expanded="false">
  Menu
</button>

<nav id="menu">
  ...
</nav>

Here:

aria-controls="menu"

references:

id="menu"

This helps describe the relationship between the button and the controlled element.

ARIA should be used carefully and should not replace proper HTML semantics.

Using IDs with `<label>`

The following pattern is recommended:

<label for="first-name">First Name</label>
<input id="first-name" type="text">

The values must correspond:

for="first-name"
id="first-name"

If they do not match, the label may not correctly associate with the input.

IDs in Navigation

IDs can create simple single-page navigation.

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</nav>

<section id="home">Home section</section>
<section id="about">About section</section>
<section id="services">Services section</section>
<section id="contact">Contact section</section>

This pattern is common on landing pages and portfolio websites.

IDs and JavaScript Frameworks

IDs can also be used in modern web applications, but frameworks often encourage component-specific patterns.

For example, React, Vue, Angular, and other frameworks may use classes, component references, generated IDs, or framework-specific mechanisms.

An ID is still useful when a truly unique DOM identifier is needed.

However, developers should avoid creating unnecessary global IDs in reusable components because multiple instances of a component can accidentally produce duplicate IDs.

IDs in React

For example, a React component might use:

<label htmlFor="email">Email</label>
<input id="email" type="email" />

React uses htmlFor rather than the HTML for attribute in JSX.

The important relationship remains:

htmlFor="email"
id="email"

For repeated components, developers should make sure IDs remain unique.

IDs in SVG

The id attribute can also be used with SVG.

Example:

<svg>
  <circle id="circle1" cx="50" cy="50" r="40"></circle>
</svg>

IDs in SVG can be used for references and styling.

They are also useful with SVG features such as gradients, filters, masks, and clip paths.

IDs and `<canvas>`

An ID can identify a canvas element so JavaScript can access it.

<canvas id="myCanvas" width="400" height="200"></canvas>

<script>
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
</script>

The ID provides a convenient way for the script to locate the canvas.

IDs and CSS Variables

An ID itself is not a CSS variable, but an ID selector can be used to apply custom properties to one element.

#main {
  --main-size: 20px;
}

This makes the custom property available within that element’s scope and its descendants.

IDs and URL Fragments

Suppose a page contains:

<h2 id="history">History</h2>

A URL can reference it:

/page.html#history

The browser can navigate directly to that location.

This is particularly useful for:

Documentation
Tutorials
Long-form articles
Legal pages
Technical references
Frequently asked questions

IDs and Browser Navigation

When a user visits a URL containing an ID fragment, the browser may automatically scroll to the matching element.

For example:

https://example.com/article#conclusion

can target:

<section id="conclusion">

This creates a useful deep-linking mechanism.

IDs and CSS `:target`

CSS can style an element that matches the URL fragment using the :target pseudo-class.

Example:

<h2 id="highlight">Important Section</h2>

CSS:

:target {
  background: yellow;
}

When the URL contains:

#highlight

the targeted element can receive the special styling.

Example of a Highlighted Target

<a href="#notice">Read Important Notice</a>

<p id="notice">
  This is an important notice.
</p>

CSS:

:target {
  font-weight: bold;
}

This can make the targeted section easier to find.

Best Practices for the HTML `id` Attribute

Follow these practical rules when using IDs.

1. Keep IDs unique

Use an ID only once per document.

<div id="main"></div>

2. Use meaningful names

Prefer:

id="contact-form"

over:

id="x12"

3. Avoid spaces

Use:

id="main-content"

instead of:

id="main content"

4. Keep names readable

A clear ID helps developers understand the HTML quickly.

5. Use classes for reusable styling

If several elements share the same design, use a class.

6. Use IDs for unique relationships

IDs are especially useful for labels, ARIA references, navigation targets, and JavaScript interactions.

7. Keep naming consistent

Do not randomly mix naming styles throughout the same project.

8. Avoid unnecessary IDs

Not every element needs an ID.

Only add an ID when it serves a useful purpose.

9. Be careful with dynamically generated IDs

When content is generated dynamically, make sure IDs remain unique.

10. Test ID-based relationships

Check that links, labels, scripts, and ARIA references point to the correct element.

Common Mistakes with the `id` Attribute

Mistake 1: Duplicate IDs

Bad:

<div id="item">One</div>
<div id="item">Two</div>

Use unique IDs or a class.

Mistake 2: Spaces in IDs

Bad:

<div id="main content">

Better:

<div id="main-content">

Mistake 3: Incorrect JavaScript syntax

Bad:

document.getElementById("#title");

Correct:

document.getElementById("title");

The # is used with CSS selectors, not with getElementById().

Mistake 4: Incorrect label association

Bad:

<label for="email-address">Email</label>
<input id="email">

The values do not match.

Correct:

<label for="email">Email</label>
<input id="email">

Mistake 5: Using IDs for everything

Using an ID for every element can make a project unnecessarily difficult to maintain.

Use classes when elements belong to the same reusable group.

HTML `id` Attribute Example for a Website

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

  <style>
    #header {
      background: #eee;
      padding: 20px;
    }

    #content {
      padding: 20px;
    }

    #contact {
      padding: 20px;
    }
  </style>
</head>

<body>

  <header id="header">
    <h1>My Website</h1>
  </header>

  <main id="content">
    <h2>Welcome</h2>
    <p>This is the main content of the page.</p>
  </main>

  <section id="contact">
    <h2>Contact</h2>
    <p>Contact us for more information.</p>
  </section>

</body>
</html>

Each major section has its own unique ID.

A Practical Example with Navigation and JavaScript

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>

<section id="home">
  <h2>Home</h2>
</section>

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

<section id="contact">
  <h2>Contact</h2>
  <button id="contactButton">Show Message</button>
  <p id="message"></p>
</section>

<script>
  document.getElementById("contactButton").addEventListener("click", function () {
    document.getElementById("message").textContent =
      "Thank you for contacting us!";
  });
</script>

This example demonstrates several uses of IDs:

Page navigation
JavaScript element selection
Event handling
Dynamic content updates

Is the `id` Attribute Required?

No.

HTML elements do not normally need an ID.

For example, this is perfectly valid:

<p>Hello World</p>

You only need an ID when you have a reason to identify or reference the element.

Can an Element Have Both `id` and `class`?

Yes.

This is very common.

<div id="main-content" class="container">
  Website content
</div>

The ID gives the element a unique identity, while the class can provide shared styling or behavior.

Can an Element Have More Than One ID?

No.

An HTML element should have one id attribute with one ID value.

This is invalid:

<div id="one" id="two">

If you need multiple classifications, use classes:

<div id="main" class="content featured">

The element has one ID and two classes.

Can an ID Be Used on Any HTML Element?

The id attribute is a global attribute. It can generally be used on HTML elements.

For example:

<h1 id="title">Title</h1>
<p id="intro">Introduction</p>
<div id="box">Box</div>
<button id="submit">Submit</button>
<img id="logo" src="logo.png" alt="Logo">

The exact usefulness depends on the element and the task.

Is `id` Case-Sensitive?

When working with IDs, treat the value as case-sensitive to avoid compatibility and maintenance problems.

For example:

<div id="myBox"></div>

should be referenced consistently as:

document.getElementById("myBox");

Avoid changing the capitalization accidentally.

Does an ID Need to Be Globally Unique Across a Website?

No.

The normal uniqueness requirement applies to a single HTML document.

For example, different pages can each contain:

<section id="contact">

That is normal.

The important point is that IDs should not be duplicated within the same document.

`id` Attribute and Web Components

Web components may also use IDs, but developers should consider component encapsulation and the possibility of multiple instances.

When building reusable components, generated or scoped identifiers may be preferable to manually assigning the same ID to every instance.

The goal remains the same: references that depend on an ID should resolve to the intended unique element.

HTML ID Attribute and Testing

IDs are sometimes used by automated testing tools to locate elements.

For example, a test might target:

<button id="login-button">Log In</button>

A stable and meaningful ID can make automated tests easier.

However, teams should decide whether IDs are intended as styling hooks, behavior hooks, accessibility references, or testing selectors. Clear conventions help prevent accidental changes.

HTML ID Attribute and Maintainability

Good ID naming can make a project easier to maintain.

Compare:

<section id="sec1">

with:

<section id="customer-reviews">

The second version communicates the purpose immediately.

Readable HTML reduces the time developers need to understand and modify a website.

HTML ID Attribute and Security

An ID itself is not a security mechanism.

Do not treat an ID as:

Authentication
Authorization
Access control
Secret information
A secure identifier

For example:

<div id="admin-panel">

does not make the panel secure.

Anyone who can access the page can inspect the HTML.

Security must be implemented on the server and through appropriate application controls.

HTML ID Attribute and Performance

Using an ID for a unique element can be efficient for DOM selection.

For example:

document.getElementById("main");

is specifically designed to retrieve an element by ID.

However, for most modern websites, performance should not be the main reason for choosing an ID. Correct structure, maintainability, accessibility, and appropriate semantics are more important.

HTML ID Attribute and Accessibility-Friendly Development

When using IDs for accessibility relationships:

Make every referenced ID unique.
Ensure the reference actually points to an existing element.
Use semantic HTML where possible.
Do not add ARIA unnecessarily.
Test forms and interactive components with keyboard navigation and assistive technologies.

For example:

<label for="search">Search</label>
<input id="search" type="search">

This simple relationship can improve form usability.

HTML ID Attribute: Quick Reference

Item	Description
Attribute	`id`
Type	Global HTML attribute
Main purpose	Unique element identification
Basic syntax	`id="name"`
CSS selector	`#name`
JavaScript method	`getElementById("name")`
URL reference	`#name`
Common form use	Connect `<label>` with a form control
Accessibility use	Create ID-based relationships
Recommended	Unique, meaningful values
Avoid	Duplicate IDs and spaces

Frequently Asked Questions

What is the HTML `id` attribute?

The HTML id attribute gives an element a unique identifier within a document.

What is the syntax of the `id` attribute?

The basic syntax is:

id="value"

For example:

<div id="main">Content</div>

Why is the `id` attribute used?

It is used to uniquely identify an element so that it can be referenced by CSS, JavaScript, links, forms, accessibility attributes, and other web technologies.

Can two HTML elements have the same ID?

They should not. An ID is intended to uniquely identify an element within the document.

What is the difference between `id` and `class`?

An ID is intended for a unique element, while a class can be shared by multiple elements.

How do you select an ID in CSS?

Use the # symbol:

#header {
  background: gray;
}

How do you select an ID in JavaScript?

Use:

document.getElementById("header");

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

Yes.

<div id="main" class="container"></div>

Can an element have multiple IDs?

No. An element should have only one ID.

Can an ID contain a hyphen?

Yes.

id="main-content"

is a common and readable format.

Can an ID contain spaces?

No. Use a hyphen or another appropriate naming convention instead.

Is the `id` attribute case-sensitive?

ID references should be treated consistently with respect to capitalization. Avoid changing the case between the declaration and the reference.

Does every HTML element need an ID?

No. Add an ID only when you need to identify or reference that element.

Can an ID be used for page navigation?

Yes. A link such as:

<a href="#about">About</a>

can point to:

<section id="about">

Is the HTML `id` attribute useful for SEO?

IDs can support navigation and page structure, but simply adding IDs does not provide a direct SEO benefit. Their main value is identification, navigation, scripting, and relationships between elements.

Final Takeaway

The HTML id attribute provides a unique identity for an element. It is a small but powerful part of HTML because many web technologies can use that identity.

A simple example is:

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

That same ID can be referenced by a link:

<a href="#about">About Us</a>

by CSS:

#about {
  color: blue;
}

and by JavaScript:

document.getElementById("about");

IDs are also important for forms and accessibility:

<label for="email">Email</label>
<input id="email" type="email">

The best approach is simple: use IDs when an element needs a unique identity, keep each ID unique within the document, give IDs meaningful names, and use classes when you need reusable styling or grouping.

When used thoughtfully, the id attribute helps connect HTML structure with CSS, JavaScript, navigation, forms, accessibility features, and modern web applications.

What Is the HTML id Attribute?

Why Is the id Attribute Important?

Basic Example of the id Attribute

HTML id Attribute Syntax

The id Value Should Be Unique

id Attribute vs class Attribute

Using id with CSS

ID Selectors and CSS Specificity

Using id with JavaScript

Changing an Element Using Its ID

Using id to Create Internal Page Links

Fragment Identifiers

Using IDs for Table of Contents

IDs in HTML Forms

Example of a Complete Form

id and Accessibility

Valid Characters in an ID

IDs Should Be Meaningful

Recommended ID Naming Style

IDs Are Case-Sensitive

IDs Must Not Contain Spaces

Avoid Duplicate IDs

Do Not Use IDs as a Replacement for Classes

Can Multiple Elements Have the Same ID?

Difference Between id and name

Difference Between id and class

Selecting an ID with querySelector()

Using getElementById()

Using IDs with JavaScript Events

Using IDs for Dynamic Content

IDs and SEO

IDs and Accessibility

IDs and ARIA

Using IDs with <label>

IDs in Navigation

IDs and JavaScript Frameworks

IDs in React

IDs in SVG

IDs and <canvas>

IDs and CSS Variables

IDs and URL Fragments

IDs and Browser Navigation

IDs and CSS :target

Example of a Highlighted Target

Best Practices for the HTML id Attribute

1. Keep IDs unique

2. Use meaningful names

3. Avoid spaces

4. Keep names readable

5. Use classes for reusable styling

6. Use IDs for unique relationships

7. Keep naming consistent

8. Avoid unnecessary IDs

9. Be careful with dynamically generated IDs

10. Test ID-based relationships

Common Mistakes with the id Attribute

Mistake 1: Duplicate IDs

Mistake 2: Spaces in IDs

Mistake 3: Incorrect JavaScript syntax

Mistake 4: Incorrect label association

Mistake 5: Using IDs for everything

HTML id Attribute Example for a Website

A Practical Example with Navigation and JavaScript

Is the id Attribute Required?

Can an Element Have Both id and class?

Can an Element Have More Than One ID?

Can an ID Be Used on Any HTML Element?

Is id Case-Sensitive?

Does an ID Need to Be Globally Unique Across a Website?

id Attribute and Web Components

HTML ID Attribute and Testing

HTML ID Attribute and Maintainability

HTML ID Attribute and Security

HTML ID Attribute and Performance

HTML ID Attribute and Accessibility-Friendly Development

HTML ID Attribute: Quick Reference

Frequently Asked Questions

What is the HTML id attribute?

What is the syntax of the id attribute?

Why is the id attribute used?

What Is the HTML `id` Attribute?

Why Is the `id` Attribute Important?

Basic Example of the `id` Attribute

HTML `id` Attribute Syntax

The `id` Value Should Be Unique

`id` Attribute vs `class` Attribute

Using `id` with CSS

Using `id` with JavaScript

Using `id` to Create Internal Page Links

`id` and Accessibility

Difference Between `id` and `name`

Difference Between `id` and `class`

Selecting an ID with `querySelector()`

Using `getElementById()`

Using IDs with `<label>`

IDs and `<canvas>`

IDs and CSS `:target`

Best Practices for the HTML `id` Attribute

Common Mistakes with the `id` Attribute

HTML `id` Attribute Example for a Website

Is the `id` Attribute Required?

Can an Element Have Both `id` and `class`?

Is `id` Case-Sensitive?

`id` Attribute and Web Components

What is the HTML `id` attribute?

What is the syntax of the `id` attribute?

Why is the `id` attribute used?

What is the difference between `id` and `class`?

Is the `id` attribute case-sensitive?

Is the HTML `id` attribute useful for SEO?