Formularios, tablas y contenido multimedia en HTML

Un formulario recoge respuestas relacionadas y las envía a una URL. El elemento <form> rodea sus controles y su botón de envío. Mantén separados los formularios independientes: HTML no permite un formulario dentro de otro.

Elige el destino y el método

action indica la URL de destino. Sin él, la solicitud va a la página actual. method elige cómo envía el navegador los datos; el valor predeterminado es GET.

Los datos de GET pueden aparecer en el historial, los marcadores y los registros del servidor. POST los mantiene fuera de la cadena de consulta, pero no los cifra. Usa HTTPS para proteger los datos durante la transmisión. El programa del servidor recibe y procesa la solicitud; el formulario HTML no guarda ni envía por correo las respuestas por sí mismo.

Sigue una solicitud de búsqueda

<form action="/search" method="get">
  <label for="query">Search</label>
  <input id="query" type="search" name="q">
  <label for="language">Language</label>
  <select id="language" name="lang">
    <option value="en">English</option>
  </select>
  <button type="submit">Search</button>
</form>

Si el usuario introduce «html tables», el navegador solicita /search?q=html+tables&lang=en. Toma el nombre del campo q y su valor actual, codifica el espacio como + y une los dos pares con &. El ? inicia la cadena de consulta.

Un control necesita un name para aportar datos. Su id tiene otra finalidad: identificar el elemento en la página, incluso para conectar una etiqueta. Un campo con id="query" pero sin name puede parecer normal y funcionar con normalidad, aunque no aporte ninguna respuesta a la solicitud.

Identifica qué controles aportan datos

Un campo de texto vacío con nombre aporta un valor vacío, como comment=. Una casilla de verificación marcada aporta su value; sin valor, aporta on. Una casilla sin marcar no aporta nada. Un control desactivado no está disponible y se omite. Un campo readonly compatible no se puede editar, pero sigue aportando su valor.

Un campo oculto, como <input type="hidden" name="source" value="newsletter">, aporta un valor sin un control visible. No es secreto: los visitantes pueden inspeccionarlo y cambiarlo en las herramientas de desarrollo.

Indica explícitamente el comportamiento de los botones

Dentro de un formulario, un <button> normal envía el formulario por defecto. Escribe type="submit" para el botón de envío y type="button" para un botón que necesita un script. type="reset" restablece los valores iniciales y puede borrar el trabajo de un usuario. Pulsar Intro en un campo de una línea también suele enviar el formulario. <input type="submit" value="Send"> es otro control de envío; un <button> también puede contener contenido en línea, como un icono.

Envía el contenido de un archivo

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="attachment">Attachment</label>
  <input id="attachment" type="file" name="attachment">
  <button type="submit">Upload</button>
</form>

Para una carga normal de archivos se necesitan tanto POST como enctype="multipart/form-data". Con la codificación predeterminada del formulario, los nombres de los archivos se envían como texto, pero su contenido no.

Un <input> es un elemento vacío, por lo que no tiene contenido ni etiqueta de cierre. Su type selecciona el control y la ayuda del navegador que lo acompaña. Los tipos ausentes o no reconocidos recurren a un campo de texto.

Adapta el texto a su finalidad

Un campo de correo electrónico comprueba la sintaxis, no si existe un buzón. Incluso «ana@example» pasa la comprobación básica de sintaxis. Añade multiple para aceptar una lista de direcciones separadas por comas. Un campo de URL espera un esquema: «https://example.com» pasa, mientras que «example.com» no. Los formatos de teléfono varían, por lo que tel no impone ninguna regla de formato. Ocultar la contraseña impide que las personas cercanas lean la pantalla; HTTPS sigue proporcionando el cifrado durante la transmisión.

Distingue las cantidades de los códigos de dígitos

Usa number para una cantidad, como un recuento o una masa. A menudo tiene botones de incremento para aumentar o reducir el valor. Usa range para un ajuste aproximado, como el volumen; su intervalo predeterminado es 0–100 y su valor predeterminado es 50.

Un código de socio no es una cantidad. Usa <input type="text" inputmode="numeric"> para un código de dígitos, de modo que los ceros iniciales sigan siendo texto y los botones de incremento no lo cambien. inputmode solo sugiere un teclado en pantalla: no valida la entrada. decimal, tel, email y url son otras indicaciones útiles para el teclado.

Distingue el formato mostrado del enviado

Los selectores de fecha siguen la configuración regional del usuario. El 15 de marzo de 2026 puede aparecer como «03/15/2026» o «15/03/2026», pero la fecha enviada es 2026-03-15.

Estos controles no almacenan una zona horaria. Por tanto, cuando sea necesario, hay que explicar por separado la ubicación o zona de la hora local de una cita.

Ofrece opciones independientes o una sola elección

Las casillas de verificación son independientes: se pueden marcar varias. Los botones de opción forman un grupo de selección única cuando sus valores de name coinciden. Da a cada botón de opción un value distinto y usa checked para el valor predeterminado.

<label><input type="radio" name="size" value="S"> Small</label>
<label><input type="radio" name="size" value="M" checked> Medium</label>
<label><input type="radio" name="size" value="L"> Large</label>

La selección predeterminada envía size=M. Los nombres diferentes crearían grupos separados y permitirían varias selecciones.

Elige colores y archivos

color proporciona un selector y puede enviar un color RGB como #ff8800. file abre un selector de archivos; accept=".pdf,image/*" sugiere archivos PDF e imágenes, y multiple permite varios archivos. El filtro ayuda a los usuarios a elegir; el servidor aún debe comprobar el tipo y el contenido del archivo recibido. En los controles que lo usan, value establece el valor inicial, que sigue siendo el valor enviado si el usuario no hace cambios.

