An ID must not contain whitespace

The id attribute uniquely identifies an element within a document, making it essential for fragment links, JavaScript targeting, CSS styling, and label associations. According to the HTML specification, an id value must contain at least one character and must not contain any ASCII whitespace. This means spaces, tabs, line feeds, carriage returns, and form feeds are all prohibited.

A common mistake is accidentally including a space in an id value, which effectively makes it look like multiple values — similar to how the class attribute works. However, unlike class, the id attribute does not support space-separated values. When a browser encounters an id with a space, behavior becomes unpredictable: some browsers may treat only the first word as the ID, while CSS and JavaScript selectors may fail entirely.

Why this matters

• Broken fragment links: A link like <a href="#my section"> won’t correctly scroll to an element with id="my section" in all browsers.
• JavaScript failures: document.getElementById("my section") may not return the expected element, and document.querySelector("#my section") will throw a syntax error because spaces are not valid in CSS ID selectors without escaping.
• CSS issues: A selector like #my section targets an element with id="my" that has a descendant <section> element — not what you intended.
• Accessibility: Screen readers and assistive technologies rely on id attributes for label associations (e.g., <label for="...">). A broken id can break form accessibility.

Best practices for id values

While the HTML specification technically allows any non-whitespace character in an id, it’s best practice to stick to ASCII letters, digits, hyphens (-), and underscores (_). Starting the value with a letter also ensures maximum compatibility with CSS selectors without needing escaping.

Examples

❌ Invalid: id contains a space

<div id="main content">
  <p>Welcome to the page.</p>
</div>

The space between main and content makes this an invalid id.

✅ Fixed: Replace the space with a hyphen

<div id="main-content">
  <p>Welcome to the page.</p>
</div>

✅ Fixed: Replace the space with an underscore

<div id="main_content">
  <p>Welcome to the page.</p>
</div>

✅ Fixed: Use camelCase

<div id="mainContent">
  <p>Welcome to the page.</p>
</div>

❌ Invalid: id with a space breaks label association

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

The for attribute won’t properly associate with the input, breaking accessibility.

✅ Fixed: Remove whitespace from both for and id

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

❌ Invalid: Trailing or leading whitespace

Whitespace isn’t always obvious. A trailing space or a copy-paste error can introduce invisible whitespace:

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

✅ Fixed: Trim all whitespace

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

If you’re generating id values dynamically (e.g., from a CMS or database), make sure to trim and sanitize the values by stripping whitespace and replacing spaces with hyphens or underscores before rendering them into HTML.

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing