acerca de HTML

Referencia de etiquetas

Etiqueta option en HTML: valores y opciones seleccionadas

La etiqueta <option> en HTML representa una opción de un <select> o una sugerencia de un <datalist>. Úsala para ofrecer alternativas como el nivel de un curso: en un selector se elige entre las opciones disponibles; en una lista de sugerencias se ayuda a escribir sin impedir otras respuestas.

<select name="nivel" aria-label="Nivel">
  <option value="basico" selected>Básico</option>
  <option value="avanzado">Avanzado</option>
</select>

Resultado: Básico comienza seleccionado y su valor para el formulario es basico. Si eliges Avanzado, pasa a ser avanzado. aria-label da un nombre accesible al selector; el caso práctico añade una etiqueta visible. Para probar este fragmento, sustituye todo el formulario del documento completo de abajo por estas líneas.

Sintaxis y contexto válido

En un selector tradicional, escribe texto dentro de <option>, directamente en <select> o dentro de un <optgroup> que agrupe alternativas relacionadas. En un <datalist>, usa opciones con texto o con value para definir sugerencias. Una opción suelta no crea un selector.

Los ejemplos mantienen </option> explícito. El HTML Living Standard permite omitir el cierre cuando sigue inmediatamente otro <option>, un <optgroup>, un <hr> o no queda contenido en el padre.

El modelo actual también contempla contenido enriquecido para selectores personalizables; se explica aparte al final. No copies imágenes o estructuras HTML dentro de un selector tradicional esperando que se representen igual.

Texto visible frente a value

En <option value="basico">Básico</option>, la persona lee «Básico» y el dato es basico. El name del <select> identifica el campo: en un formulario, esa selección aporta nivel=basico. <option> no lleva un name propio para el envío.

¿Qué se envía sin value? El valor se deriva del texto de la opción, conforme a las reglas del elemento. En el caso tradicional se eliminan espacios ASCII de los extremos y se compactan los consecutivos:

<option>  Curso   básico  </option>

Su valor es Curso básico, no basico. El atributo label no se convierte en el valor por omitir value. Escribir valores explícitos y estables evita que editar un rótulo cambie los datos esperados por la aplicación.

Selección inicial, disabled y opción vacía

¿selected va en <select> u <option>? Va en <option> y marca su selección predeterminada. En un selector simple, sin multiple, marca como máximo una. En un desplegable simple sin ninguna marcada, normalmente se selecciona la primera opción habilitada.

Cambiar la elección no reescribe el atributo HTML selected. La propiedad DOM opcion.selected expresa el estado actual; opcion.defaultSelected refleja el atributo. El restablecimiento del formulario recupera la selección predeterminada. MDN explica esta diferencia entre atributo y propiedad.

disabled impide elegir una opción mediante la interacción habitual; también puede heredarse de un <optgroup disabled>. Una opción deshabilitada no aporta su valor a los datos del formulario, aunque un script la seleccione. hidden es un atributo global de presentación: ocultar una opción no equivale a deshabilitarla ni garantiza que se excluya del envío.

selected y disabled son booleanos: su presencia activa el estado. disabled="false" sigue deshabilitando y selected="false" sigue declarando selección inicial. Retira el atributo para desactivarlo.

En un <select required> simple con tamaño de presentación uno, la primera opción con value="", hija directa de <select>, puede actuar como indicación de selección. Si está seleccionada, el control no satisface required. No basta con poner cualquier opción vacía dentro de un grupo. Estas condiciones pertenecen al selector, no a un atributo required de <option>.

Ejemplo práctico: nivel obligatorio y tema sugerido

Guarda este documento como opciones.html en UTF-8 y ábrelo en el navegador. No necesita servidor, CSS ni archivos adicionales. Es una prueba local sin botón de envío: puedes elegir y restablecer valores, pero no se envían ni se guardan datos.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Preferencias de un curso</title>
  </head>
  <body>
    <h1>Preferencias de un curso</h1>
    <form id="option-form">
      <p><label for="option-nivel">Nivel del curso (obligatorio)</label></p>
      <p id="option-aviso">Avanzado todavía no tiene plazas.</p>
      <select id="option-nivel" name="nivel" required
              aria-describedby="option-aviso">
        <option value="">Elige un nivel</option>
        <option value="basico" selected>Básico</option>
        <option value="intermedio">Intermedio</option>
        <option value="avanzado" disabled>Avanzado (sin plazas)</option>
      </select>

      <p><label for="option-tema">Tema que te interesa</label></p>
      <p id="option-ayuda">Sugerencias: HTML y CSS. Puedes escribir otro tema.</p>
      <input id="option-tema" name="tema" list="option-temas"
             aria-describedby="option-ayuda">
      <datalist id="option-temas">
        <option value="HTML"></option>
        <option value="CSS"></option>
      </datalist>

      <p><button type="reset">Restablecer preferencias</button></p>
    </form>
  </body>
