acerca de HTML

Referencia de etiquetas

Etiqueta label en HTML: nombres accesibles de controles

La etiqueta <label> proporciona una etiqueta a un control de formulario que admita esta asociación. Sirve para indicar qué dato se pide o qué significa una opción, y relaciona ese texto con el control para las tecnologías de asistencia. Úsala, por ejemplo, para que un campo vacío se identifique como «Correo electrónico» o para que una casilla explique qué se elige.

Ejemplo mínimo: nombrar un campo

<label for="correo">Correo electrónico</label>
<input id="correo" name="correo" type="email">

Verás el texto y un campo de correo. for="correo" vincula la etiqueta con id="correo"; pulsar el texto puede llevar el foco al campo. La activación exacta depende del control y de la plataforma. La asociación también permite obtener el nombre accesible «Correo electrónico»: estar cerca visualmente no bastaría para establecerla.

Para probar el fragmento, colócalo dentro del <body> de un documento HTML con doctype, idioma español y codificación UTF-8. No necesita CSS ni JavaScript, y funciona aunque el campo esté fuera de un <form>. El caso práctico de abajo incluye un documento completo.

Sintaxis y contexto válido

Escribe apertura y cierre: <label>Texto</label>. El elemento puede aparecer donde se admite contenido de frase, como un párrafo de formulario. Puede contener texto y elementos de frase, pero no otro <label> ni controles etiquetables distintos del que etiqueta. Para dos campos, escribe dos etiquetas.

Admiten esta asociación <input> salvo type="hidden", <textarea>, <select>, <button>, <output>, <meter> y <progress>, además de los elementos personalizados asociados a formularios. Que un elemento tenga id no lo hace etiquetable: <label for="aviso"> no etiqueta un <div id="aviso">. Consulta el modelo de contenido y asociación de label en el estándar.

For e id: cómo asociarlos paso a paso

  1. Asigna al control un id único en todo el documento, como correo.
  2. Escribe ese mismo valor en el for de la etiqueta. La coincidencia debe ser exacta, incluidas mayúsculas: Correo y correo son distintos.
  3. Conserva name para identificar el dato enviado. Puede ser diferente: id="correo" name="email" sigue asociado a for="correo".
  4. Pulsa el texto y comprueba que actúa sobre el control esperado.

¿for debe coincidir con id o con name? Con id. Cambiar solo name no rompe la etiqueta; cambiar id obliga a actualizar for. Los IDs duplicados son inválidos y pueden dirigir la asociación al primer elemento con ese ID, aunque pretendieras señalar otro. La guía de etiquetas de WAI explica esta relación explícita.

¿Puedo envolver un input sin for? Sí: la asociación es implícita cuando el control está dentro de <label> y no hay for. La casilla del caso práctico usa esta forma. La asociación explícita permite separar etiqueta y control al distribuirlos con CSS y suele facilitar su reconocimiento por herramientas de accesibilidad. También puedes envolverlo y añadir for e id, siempre que apunten al mismo control contenido. Un for incorrecto no se corrige automáticamente por envolver el campo.

Label, placeholder y legend cumplen funciones distintas

  • <label> identifica un control y mantiene visible su texto después de escribir. Para un campo de correo, puede decir «Correo electrónico».
  • placeholder sugiere una entrada, como ana@example.com, dentro del campo vacío. Desaparece al introducir un valor; no lo uses como única explicación ni como sustituto de la etiqueta. Las instrucciones importantes deben seguir disponibles. Consulta las instrucciones de formularios de WAI.
  • <legend> nombra un grupo dentro de un <fieldset>, como «Preferencias de contacto». Los controles del grupo siguen necesitando sus propios nombres. Consulta la guía de fieldset para la agrupación.

Caso práctico: correo y preferencia de boletín

Guarda este documento como preferencias.html, con codificación UTF-8, y ábrelo en un navegador. Es una demostración local: el botón de envío está deshabilitado porque no hay un servicio de suscripción. No guarda datos ni necesita recursos externos.

