# Bad value “” for attribute “id” on element X: An ID must not be the empty string.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-for-attribute-id-on-element-x-an-id-must-not-be-the-empty-string
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The validator reports “Bad value “” for attribute `id` on element X: An ID must not be the empty string” when any element includes an empty `id` attribute. Per the HTML standard, `id` is a global attribute used as a unique document-wide identifier. An empty identifier is not a valid value and is ignored by some features, leading to hard-to-debug issues.

This matters for accessibility and interoperability. Features that depend on IDs—fragment navigation (`#target`), `<label for>`, ARIA attributes like `aria-labelledby`/`aria-controls`, and DOM APIs such as `document.getElementById()`—require a non-empty, unique value. Empty IDs break these links, can degrade assistive technology output, and violate conformance, which may hide bugs across browsers.

How to fix:
- If the element doesn’t need an identifier, remove the `id` attribute entirely.
- If it needs one, provide a non-empty, unique value, e.g., `id="main-content"`.
- Ensure uniqueness across the page; each `id` must occur only once.
- Use simple, predictable tokens: avoid spaces, prefer lowercase letters, digits, hyphens, and underscores (e.g., `feature-1`). While the spec allows a broad range of characters, sticking to URL- and selector-friendly characters avoids pitfalls.

## Examples

### Example that triggers the validator error (empty id)
```html
<div id=""></div>
```

### Correct: remove an unnecessary empty id
```html
<div></div>
```

### Correct: provide a meaningful, unique id
```html
<section id="features"></section>
```

### Problematic label association with empty id (invalid)
```html
<label for="">Email</label>
<input type="email" id="">
```

### Correct label–control association
```html
<label for="email">Email</label>
<input type="email" id="email">
```

### Correct ARIA relationship
```html
<h2 id="pricing-heading">Pricing</h2>
<section aria-labelledby="pricing-heading">
  <p>Choose a plan.</p>
</section>
```

### Correct fragment navigation target
```html
<nav>
  <a href="#contact">Contact</a>
</nav>
<section id="contact">
  <h2>Contact us</h2>
</section>
```

### Minimal full document (validated) demonstrating proper ids
```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Valid IDs Example</title>
  </head>
  <body>
    <main id="main-content">
      <h1 id="page-title">Welcome</h1>
      <p>Jump to the <a href="#details">details</a>.</p>
      <section id="details">
        <h2>Details</h2>
      </section>
      <form>
        <label for="email">Email</label>
        <input id="email" type="email">
      </form>
    </main>
  </body>
</html>
```