Un campo de entrada de una línea no sirve para todas las respuestas. Un texto más largo necesita espacio, mientras que un conjunto fijo de opciones necesita controles que muestren lo que se permite. Antes de elegir el elemento, decide si el usuario puede introducir algo fuera de las opciones.

Da espacio al texto largo con un área de texto

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

rows indica el número visible de líneas y cols el ancho aproximado en caracteres. Ninguno limita la cantidad de texto que se puede introducir; usa maxlength para limitar la longitud. El texto inicial va entre las etiquetas, no en un atributo value. Los espacios y saltos de línea en esa posición pasan a formar parte del valor inicial, así que las etiquetas de apertura y cierre juntas crean un cuadro realmente vacío.

Envía un valor desde una lista desplegable

<label for="delivery">Delivery</label>
<select id="delivery" name="delivery" required>
  <option value="">Choose delivery</option>
  <option value="standard">Standard (3–5 days)</option>
  <option value="express">Express (next day)</option>
</select>

Elegir «Express (next day)» envía delivery=express. El texto visible puede explicar una opción mientras su value permanece breve y estable. Si una opción no tiene value, se envía su texto. Añade selected para seleccionar una opción de antemano. Aquí, la primera opción tiene un valor vacío, por lo que la lista obligatoria de selección única no se puede enviar hasta que el usuario elija un método de entrega.

Agrupa opciones o permite elegir varias

Un <optgroup label="Hot drinks"> da un encabezado a opciones relacionadas. Ese encabezado no es una opción. Un select con multiple permite seleccionar varias opciones y size establece sus filas visibles. Cada valor seleccionado se convierte en un par independiente con el mismo nombre: topics=html&topics=css.

La selección múltiple en equipos de escritorio suele requerir un clic con Ctrl o Cmd. Para una lista corta de opciones independientes, las casillas de verificación suelen hacer más clara la selección. Para una lista corta de selección única, los botones de opción mantienen visibles todas las opciones. Un select es útil para una lista larga de opciones fijas.

Sugiere sin limitar

<label for="city">City</label>
<input id="city" name="city" list="cities">
<datalist id="cities">
  <option value="Nairobi">
  <option value="Osaka">
</datalist>

El list del campo coincide con el id del datalist. Los usuarios ven sugerencias, pero aún pueden escribir otra ciudad. Por tanto, un datalist es útil para respuestas frecuentes a una pregunta abierta. Sustituir un select por un datalist cambia las opciones aceptadas; no solo cambia el aspecto de la misma lista fija.

Muestra el progreso o una medida

<progress> y <meter> muestran valores en vez de recoger respuestas. Una barra de progreso indica cuánto se ha completado, como <progress value="70" max="100">70%</progress>. Un indicador de medida muestra una medida dentro de un intervalo conocido: <meter value="0.6">60%</meter> puede representar el almacenamiento utilizado. Un indicador de medida tiene por defecto un intervalo de 0–1, salvo que min y max lo cambien. El texto dentro de estos elementos proporciona contenido alternativo cuando no se puede dibujar la barra. Mantén una etiqueta explicativa junto a cualquiera de los dos indicadores para que los usuarios sepan qué mide el número.

Un campo necesita un nombre que permanezca visible mientras el usuario lo rellena. Un <label> conectado también da al control un nombre accesible para los lectores de pantalla y convierte su texto en un área de clic más grande. Las instrucciones explican cualquier regla que la etiqueta por sí sola no pueda transmitir.

Conecta la etiqueta al control

<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email">

El for de la etiqueta coincide con el id del campo, incluidas las mayúsculas y minúsculas. El name controla el envío y no tiene por qué ser igual. Cada id debe ser único en la página. Si for="email" apunta a un name, pero no hay un id coincidente, la etiqueta parece normal, pero no está conectada.

Otra opción es colocar el campo dentro de la etiqueta:

<label>
  <input type="checkbox" name="news">
  Send me the monthly newsletter
</label>

Esta conexión implícita es útil para una etiqueta breve de casilla de verificación. Un par explícito for e id también funciona cuando la etiqueta y el control están separados en el HTML.

Mantén las etiquetas separadas de los ejemplos

Un texto de marcador de posición como «name@example.com» desaparece cuando se empieza a escribir. También puede ser difícil de leer y no es un nombre accesible fiable. Mantén la etiqueta visible; usa un marcador de posición solo como ejemplo breve cuando resulte útil.

Marca los campos obligatorios con palabras, como «Nombre (obligatorio)», o explica un asterisco una vez encima del formulario. El color por sí solo no puede indicar a todo el mundo qué es obligatorio. Explica el formato antes de que los usuarios intenten enviar el formulario.

<label for="pw">Password (required)</label>
<input id="pw" name="password" type="password"
       required minlength="8" aria-describedby="pw-hint">
<p id="pw-hint">Use at least 8 characters.</p>

aria-describedby apunta al id del texto de ayuda. Añade la instrucción como descripción después del nombre del campo; no sustituye la etiqueta.

Da nombre a un grupo de controles

<fieldset>
  <legend>Delivery speed</legend>
  <label><input type="radio" name="speed" value="standard"> Standard</label>
  <label><input type="radio" name="speed" value="express"> Express</label>
  <label><input type="radio" name="speed" value="pickup"> Pickup</label>
</fieldset>