<!doctype html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Preferencias del boletín</title>
</head>
<body>
  <h1>Preferencias del boletín</h1>
  <form>
    <p>
      <label for="boletin-correo">Correo electrónico</label>
      <input id="boletin-correo" name="email" type="email"
        autocomplete="email" aria-describedby="boletin-ayuda">
    </p>
    <p id="boletin-ayuda">Para la prueba, utiliza ana@example.com.</p>

    <p>
      <label>
        <input name="boletin" type="checkbox" value="si"
          aria-describedby="boletin-frecuencia">
        Quiero recibir el boletín
      </label>
    </p>
    <p id="boletin-frecuencia">La preferencia es opcional.</p>
    <button type="submit" disabled>Envío desactivado en esta demo</button>
  </form>
</body>
</html>

La etiqueta del correo usa la asociación explícita; la de la casilla contiene su propio control. aria-describedby enlaza cada ayuda por su id y aporta una descripción, sin sustituir el nombre. La ayuda también está visible para quien no utiliza un lector de pantalla. Consulta cómo asociar instrucciones con aria-describedby.

Prueba el resultado en este orden:

  1. Pulsa «Correo electrónico»: el campo recibe el foco. Escribe la dirección de prueba y comprueba que la etiqueta permanece visible.
  2. Pulsa las palabras «Quiero recibir el boletín»: en los navegadores habituales, la casilla cambia de estado. Vuelve a pulsarlas para desmarcarla.
  3. Recarga y utiliza Tab: llegarás al correo y después a la casilla. Espacio cambia su estado; Shift + Tab permite volver. Las etiquetas no necesitan su propia parada de foco.
  4. En el panel de accesibilidad del navegador, verifica los nombres «Correo electrónico» y «Quiero recibir el boletín», y sus descripciones. Con lector de pantalla, comprueba además que identificas el control, su estado y la ayuda; el anuncio exacto varía según la herramienta. Repite la interacción con JavaScript desactivado: el ejemplo funciona igual.

Si cambias el texto de la etiqueta, cambias el nombre que aporta. Si retiras el for del correo, el texto sigue visible, pero pierde su asociación porque no contiene el campo. Si quitas la etiqueta, el control continúa funcionando y la ayuda continúa asociada, pero pierde ese nombre y la zona de activación del texto. Retirar solo aria-describedby conserva el nombre y la ayuda visible, aunque elimina su vínculo como descripción.

Atributos y nombres accesibles

for es el atributo específico de <label>. Los atributos globales, como id, class y lang, sirven para identificar, aplicar estilos o indicar idioma. CSS como font-weight cambia la apariencia; no crea una asociación.

form no es un atributo HTML vigente de <label>. En JavaScript, .htmlFor refleja for, .control devuelve el control asociado y .form consulta el formulario de ese control; son propiedades DOM. Consulta la interfaz HTMLLabelElement.

aria-label es otra forma de proporcionar nombre al control, pero no genera texto visible ni una zona de clic como <label>. Con una etiqueta visible válida suele ser innecesario; añadirlo puede reemplazar su texto en el nombre accesible y crear discrepancias. Prioriza la etiqueta visible y usa aria-describedby para la ayuda adicional, como explica la referencia de aria-label.

Errores frecuentes y etiquetas relacionadas

Si al pulsar la etiqueta no ocurre lo esperado, comprueba la coincidencia for/id, la unicidad del ID, que el destino sea etiquetable y que el control no esté deshabilitado. Para una asociación implícita, comprueba que el control sigue dentro de la etiqueta y que no añadiste un for erróneo.

No anides etiquetas ni metas dos controles en una. Coloca enlaces secundarios y botones ajenos fuera de <label>: tienen su propia interacción. No uses title como única explicación del campo; un tooltip no es una etiqueta persistente. Un botón normal obtiene su nombre del texto que contiene y no suele necesitar una etiqueta adicional.

Usa <input> para campos de una línea y casillas, <textarea> para texto multilínea y <select> para elegir una opción. <label> los identifica; no decide su tipo ni su validación. <legend> identifica el grupo. Para procesar datos de un formulario, consulta la guía de <form>.

Compatibilidad y fuentes

Consultado el 5 de octubre de 2026: <label> y su asociación mediante for tienen soporte amplio en los navegadores actuales, según la compatibilidad de label en MDN. La asociación implícita es válida; MDN recomienda la explícita para facilitar la compatibilidad con herramientas y tecnologías de asistencia. No se garantiza un anuncio ni una activación idénticos en todas las plataformas: prueba los controles con teclado y con las herramientas de tu público.