# Element “option” without attribute “label” must not be empty.

> Canonical HTML version: https://rocketvalidator.com/html-validation/element-option-without-attribute-label-must-not-be-empty
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `<option>` element represents a choice within a `<select>` dropdown, a `<datalist>`, or an `<optgroup>`. According to the HTML specification, every option must have a name — the text that is displayed to the user. This name can come from one of two sources: the text content between the opening `<option>` and closing `</option>` tags, or the `label` attribute on the element. If neither is provided, the option renders as a blank entry in the dropdown, which creates several problems.

From an **accessibility** standpoint, screen readers rely on the option's label to announce each choice to the user. An empty, unlabeled option gives assistive technology nothing meaningful to read, making the control unusable for some users. From a **usability** perspective, sighted users see a blank line in the dropdown and have no idea what it represents. And from a **standards compliance** perspective, the HTML specification explicitly requires that an `<option>` without a `label` attribute must not have empty content.

Note that the `value` attribute is separate from the display text. The `value` is what gets submitted with the form, while the label/text content is what the user sees. Setting a `value` does not satisfy the requirement for visible text.

## How to fix it

You have two options:

1. **Add text content** inside the `<option>` element (the most common and recommended approach).
2. **Add a `label` attribute** to the `<option>` element. When present, the `label` attribute takes precedence over the text content for display purposes in many browsers.

If you intend for an option to serve as a placeholder (e.g., "Choose one…"), make sure it still has visible text content.

## Examples

### ❌ Empty option without a label

This triggers the validation error because the `<option>` elements have no text content and no `label` attribute:

```html
<select name="size">
  <option value=""></option>
  <option value="s"></option>
  <option value="m"></option>
  <option value="l"></option>
</select>
```

### ✅ Fix: Add text content inside each option

```html
<select name="size">
  <option value="">Choose a size</option>
  <option value="s">Small</option>
  <option value="m">Medium</option>
  <option value="l">Large</option>
</select>
```

### ✅ Fix: Use the `label` attribute

The `label` attribute provides the display text. The element content can then be empty or differ from the label:

```html
<select name="size">
  <option value="" label="Choose a size"></option>
  <option value="s" label="Small"></option>
  <option value="m" label="Medium"></option>
  <option value="l" label="Large"></option>
</select>
```

### ✅ Mixing both approaches

You can use text content for some options and the `label` attribute for others. You can even use both on the same element — in that case, the `label` attribute typically takes precedence for display:

```html
<select name="size">
  <option value="">Choose a size</option>
  <option value="s">Small</option>
  <option value="m" label="Medium">Medium (M)</option>
  <option value="l" label="Large">Large (L)</option>
</select>
```

### ❌ Common mistake: Assuming `value` counts as a label

This is still invalid because `value` is not displayed to the user:

```html
<select name="color">
  <option value="red"></option>
</select>
```

### ✅ Corrected

```html
<select name="color">
  <option value="red">Red</option>
</select>
```

In almost all cases, placing readable text directly inside the `<option>` tags is the simplest and most compatible approach. Reserve the `label` attribute for situations where you need the displayed text to differ from the element's content.