La leyenda proporciona la pregunta compartida; cada etiqueta da nombre a una respuesta. Un fieldset también puede agrupar campos de dirección relacionados. Pon primero la leyenda. disabled en un fieldset desactiva sus controles descendientes, excepto los controles dentro de su primera leyenda. Mantén los controles de formulario normales fuera de la leyenda para que esta excepción no cause sorpresas.

Ayuda a los navegadores a rellenar datos conocidos

autocomplete describe la finalidad de la información sobre el usuario. Entre sus valores están name, email, tel, street-address, postal-code, country-name, bday, new-password, current-password y one-time-code. Indicar correctamente estas finalidades facilita la entrada de datos guardados y cumple el criterio 1.3.5 de las WCAG 2.2, Identificar el propósito de la entrada (AA). autocomplete="off" es una petición; los navegadores aún pueden ofrecer contraseñas guardadas.

Para un campo de teléfono opcional, usa la etiqueta «Número de teléfono (opcional)» con type="tel", name="phone" y autocomplete="tel". Haz clic en su etiqueta para comprobar el foco y después recorre el formulario con Tab. Prueba así todas las etiquetas, incluidas las que están junto a casillas de verificación y botones de opción.

La validación integrada comprueba los controles de un formulario cuando el usuario lo envía. Un control que no supera la validación bloquea el envío; el navegador pone el foco en el primer campo no válido y proporciona un mensaje en su propio idioma. El navegador elige la redacción exacta. Cambiarla requiere JavaScript.

Exige una respuesta

required significa que un control necesita un valor. En un campo de texto, una cadena vacía falla. En una casilla de verificación, required significa que esa casilla concreta debe estar marcada, como al aceptar las condiciones. Para botones de opción con el mismo nombre, poner required en uno de ellos significa que debe seleccionarse un botón del grupo. Un select obligatorio de selección única con una primera opción vacía necesita una selección que no esté vacía.

<label for="username">Username (required)</label>
<input id="username" name="username"
       required minlength="4" maxlength="12">

El navegador combina estas reglas. El campo debe contener una respuesta y el texto introducido por el usuario debe ajustarse a los límites de longitud. Omitir type produce el campo de texto normal.

Cuenta los caracteres introducidos

minlength establece la longitud mínima permitida y maxlength la máxima. Los espacios y la puntuación cuentan. La longitud se mide en unidades de código UTF-16, por lo que algunos emojis cuentan como dos; cada letra latina ordinaria cuenta como una.

En este ejemplo, «Li» tiene dos caracteres y no alcanza el mínimo. «Lina» tiene cuatro y pasa. «mountainhiker» tiene 13 caracteres. Al escribir normalmente, el navegador se detiene después del duodécimo y deja «mountainhike». El ancho de un cuadro de texto no establece este límite.

Trata la presencia y la longitud como reglas distintas

Un campo opcional con minlength="4" puede estar vacío. La longitud mínima se comprueba cuando el usuario proporciona un valor. Añadir required hace que una entrada vacía también falle. Esto importa para un apodo opcional: el usuario puede omitirlo, pero, si lo proporciona, debe tener suficientes caracteres.

required es un atributo booleano. Su presencia lo activa, incluso con required="false". Para hacer que el campo sea opcional, elimina el atributo. La misma regla de presencia se aplica a muchos otros atributos HTML de activación.

Reconoce lo que estas comprobaciones no determinan

Una cadena de espacios sigue siendo contenido en un campo de texto. Por tanto, required la acepta y los espacios también cuentan para la longitud. Una regla que necesite un carácter visible requiere un patrón adecuado o una comprobación en el servidor. No digas a los usuarios que required por sí solo garantiza una respuesta con significado.

Las restricciones de longitud también dependen de cómo se introdujo el valor. Un valor inicial escrito en HTML, o uno asignado por un script, no se marca como inválido por minlength o maxlength solo por ser demasiado corto o demasiado largo. Un valor predeterminado correcto sigue siendo importante aunque la escritura normal esté limitada.

Para comprobar este campo, intenta enviarlo vacío y después introduce dos letras, cuatro letras y más de 12 letras. Cada prueba aísla una regla diferente. Cuando el navegador deja de aceptar caracteres en el límite, lee el valor que realmente quedó en el campo en vez de suponer que se aceptó toda la entrada que intentaste escribir.

Un valor numérico o de fecha puede tener el formato correcto y aun así no ser adecuado. min y max establecen sus límites; step establece qué incrementos se permiten dentro de ellos. Un número debe superar ambas comprobaciones.

Establece el intervalo

<label for="weight">Parcel weight (kg)</label>
<input id="weight" name="weight" type="number"
       min="0.5" max="30" step="0.5">

Los extremos están incluidos. Los valores de 0,5 a 30 kg están dentro del intervalo, pero también deben coincidir con incrementos de medio kilogramo. Empezar en 0,5 da 0,5; 1; 1,5 y así sucesivamente hasta 30: 60 valores permitidos. Una entrada de 31 supera el máximo; 2,25 está dentro del intervalo, pero no cumple el incremento.

Encuentra el punto de partida antes de contar

Los incrementos se cuentan desde min cuando está presente. Si no, se cuentan desde un atributo HTML value válido y, después, desde la base predeterminada del tipo. Para number, esa base predeterminada es 0. El incremento predeterminado es 1.

Con min="1" step="2", los valores aceptados son 1, 3, 5, 7 y así sucesivamente. Cuatro falla aunque sea múltiplo de dos, porque la secuencia empieza en uno. Con min="0.5" y sin atributo de incremento, el incremento sigue siendo uno: 0,5; 1,5 y 2,5 pasan, mientras que 1 y 2 no.

