HTML id Attribute Rules: Valid Values and Best Practices

By the end of this page, you will understand what an HTML id is, what makes an id value valid, how it is used in CSS and JavaScript, why uniqueness matters, and which naming conventions make your markup easier to maintain.

An HTML id is a unique identifier for a single element on a page. It is commonly used for:

• linking to a specific element with a fragment like #section-1
• selecting an element in CSS
• finding an element in JavaScript with getElementById()
• associating labels, inputs, and accessibility attributes

In modern HTML, the main rule is that an id value must be unique within the document and must not contain ASCII whitespace such as spaces, tabs, or line breaks.

For example:

<div id="header"></div>
<section id="product-list"></section>
<input id="email">

These are valid because they are unique and contain no spaces.

Important practical notes:

• id="main" is valid.
• id="main-content" is valid.
• id="user_1" is valid.
• id="123abc" is valid in HTML.
• id="my section" is not valid because it contains a space.

Why this matters:

• If two elements share the same id, JavaScript and CSS behavior becomes confusing or unreliable.
• Some characters may be technically allowed in HTML, but awkward to use in CSS selectors unless escaped.
• Clear naming helps readability and reduces bugs.

So there is a difference between technically valid HTML and practical, easy-to-use naming. In real projects, developers usually choose simple names using letters, numbers, hyphens, and underscores.

Think of an id like a person’s unique employee badge number inside one company.

• Each employee should have a different badge number.
• The badge identifies exactly one person.
• If two people share the same badge number, confusion happens.
• If the badge number contains strange symbols, systems may still store it, but other tools might struggle to use it cleanly.

In the same way, an HTML id should clearly and uniquely identify one element, and it should be easy for CSS, JavaScript, and other developers to work with.

The basic syntax is:

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

Simple example

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

You can target it in CSS:

#page-title {
  color: darkblue;
}

And access it in JavaScript:

const title = document.getElementById("page-title");
console.log(title.textContent);

Good id examples

<div id="header"></div>
< =>

Consider this HTML:

<h2 id="intro-title">Introduction</h2>
<a href="#intro-title">Jump to title</a>

And this JavaScript:

const element = document.getElementById("intro-title");
console.log(element.textContent);

Step by step:

1. The browser reads <h2 id="intro-title">.
2. It stores the id value intro-title as the unique identifier for that element.
3. The link <a href="#intro-title"> uses that same id as a fragment.
4. When clicked, the browser scrolls to the element with id="intro-title".
5. In JavaScript, document.getElementById("intro-title") searches for that element.

HTML id values are used in many practical situations:

Page navigation

<a href="#pricing">Go to pricing</a>
<section id="pricing">...</section>

This lets users jump to a section of the page.

Form labels and accessibility

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

The for attribute points to the input’s id.

JavaScript DOM access

<button id="toggle-menu">Menu</button>

In real codebases, developers usually treat id values as stable identifiers for important elements.

Common patterns include:

1. Using IDs for one-off unique elements

Examples:

• site-header
• main-nav
• checkout-form

These are elements that appear once on the page.

2. Avoiding IDs for repeated UI items

If many elements share the same style or behavior, developers usually use classes instead of IDs.

<li class="product-item">Item 1</li>
<li class="product-item">Item 2</li>

3. Stable hooks for JavaScript

<button id="save-profile">Save</button>

document.().(, saveProfile);

Using spaces in IDs

Broken:

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

Fix:

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

Reusing the same ID multiple times

Broken:

<p id="message">One</p>
<p id="message">Two</p>

Fix: make each id unique, or use a class if multiple elements share the same role.

<p class="message">One</p>
<p class=>Two

id vs class

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

Core rules

• An id identifies one element in a document.
• The value should be unique on the page.
• Do not include spaces, tabs, or line breaks.
• Prefer simple names that work well in HTML, CSS, and JavaScript.

Safe naming pattern

id="main-content"
id="login-form"
id="user-profile"

Avoid

id="main content"
id=""
id="same-id"   <!-- used twice -->

Common usage

<a href="#contact">Contact</a>
<section id="contact"></section>

#contact {
  padding: 1rem;
}

const contact = document.getElementById("contact");

Best practice

What characters are allowed in an HTML id?

In modern HTML, an id must not contain ASCII whitespace. Many other characters are technically allowed, but simple names with letters, numbers, hyphens, and underscores are easiest to use.

Can an HTML id start with a number?

Yes, in HTML it can. However, names starting with letters are often easier to read and work with, especially in CSS.

Can two elements have the same id?

They should not. An id is meant to be unique within the document.

Are spaces allowed in an id value?

No. An id must not contain spaces or other ASCII whitespace characters.

Should I use id or class?

Use id for one unique element. Use class for styles or behavior shared by multiple elements.

Can I use special characters in an id?

Sometimes yes, but it is usually better to avoid them because CSS selectors may require escaping and the code becomes harder to maintain.

Is an empty value valid?

• class attribute — related because it groups multiple elements, while id identifies one unique element.
• CSS selectors — related because id values are commonly used with #selector syntax.
• document.getElementById() — related because JavaScript often accesses elements by id.
• Fragment identifiers — related because links like #section-name depend on element IDs.
• Form labels and for — related because labels connect to form inputs using an input’s id.
• ARIA attributes — related because accessibility relationships often reference IDs.
• data-* attributes — related because they are another way to attach information to elements without using IDs.
• HTML global attributes — related because id is one of the standard global attributes available on most HTML elements.