</html>
  1. Pulsa Tab hasta Nivel. Básico es la selección inicial. Usa las flechas para elegir Intermedio; Avanzado permanece deshabilitado. La combinación para abrir el desplegable depende del navegador y del sistema.
  2. En Tema, elige una sugerencia si aparece o escribe JavaScript. El campo acepta ese texto aunque no figure en <datalist>. selected en una sugerencia no fija el valor inicial del campo: para eso se usa value en <input>.
  3. Con Intermedio y JavaScript, ejecuta en la consola del navegador:
const formulario = document.getElementById('option-form');
Object.fromEntries(new FormData(formulario));
// { nivel: "intermedio", tema: "JavaScript" }

FormData construye localmente los datos que aportarían los controles; no envía una petición ni valida por sí mismo. El valor del selector procede de la opción elegida. Las sugerencias de <datalist> no se envían como campos: se envía el texto actual de <input>.

  1. Elige «Elige un nivel» y ejecuta formulario.reportValidity() en la consola: devuelve false y el navegador indica que falta una elección válida. En un formulario real, la validación nativa bloquea el envío normal; el servidor también debe validar los datos.
  2. Activa «Restablecer preferencias» con Enter o Espacio. Vuelven Básico y el tema vacío. Repite el recorrido sin JavaScript: elección, escritura y restablecimiento siguen funcionando; la inspección por consola requiere JavaScript.

Si retiras selected de Básico, la opción vacía queda inicialmente seleccionada y el nivel falta al validar. Si retiras disabled, Avanzado pasa a estar disponible; actualiza también el aviso. Si cambias value="basico" por value="inicial", cambia el dato, aunque siga viéndose «Básico». Si eliminas esa opción, desaparece esa alternativa. Retirar <datalist> elimina las sugerencias y conserva la escritura libre.

Atributos y accesibilidad

Los atributos específicos son value, label, selected y disabled. label debe tener texto no vacío: en un selector tradicional puede proporcionar el rótulo mostrado; en un <datalist> su presentación depende del navegador. Con label y value juntos, el modelo exige una opción sin contenido, por ejemplo <option value="basico" label="Básico"></option>. Sin value, el modelo con label permite texto para derivar el valor. Consulta los atributos en MDN.

id, class y lang son globales; font-size es CSS y selector.value es JavaScript. multiple, required y name pertenecen a <select>. El atributo label de una opción no sustituye al elemento <label> que nombra el selector.

Conserva un nombre visible para cada control y opciones comprensibles fuera de contexto. El ejemplo comunica la falta de plazas mediante texto, además del estado deshabilitado. Usa el control nativo y verifica teclado y foco; no añadas roles ARIA redundantes. Las sugerencias pueden variar según navegador y tecnología de asistencia: su ausencia no debe impedir comprender ni completar el campo.

Opciones enriquecidas, compatibilidad y etiquetas relacionadas

El selector tradicional con opciones de texto tiene soporte ampliamente establecido. Su apariencia y el CSS admitido en las opciones dependen del navegador y del sistema, según la referencia de compatibilidad y estilos de MDN.

Compatibilidad revisada el 3 de octubre de 2026: Chrome documenta el selector personalizable desde la versión 135, mediante appearance: base-select y funciones asociadas. Es un soporte distinto del de <option> tradicional; consulta la explicación de Chrome antes de adoptar ese patrón y prueba el resultado en tus navegadores objetivo.

Para opciones sin label fuera de <datalist>, el modelo enriquecido admite determinados elementos como <div> y contenido de frase, con restricciones: no permite descendientes interactivos, <datalist>, <object> ni elementos con tabindex. No introduzcas botones, enlaces o campos dentro de una opción ni extrapoles el soporte de Chrome a otros navegadores. En <datalist> se conserva el modelo de texto o de opción vacía según sus atributos.

Elige <select> cuando la respuesta deba pertenecer a una lista; <optgroup> para agruparla, y <datalist> para sugerir sin limitar la escritura. <selectedcontent> participa en la presentación del selector personalizable, pero no reemplaza a <option> como alternativa seleccionable.