Si ni min ni un atributo value proporcionan una base diferente, un campo numérico predeterminado acepta números enteros. Usa step="0.01" para incrementos de una centésima o step="any" para eliminar la comprobación del incremento. any no elimina el mínimo ni el máximo.

Usa las unidades adecuadas para fechas y horas

Un campo de fecha con min="2026-06-01" max="2026-08-31" acepta fechas en ese intervalo, incluidos sus extremos. Escribe los atributos en el formato de envío, aunque el selector muestre otro orden de fecha.

Para citas, type="time" min="09:00" max="17:00" step="900" usa 900 segundos, o 15 minutos, por incremento. La secuencia comienza a las 09:00 y termina a las 17:00. Hay 32 intervalos y 33 horas seleccionables, incluidos ambos extremos.

Distingue lo que se escribe del valor almacenado

Algunos navegadores adaptados a la configuración regional permiten introducir el decimal «2,5», pero envían 2.5. El texto que no es un número se bloquea o deja vacío el valor numérico, según el navegador. Un campo opcional vacío sigue estando permitido salvo que esté presente required.

Un control deslizante range permanece dentro del intervalo permitido y se ajusta a los incrementos, por lo que los usuarios no encuentran los mismos errores de intervalo e incremento que al escribir un número. Por otra parte, los campos email y url no vacíos se someten a comprobaciones de tipo incluso sin required: que una respuesta sea opcional no convierte en válido un valor proporcionado con formato incorrecto.

Un patrón es útil cuando una organización define un formato de texto exacto, como un código de producto. El navegador comprueba todo el valor no vacío frente al patrón. Explica el formato junto al campo para que los usuarios puedan cumplirlo antes de que aparezca un error.

Crea un patrón sencillo

<label for="code">Product code (required)</label>
<input id="code" name="code" required
       pattern="[A-Z]{3}-[0-9]{4}" aria-describedby="code-hint">
<p id="code-hint">Use 3 capital letters, a hyphen, and 4 digits (ABC-1234).</p>

[A-Z] corresponde a una letra latina mayúscula y {3} la repite exactamente tres veces. El guion fuera de los grupos de caracteres es literal. [0-9]{4} exige cuatro dígitos. «ABC-1234» pasa. «abc-1234», «ABC1234» y «ABC-12345» incumplen cada uno una parte diferente de la regla.

Los patrones se comparan con el valor completo, por lo que el texto adicional en cualquiera de los extremos falla. No añadas las barras que rodean las expresiones regulares en JavaScript. pattern se aplica a campos de texto como text, search, tel, email, url y password, no a un área de texto. Los valores vacíos omiten la comprobación del patrón; required se ocupa de una respuesta vacía.

Escribe con cuidado la puntuación literal

Los caracteres como ., + y ? tienen significados especiales. Escápalos cuando deban aparecer literalmente: \. corresponde a un punto. Dentro de un grupo de caracteres, los patrones HTML modernos también requieren escapar signos de puntuación como un guion literal: [a-z0-9\-]. Este guion es diferente del que define el intervalo a-z.

Un patrón no válido se ignora. Las demás reglas, incluidas required y las comprobaciones de tipo, siguen ejecutándose. Prueba un patrón con entradas que deban pasar y que deban fallar; que un formulario envíe un valor esperado todavía no demuestra que el patrón rechace algo.

Explica la regla y el error

Mantén un texto de ayuda visible junto al control. Un title puede contribuir a algunos mensajes del navegador; mantén la instrucción sobre el formato visible junto al campo. Evita patrones rígidos para nombres, teléfonos o códigos postales salvo que el formato aceptado sea realmente fijo; las respuestas internacionales válidas pueden variar mucho.

CSS ofrece :valid y :invalid para el estado de validación actual de un campo. :user-invalid retrasa el estado no válido hasta que el usuario interactúa, evitando que un formulario sin tocar aparezca cubierto de estilos de error. Acompaña los colores con palabras o un icono para que la distinción siga siendo visible sin percibir el color.

Decide cuándo se ejecutan las comprobaciones

novalidate en el formulario omite la validación del navegador durante el envío. formnovalidate en un botón de envío la omite para ese botón, lo que permite ofrecer «Guardar borrador» junto a un botón normal «Enviar». Las comprobaciones del navegador también se pueden eliminar mediante las herramientas de desarrollo o eludir con una solicitud directa. El servidor debe volver a comprobar los datos recibidos antes de confiar en ellos.

Usa una tabla cuando un valor dependa tanto de su fila como de su columna: un registro de entrenamiento, un horario o una comparación de medidas. Usa CSS para la maquetación de la página. Una disposición hecha con celdas de tabla crea relaciones engañosas entre filas y columnas para los lectores de pantalla y se adapta mal a pantallas estrechas.

Construye la estructura a partir de los datos

<table> contiene la tabla, <tr> una fila, <th> una celda de encabezado y <td> una celda de datos. Las celdas se escriben de izquierda a derecha dentro de cada fila. Una celda de datos en negrita sigue siendo una celda de datos; usa <th> para expresar un encabezado.

<table>
  <caption>Running log, week 12</caption>
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Distance (km)</th>
      <th scope="col">Time (min)</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Monday</th><td>5.0</td><td>28</td></tr>
    <tr><th scope="row">Wednesday</th><td>7.5</td><td>45</td></tr>
    <tr><th scope="row">Saturday</th><td>10.0</td><td>62</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>22.5</td><td>135</td></tr>
  </tfoot>
