Validación HTML: El elemento "option" sin el atributo "label" no debe estar vacío.

Acerca de este problema HTML

El elemento <option> representa una opción dentro de un desplegable <select>, un <datalist>, o un <optgroup>. Según la especificación HTML, cada opción debe tener un nombre — el texto que se muestra al usuario. Este nombre puede provenir de una de dos fuentes: el contenido de texto entre las etiquetas de apertura <option> y cierre </option>, o el atributo label en el elemento. Si no se proporciona ninguno, la opción se renderiza como una entrada en blanco en el desplegable, lo que crea varios problemas.

Desde el punto de vista de la accesibilidad, los lectores de pantalla dependen de la etiqueta de la opción para anunciar cada opción al usuario. Una opción vacía y sin etiquetar no da a la tecnología asistiva nada significativo que leer, haciendo que el control sea inutilizable para algunos usuarios. Desde una perspectiva de usabilidad, los usuarios videntes ven una línea en blanco en el desplegable y no tienen idea de qué representa. Y desde el punto de vista del cumplimiento de estándares, la especificación HTML requiere explícitamente que un <option> sin un atributo label no debe tener contenido vacío.

Ten en cuenta que el atributo value es independiente del texto de visualización. El value es lo que se envía con el formulario, mientras que el contenido de la etiqueta/texto es lo que ve el usuario. Establecer un value no satisface el requisito de texto visible.

Cómo solucionarlo

Tienes dos opciones:

Añadir contenido de texto dentro del elemento <option> (el enfoque más común y recomendado).
Añadir un atributo label al elemento <option>. Cuando está presente, el atributo label tiene precedencia sobre el contenido de texto para propósitos de visualización en muchos navegadores.

Si pretendes que una opción sirva como marcador de posición (por ejemplo, “Elige uno…”), asegúrate de que aún tenga contenido de texto visible.

Ejemplos

❌ Opción vacía sin etiqueta

Esto desencadena el error de validación porque los elementos <option> no tienen contenido de texto ni atributo label:

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

✅ Solución: Añadir contenido de texto dentro de cada opción

<select name="size">
  <option value="">Elige un tamaño</option>
  <option value="s">Pequeño</option>
  <option value="m">Mediano</option>
  <option value="l">Grande</option>
</select>

✅ Solución: Usar el atributo `label`

El atributo label proporciona el texto de visualización. El contenido del elemento puede entonces estar vacío o diferir de la etiqueta:

<select name="size">
  <option value="" label="Elige un tamaño"></option>
  <option value="s" label="Pequeño"></option>
  <option value="m" label="Mediano"></option>
  <option value="l" label="Grande"></option>
</select>

✅ Mezclando ambos enfoques

Puedes usar contenido de texto para algunas opciones y el atributo label para otras. Incluso puedes usar ambos en el mismo elemento — en ese caso, el atributo label típicamente tiene precedencia para la visualización:

<select name="size">
  <option value="">Elige un tamaño</option>
  <option value="s">Pequeño</option>
  <option value="m" label="Mediano">Mediano (M)</option>
  <option value="l" label="Grande">Grande (L)</option>
</select>

❌ Error común: Asumir que `value` cuenta como etiqueta

Esto sigue siendo inválido porque value no se muestra al usuario:

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

✅ Corregido

<select name="color">
  <option value="red">Rojo</option>
</select>

En casi todos los casos, colocar texto legible directamente dentro de las etiquetas <option> es el enfoque más simple y compatible. Reserva el atributo label para situaciones donde necesites que el texto mostrado difiera del contenido del elemento.