Question
In HTML, what rules apply to the id attribute value of an element? For example, what characters are allowed, what restrictions exist, and what naming practices are recommended when creating id values?
Short Answer
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.
Concept
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.
Mental Model
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.
Syntax and Examples
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>
< =>
Step by Step Execution
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:
- The browser reads
<h2 id="intro-title">. - It stores the
idvalueintro-titleas the unique identifier for that element. - The link
<a href="#intro-title">uses that sameidas a fragment. - When clicked, the browser scrolls to the element with
id="intro-title". - In JavaScript,
document.getElementById("intro-title")searches for that element.
Real World Use Cases
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>
Real Codebase Usage
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-headermain-navcheckout-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);
Common Mistakes
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
Comparisons
| Concept | Purpose | Must Be Unique? | Best For |
|---|---|---|---|
id | Identifies one specific element | Yes | Single unique elements |
class | Groups multiple elements | No | Shared styles and repeated patterns |
data-* attribute | Stores custom data | No | Metadata for scripts |
id vs class
<div id="main-header"></div>
<div =>
Cheat Sheet
Core rules
- An
ididentifies 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
FAQ
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?
Mini Project
Description
Create a small single-page HTML document that demonstrates good id usage for navigation, styling, JavaScript access, and form labeling. This project helps you practice using unique, readable IDs in realistic situations.
Goal
Build a page where IDs are used correctly for section links, a form label, and one JavaScript-controlled button.
Requirements
- Add at least two sections with unique
idvalues. - Add a navigation link that jumps to one of those sections using
href="#...". - Add a form input with a unique
idand a matching<label for="...">. - Add one button with an
idand use JavaScript to respond to a click. - Use simple, readable
idnames without spaces.
Keep learning
Related questions
Can You Style Half a Character in CSS? Text Effects with CSS and JavaScript
Learn how to style half of a character using CSS and JavaScript, including overlay techniques for dynamic text effects.
Get Screen, Page, and Browser Window Size in JavaScript
Learn how to get screen size, viewport size, page size, and scroll position in JavaScript across major browsers.
Get the Selected Radio Button Value with jQuery
Learn how to find which radio button is selected in jQuery and get its value with simple examples and common mistakes.