Purpose of <option label="...">

Question

What's the purpose of the label attribute in the <option> tag in HTML5?

All the spec has to say is:

Specifies a label for the option.

MDN provides an explanation I cannot understand:

This attribute is text for the label indicating the meaning of the option. If the label attribute isn't defined, its value is that of the element text content.

Usage note: the label attribute is designed to contain a short label typically used in a hierarchical menu. The value attribute describes a longer label designed to be used near a radio button, for example.

I wrote a simple case I thought that could shed some light:

<select name="country">
    <option value="ES" label="Spain's label">Spain</option>
    <option value="FR" label="France's label">France</option>
</select>

... and only found that browsers seem to:

• Ignore it (Firefox 26)
• Completely replace tag content with it (Explorer 11, Chrome 32, Opera 12)

What is the attribute meant for?

---

Note: original question assumed the attribute was new. That's incorrect. It's only been enhanced due to newer tags introduced in HTML5.

Answer 1

In practice, it is meant for use inside a datalist element. The idea is that when browsers that do not support this element encounter it, they render its content, by normal principles, and if you want that fallback content to be empty, you need to use elements with empty content there. The label attribute lets you specify a human-readable string for an option, and modern browsers still implement the datalist with option elements properly.

Consider the following example in HTML5 CR:

<label>
 Sex:
 <input name=sex list=sexes>
 <datalist id=sexes>
  <option value="Female">
  <option value="Male">
 </datalist>
</label>

It is implemented so that there is just the text box, but if you type “f” there, the modern browsers suggest “Female”. (There is differences in details here, but that’s not relevant to the question.) Here you don’t need the label attribute.

But if you wanted to have values like 2 and 1 (the ISO/IEC 5218 standard codes for sexes) in the submitted form data, instead of strings “Female” and “Male”, what would you do? Inside a select element you could use <option value=2>Female</option>, but inside a datalist, that would result in the string “Female” being displayed by old browsers, and that would look odd.

Using the label attribute, you can write the datalist element as follows:

 <datalist id=sexes>
  <option value="2" label="Female">
  <option value="1" label="Male">
 </datalist>

This is meant to use human-readable words in the user interface and to submit the coded value 2 or 1 as part of form data. In practice, it does not work quite that well. The browser also has to show the coded value, since that’s what will appear in the textbox when the user selects a suggestion made by a browser. Different browsers have solved this in different ways, all with some drawbacks. E.g., on IE, focusing on the text box opens a menu with the alternatives “Female” and “Male”, which is fine, but then, if you click on “Female”, the menu closes and the character “2” appears in the box. It is difficult to say how browsers should deal with this. Anyway, this is where the label attribute is meant to be used.