</table>

El título es el primer elemento dentro de la tabla. Indica a los lectores qué describe toda la tabla antes de que lleguen a sus valores. Un encabezado cercano puede ayudar visualmente, pero el título queda asociado a la propia tabla.

Conecta cada valor con sus encabezados

scope="col" indica que un encabezado se aplica a lo largo de una columna. scope="row" indica que se aplica a lo largo de una fila. Por tanto, el valor 7,5 pertenece a la fila «Wednesday» y a la columna «Distance (km)». Un lector de pantalla puede anunciar ese significado completo en lugar de un número aislado.

Pon las unidades en los encabezados de columna para que se apliquen de forma coherente. Todas las distancias están en kilómetros y todos los tiempos en minutos. La distancia total se obtiene de 5,0; 7,5 y 10,0, que dan 22,5 km. Los tiempos 28, 45 y 62 dan 135 min.

Da una función a cada grupo

<thead> agrupa las filas de encabezado, <tbody> los datos principales y <tfoot> el resumen después del cuerpo. Estos grupos describen la estructura y ofrecen puntos de referencia para CSS. Los navegadores insertan un <tbody> alrededor de las filas normales escritas directamente dentro de una tabla, por lo que la estructura mostrada puede diferir del código fuente sin agrupar.

Comprueba el significado además del aspecto

Cada fila aquí ocupa tres columnas. Omitir una celda de datos no indica al navegador qué valor interior falta: las celdas posteriores pueden quedar bajo el encabezado equivocado. Escribe las celdas en sus posiciones correctas y usa «0» para un cero conocido o «n/a» cuando un valor no se aplique. Una celda vacía sin explicación deja a los lectores adivinando.

Las tablas no tienen bordes predeterminados. Para obtener líneas sencillas, aplica border: 1px solid a las celdas y border-collapse: collapse a la tabla. El antiguo atributo border está obsoleto. Un borde ayuda a mostrar la cuadrícula, pero no puede proporcionar las relaciones de encabezado que faltan ni corregir un valor mal colocado.

Las celdas combinadas permiten que una entrada ocupe varias posiciones de la cuadrícula. Cambian el número de celdas nuevas que necesita una fila, así que planifica las posiciones ocupadas antes de escribir las etiquetas.

Cuenta las posiciones de un horario con celdas combinadas

Considera tres columnas: «Hora», «Lunes» y «Martes». A las 09:00, el lunes tiene «Formularios» y el martes tiene «Tablas». A las 10:00, el lunes empieza «Validación», que continúa en la fila de las 11:00. El martes tiene «Multimedia» a las 10:00 y «Contenido insertado» a las 11:00. A las 12:00, «Pausa para comer» ocupa ambos días.

<tr>
  <th scope="row">10:00</th>
  <td rowspan="2">Validation</td><td>Media</td>
</tr>
<tr>
  <th scope="row">11:00</th><td>Embeds</td>
</tr>
<tr>
  <th scope="row">12:00</th><td colspan="2">Lunch break</td>
</tr>

A las 11:00, la posición del lunes ya está ocupada desde la fila anterior. Las únicas celdas nuevas son el encabezado de hora y la entrada del martes. Añadir otra celda para el lunes desplazaría el último valor a una cuarta columna. A las 12:00, el encabezado de hora ocupa una columna y la celda de la pausa ocupa dos, tres en total.

colspan se extiende horizontalmente por columnas; rowspan se extiende verticalmente por filas. Ambos tienen uno como valor predeterminado. Al comprobar una fila, cuenta las posiciones ocupadas por celdas nuevas y por extensiones de filas anteriores.

Describe grupos de columnas

<colgroup> y <col> describen columnas y aparecen después del título, pero antes de los grupos de filas. <col span="2"> representa dos columnas. Solo un conjunto limitado de estilos se aplica mediante estos elementos, incluidos fondos, ancho, visibilidad y bordes según las reglas de bordes de tabla correspondientes. No sustituyen a los encabezados.

Para «Distancia (km)» sobre dos columnas llamadas «Prevista» y «Real», define esas dos columnas como un grupo. Asigna al encabezado superior colspan="2" scope="colgroup" y a los encabezados inferiores scope="col". La extensión controla el ancho, mientras que el ámbito indica la relación de encabezado. Un ámbito de grupo de columnas necesita un grupo de columnas correspondiente en la estructura de la tabla.

Vincula los encabezados explícitamente cuando sea necesario

Para relaciones que scope no puede expresar con claridad, asigna ID únicos a los encabezados y enuméralos en el atributo headers de la celda de datos:

<table>
  <caption>Monday distance plan</caption>
  <colgroup></colgroup>
  <colgroup span="2"></colgroup>
  <thead>
    <tr>
      <th rowspan="2" scope="col">Day</th>
      <th id="distance" colspan="2" scope="colgroup">Distance (km)</th>
    </tr>
    <tr>
      <th id="planned" scope="col">Planned</th>
      <th id="actual" scope="col">Actual</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="mon" scope="row">Monday</th>
      <td headers="mon distance planned">8</td>
      <td headers="mon distance actual">7.5</td>
    </tr>
  </tbody>
</table>

El valor previsto de 8 apunta a «Monday», «Distance (km)» y «Planned». El valor real de 7,5 comparte los encabezados de fila y grupo, pero apunta a «Actual». Los nombres separados por espacios deben coincidir con los ID de los encabezados, no con su texto visible.

