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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-for-attribute-id-on-element-select-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 `id` attribute uniquely identifies an element within a document. According to the WHATWG HTML living standard, if the `id` attribute is specified, its value must be non-empty and must not contain any ASCII whitespace characters. The attribute itself is optional — you don't need to include it — but when you do, it must have a valid value. Setting `id=""` violates this rule because the empty string is not a valid identifier.

This issue commonly occurs when code is generated dynamically (e.g., by a templating engine or JavaScript framework) and the variable intended to populate the `id` value resolves to an empty string. It can also happen when developers add the attribute as a placeholder and forget to fill it in.

### Why this matters

- **Standards compliance:** An empty `id` violates the HTML specification, making your document invalid.
- **Accessibility:** Assistive technologies like screen readers rely on `id` attributes to associate `<label>` elements with form controls. An empty `id` breaks this association, making forms harder to use for people who depend on these tools.
- **JavaScript and CSS:** Methods like `document.getElementById("")` and selectors like `#` (with no identifier) will not work as expected. An empty `id` can cause subtle, hard-to-debug issues in your scripts and styles.
- **Browser behavior:** While browsers are generally forgiving, an empty `id` leads to undefined behavior. Different browsers may handle it inconsistently.

### How to fix it

1. **Assign a meaningful value:** Give the `id` a descriptive, unique value that identifies the element's purpose (e.g., `id="country-select"`).
2. **Remove the attribute:** If you don't need the `id`, simply remove it from the element altogether.
3. **Fix dynamic generation:** If a templating engine or framework is producing the empty value, add a conditional check to either output a valid `id` or omit the attribute entirely.

## Examples

### ❌ Incorrect: empty `id` attribute

```html
<label for="country">Country</label>
<select id="" name="country">
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>
```

This triggers the validation error because `id=""` is an empty string.

### ✅ Correct: meaningful `id` value

```html
<label for="country">Country</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>
```

The `id` now has a valid, non-empty value, and the `<label>` element's `for` attribute correctly references it.

### ✅ Correct: `id` attribute removed entirely

```html
<label>
  Country
  <select name="country">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
  </select>
</label>
```

If you don't need the `id`, remove it. Here, the `<label>` wraps the `<select>` directly, so the `for`/`id` association isn't needed — the implicit label works just as well.