HTML5 en PDF: referencia y ejercicios

Elige elementos por la función del contenido

Un article puede contener una pieza con sentido propio, como una noticia o una entrada. Un section agrupa un tema dentro de un documento y normalmente necesita un encabezado que explique cuál es. nav identifica un conjunto de enlaces de navegación. div sirve como contenedor genérico cuando ninguna relación más específica describe el contenido. No hay premio por usar la mayor cantidad posible de etiquetas semánticas: la elección debe ayudar a entender el material.

<article>
  <h2>Notas del taller</h2>
  <p>Una explicación que puede leerse por sí sola.</p>
</article>

Toma un bloque de una página tuya y pregunta si podría leerse fuera de su contexto. Si la respuesta es no, tal vez sea una sección del documento o simplemente un contenedor de presentación. La prueba te obliga a justificar la etiqueta con el contenido, no con un efecto visual.

Formularios con controles identificables

Una etiqueta label asociada a un campo mediante for e id ayuda a entender qué dato se espera. El atributo type puede indicar al navegador si el valor es un correo, un número u otro tipo de entrada. El botón debe describir una acción real. Si no hay un destino que reciba el formulario, no prometas un envío: conviértelo en un ejercicio local y dilo claramente.

Prueba el formulario sin ratón. Recorre campos y botones con Tab, activa la etiqueta y comprueba que el foco llega al campo correspondiente. Si el resultado depende solo de un color o de un texto dentro del campo que desaparece al escribir, añade una etiqueta visible que permanezca. Esa prueba es más concreta que afirmar que un formulario es accesible sin haberlo usado.

Medios con una alternativa adecuada

Una imagen informativa necesita un alt que transmita su aporte en el contexto de la página. Para audio o video, ofrece controles y una alternativa textual cuando haya información hablada o visual que una persona necesite para completar la tarea. Un texto de respaldo dentro de video informa sobre falta de soporte, pero no sustituye por sí solo una transcripción de contenido importante.

Como ejercicio, crea un artículo con encabezado, dos secciones, un formulario de práctica y un medio. Desactiva CSS y recorre solo los encabezados. Después usa teclado para llegar al formulario y a los controles del medio. Si una idea esencial se pierde al no reproducir el archivo, escríbela también en un formato que se pueda consultar. El PDF funciona como lista breve de decisiones; tu comprobación en el navegador demuestra cómo se aplican.