El abbr de un encabezado puede proporcionar un texto más corto para las repeticiones, como <th abbr="Distance">Distance covered in kilometers</th>. Algunos lectores de pantalla usan esa forma abreviada. Cuando muchas extensiones o tres niveles de encabezados hacen que una tabla sea difícil de seguir, divide los datos en tablas más sencillas con títulos propios. Evita anidar una tabla dentro de una celda de otra tabla.

<video> y <audio> enlazan archivos multimedia a una página. El navegador descarga esos archivos independientes; el vídeo o el sonido no se almacenan dentro del HTML. Añadir controls muestra los controles de reproducción, pausa, línea de tiempo y volumen del navegador.

<video src="intro.mp4" controls width="640" height="360"
       poster="intro-poster.jpg" preload="metadata"></video>
<audio src="episode-12.mp3" controls></audio>

Sin controles, un elemento de audio no tiene reproductor visible y un vídeo no tiene botón de reproducción visible. Una página necesitaría controles mediante scripts para ofrecer ese acceso. En una página básica, conserva los controles de reproducción nativos.

Reserva el espacio con la proporción correcta

width y height aceptan números simples en píxeles CSS. Reservan espacio mientras se carga un vídeo, lo que reduce el movimiento de la página. Un vídeo de 1920 × 1080 mostrado con un ancho de 640 tiene una altura correspondiente de 360: el ancho se ha dividido entre tres, por lo que la altura también debe dividirse entre tres. Una caja de reproductor con otra forma conserva las proporciones de la imagen y añade bandas vacías.

poster proporciona una imagen fija antes de la reproducción. Sin ella, el navegador espera a recibir datos multimedia antes de poder mostrar el primer fotograma. La imagen de portada es útil cuando se precarga poco vídeo o ninguno.

Decide cuánto precargar

Son indicaciones: el navegador puede ignorarlas. La reproducción automática también tiene prioridad sobre la precarga. none es útil para contenido multimedia largo que muchos visitantes no verán; los metadatos ayudan a mostrar la duración sin buscar intencionadamente el clip completo.

Comprende los atributos de reproducción

controls, autoplay, muted, loop y playsinline son atributos booleanos. Su presencia los activa: muted="false" sigue iniciando la reproducción silenciada. Elimina el atributo para desactivarlo.

La reproducción automática con sonido suele bloquearse hasta que el usuario interactúa, según los permisos y ajustes del navegador. Es más frecuente que se permita el vídeo silenciado; Safari en iPhone también necesita playsinline para este uso. Un clip silencioso en bucle puede usar autoplay muted loop playsinline. loop reinicia el clip cuando termina. No dependas de la reproducción automática para comunicar información esencial.

El sonido automático puede competir con un lector de pantalla y el movimiento puede distraer. El criterio 1.4.2 (A) de las WCAG 2.2 exige una forma de pausar o detener el audio automático de más de tres segundos, o controlar su volumen de forma independiente. El criterio 2.2.2 (A) trata el contenido en movimiento automático que dura más de cinco segundos junto a otro contenido, salvo que sea esencial. Mantén disponible un mecanismo de pausa; los controles nativos lo proporcionan para estos reproductores multimedia.

Calcula el coste en datos

Un clip de dos minutos a 5 megabits por segundo contiene 600 megabits. Dividir entre ocho da aproximadamente 75 megabytes antes de la sobrecarga adicional. Los clips más cortos y una indicación de precarga adecuada reducen las transferencias innecesarias. El reproductor iframe de una plataforma alojada puede trasladar la entrega fuera del servidor de tu sitio, pero los visitantes siguen descargando el contenido multimedia cuando lo ven.

Una extensión multimedia identifica su contenedor, la estructura de archivo que contiene la imagen y el sonido. Los códecs comprimen y decodifican los flujos de su interior. Un navegador debe admitir tanto el contenedor como sus códecs; una extensión .mp4 por sí sola no determina qué hay dentro.

Elige formatos adecuados

MP4 con vídeo H.264 y audio AAC es una opción de amplia compatibilidad en sistemas actuales habituales. WebM con vídeo VP9 o AV1 y audio Opus también tiene amplia compatibilidad y puede reducir el tamaño para una calidad determinada. Para audio, MP3 es una opción única ampliamente compatible. La compatibilidad sigue dependiendo del códec real y del sistema del usuario, así que prueba los archivos mismos.

Ofrece las fuentes por orden de prioridad

<video controls width="640" height="360" poster="tour.jpg">
  <source src="tour.webm" type="video/webm">
  <source src="tour.mp4" type="video/mp4">
  <p>Your browser cannot play this video.
    <a href="tour.mp4">Download the tour video (MP4)</a>.
  </p>
</video>
<p><a href="tour.mp4">Download the tour video (MP4)</a></p>

El navegador prueba las fuentes hijas en orden y usa la primera que puede reproducir. Aquí se prefiere WebM; MP4 ofrece otra opción si no se puede reproducir WebM. Omite src en el propio <video> cuando uses fuentes hijas. Un src en el elemento multimedia tiene prioridad y se ignora la lista de fuentes hijas.

El type es un tipo MIME que describe el archivo. Permite que el navegador omita un formato no compatible sin obtener primero datos multimedia. Un tipo incorrecto puede hacer que se omita un archivo reproducible, por lo que la declaración debe coincidir con el archivo real. Enumerar la misma codificación incompatible con otro nombre no crea una alternativa compatible.

Coloca la alternativa donde siga disponible

