# An ID must not contain whitespace

> Canonical HTML version: https://rocketvalidator.com/html-validation/an-id-must-not-contain-whitespace
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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

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

### ✅ Fixed: Replace the space with an underscore

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

### ✅ Fixed: Use camelCase

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

### ❌ Invalid: `id` with a space breaks label association

```html
<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`

```html
<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:

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

### ✅ Fixed: Trim all whitespace

```html
<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.