El contenido dentro de <video> es contenido alternativo para un navegador que no reconoce el elemento de vídeo. Un navegador moderno que lo reconoce, pero no puede reproducir ninguna fuente, no muestra ese párrafo interior como mensaje de error general. El enlace de descarga independiente fuera del reproductor sigue disponible en ese caso. Un enlace de respaldo y las fuentes alternativas resuelven fallos diferentes.

Aplica el mismo patrón al audio

<audio controls>
  <source src="episode-12.opus" type="audio/ogg; codecs=opus">
  <source src="episode-12.mp3" type="audio/mpeg">
  <p>Your browser cannot play this audio.</p>
</audio>
<p><a href="episode-12.mp3">Download episode 12 (MP3)</a></p>

Este primer archivo usa un contenedor Ogg con audio Opus. La alternativa MP3 usa audio/mpeg, el tipo MIME correcto para MP3. El navegador no puede deducir del párrafo alternativo que debe cambiar de archivo; los elementos source proporcionan esa opción. Al revisar la página, verifica las rutas, los formatos reales de los archivos y la reproducción, y después confirma por separado que funciona el enlace de descarga externo.

La información multimedia necesita otra vía cuando una persona no puede oírla o verla. Los subtítulos para personas sordas incluyen las palabras, los hablantes y los sonidos relevantes. Los subtítulos transcriben o traducen el diálogo para quienes oyen el audio, pero necesitan ayuda para entenderlo. Una transcripción proporciona las palabras y los sonidos importantes como texto cerca del reproductor o mediante un enlace cercano con un nombre claro. La audiodescripción narra información visual importante.

Adjunta una pista de subtítulos para personas sordas

<video controls>
  <source src="intro.mp4" type="video/mp4">
  <track kind="captions" src="intro.en.vtt"
         srclang="en" label="English" default>
</video>
<p><a href="intro-transcript.html">Read the introduction transcript</a></p>

Coloca <track> después de las fuentes. src apunta a un archivo de pista de texto, kind identifica su finalidad, srclang identifica el idioma y label proporciona el texto del menú del reproductor. Una pista de subtítulos debe tener srclang; inclúyelo también para los subtítulos para personas sordas. Solo una pista debe llevar default. Sin kind, el valor predeterminado es subtitles.

Escribe el archivo de subtítulos

WebVTT es texto UTF-8 guardado con la extensión .vtt. La primera línea es WEBVTT, seguida de una línea en blanco. Cada señal tiene después una línea de tiempos y su texto, con una línea en blanco antes de la siguiente señal. Un identificador opcional puede preceder a los tiempos de una señal.

WEBVTT

00:00:01.000 --> 00:00:04.500
MAYA: Welcome to the workshop.

00:00:05.000 --> 00:00:07.250
[door closes]

00:00:07.500 --> 00:00:11.000
MAYA: Let's build our first form.

La primera señal dura 3,5 segundos, la segunda 2,25 segundos y la tercera 3,5 segundos. La señal de sonido comunica algo que oye quien escucha, aunque nadie hable.

Mantén exacta la sintaxis de los tiempos

Los minutos y segundos usan dos dígitos; los milisegundos usan tres después de un punto. Las horas pueden omitirse: 01:05.000 significa un minuto y cinco segundos. El final debe ser posterior al inicio. Una línea en blanco termina una señal, así que mantén todo su texto junto, sin una línea en blanco en medio.

SRT usa marcas de tiempo con coma, como 00:00:01,000; una pista necesita WebVTT. La conversión requiere la cabecera WebVTT y marcas de tiempo con punto, además de comprobar que el resto de las señales tenga una sintaxis válida. Cambiar el nombre de una extensión .srt no convierte su contenido.

Comprueba la entrega y la accesibilidad

Mantén la pista en el mismo origen que la página: el mismo esquema, anfitrión y puerto. Una pista de otro origen necesita un ajuste crossorigin adecuado en el vídeo y permiso de ese servidor. De lo contrario, un archivo correcto puede no cargarse.

El criterio 1.2.2 (A) de las WCAG 2.2 exige subtítulos para personas sordas en vídeos pregrabados con audio, sujeto a su excepción para alternativas multimedia. El criterio 1.2.1 (A) exige una alternativa para contenido pregrabado solo de audio, como una transcripción para un pódcast. Revisa los subtítulos automáticos para comprobar nombres, términos técnicos, cambios de hablante y sonidos antes de publicar.

Otros tipos de pista son descriptions, chapters y metadata. Los reproductores de los navegadores no suelen mostrarlos como subtítulos normales. No pongas instrucciones visibles esenciales en una pista de metadatos esperando que aparezcan en pantalla.

Un <iframe> es un marco en línea: muestra una página web independiente dentro de la página actual. Ese documento tiene su propio HTML, CSS y scripts. Los estilos de tu página pueden dimensionar el marco, pero no aplican estilos al contenido de otro documento dentro de él.

Comienza con un marco claro y dimensionado

<iframe src="https://maps.example.com/venue"
        title="Map of the venue"
        width="600" height="400" loading="lazy"></iframe>
<p><a href="https://maps.example.com/venue">Open the venue map</a></p>

src indica la página que se debe cargar. El título indica a quien usa un lector de pantalla qué hay en el marco antes de entrar en él. «Mapa del lugar» describe su finalidad; «iframe» o «contenido» no lo hacen. El enlace directo ofrece otra vía si el navegador del visitante bloquea el marco.

width y height aceptan números simples en píxeles CSS. Sin ellos, el marco predeterminado mide 300 × 150 píxeles CSS. Los navegadores también dibujan un borde predeterminado. Aplícale estilos con CSS en lugar de usar el atributo obsoleto frameborder.

Adapta el código de inserción proporcionado

Los servicios de mapas y vídeo suelen ofrecer un fragmento de inserción en sus controles para compartir. Después de pegarlo, inspecciona la URL, mejora el título, comprueba las dimensiones y elimina los atributos de presentación obsoletos. Una URL de iframe es la dirección de una página o de un reproductor de servicio, no necesariamente de un archivo multimedia directo.

Usa HTTPS para la dirección insertada. Un marco HTTP dentro de una página HTTPS es contenido mixto activo y se bloquea. Escribir un título o cambiar el tamaño del marco no puede, por sí solo, hacer que se cargue una URL insegura.

Carga en el momento adecuado

loading="lazy" retrasa un marco hasta que está cerca del área de visualización, lo que ahorra trabajo inicial para un mapa situado mucho más abajo en la página. El valor predeterminado eager inicia la carga inmediatamente. Usa la carga inmediata para contenido insertado destacado en la parte superior, de modo que los visitantes no esperen su contenido principal. La carga diferida cambia el momento; no elimina el contacto de red cuando el marco finalmente se carga.

Para ajustar un reproductor a su contenedor, CSS puede establecer su ancho al 100 % y conservar su proporción:

iframe.video-player {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

Aplica class="video-player" al iframe correspondiente. Las dimensiones HTML siguen proporcionando información inicial, mientras que CSS controla el tamaño mostrado.

Reconoce el rechazo de un proveedor

Un sitio puede prohibir su inclusión en marcos mediante la cabecera de respuesta HTTP X-Frame-Options o una regla frame-ancestors de Content Security Policy. El navegador puede mostrar un marco vacío o un error. Estas restricciones ayudan a evitar el secuestro de clics, en el que una página enmarcada engañosa captura clics destinados a otra cosa.

El HTML de tu página no puede anular el rechazo del otro sitio. Usa la dirección de inserción permitida por el proveedor si ofrece una; de lo contrario, proporciona un enlace normal. Conserva también ese enlace para fallos futuros: si un proveedor elimina o mueve su contenido, un iframe sin cambios en tu página puede dejar de funcionar.

El contenido insertado de terceros contacta con su proveedor cuando se carga, incluso antes de que un visitante pulse reproducir. Esa solicitud revela información como una dirección IP y puede implicar cookies. Decide si la página necesita ese contacto de inmediato y qué acceso necesita el documento insertado.

Retrasa el contacto cuando sea adecuado

La carga diferida retrasa un marco fuera de pantalla hasta que está cerca de ella. Una vista previa que carga el contenido insertado solo después de un clic da a los visitantes una opción más directa. Algunos servicios también ofrecen modos con mayor privacidad. Un marco del mismo sitio no contacta necesariamente con un proveedor diferente; srcdoc en línea evita obtener una página independiente, aunque los recursos referenciados por ese HTML todavía pueden realizar solicitudes de red.

Restringe el comportamiento del documento con sandbox

<iframe src="https://quiz.example.com/start"
        title="Practice quiz"
        sandbox="allow-scripts allow-forms"></iframe>

Un sandbox vacío aplica todas sus restricciones, incluido el bloqueo de scripts, envíos de formularios y ventanas emergentes, y asigna un origen opaco. Los identificadores eliminan restricciones seleccionadas. Aquí el cuestionario puede ejecutar scripts y enviar formularios, pero no se concedió allow-popups. Añade solo los identificadores que necesita el contenido; de lo contrario, una lista de permisos copiada puede anular límites útiles.

allow-same-origin permite que el documento conserve su origen normal. No lo combines con allow-scripts para contenido insertado de tu propio origen: esa combinación puede permitir que el documento elimine su entorno aislado. Un entorno aislado tampoco significa que un marco no haga solicitudes de red.

Concede por separado acceso a funciones del navegador

allow es una política de permisos para funciones como pantalla completa, imagen dentro de imagen, cámara y micrófono. Un reproductor de vídeo puede solicitar allow="fullscreen; picture-in-picture". No necesita acceso a la cámara solo porque contenga vídeo. El atributo más antiguo allowfullscreen también concede acceso a pantalla completa.

Los identificadores de sandbox regulan el comportamiento del documento; los permisos de funciones responden a otra cuestión. Conceder pantalla completa no permite por sí mismo que una página en un entorno aislado envíe un formulario o ejecute un script.

Controla la referencia y el contenido en línea

referrerpolicy="no-referrer" omite de la solicitud la dirección de la página de referencia. Con la política predeterminada habitual, una solicitud HTTPS entre orígenes envía el origen en lugar de la ruta completa; las solicitudes a un protocolo menos seguro no envían referencia. Esto controla una cabecera, no toda la información que recibe un proveedor.

srcdoc proporciona directamente el HTML del marco y tiene prioridad sobre src:

<iframe title="Message preview" sandbox
        srcdoc="<p>Preview of your message</p>"></iframe>

El entorno aislado mantiene restringida esta pequeña vista previa. Las vistas previas de HTML más generales requieren cuidado con los recursos y el marcado que permiten.

Selecciona el elemento para el recurso

<object> puede contener contenido alternativo, como un enlace de descarga, si no se puede mostrar el recurso. El contenido antiguo basado en complementos, como Flash, ya no funciona en los navegadores actuales habituales; Adobe puso fin al soporte de Flash Player a finales de 2020. Mantén enlaces directos junto al contenido insertado importante y comprueba periódicamente que el proveedor sigue ofreciéndolo.