HTML5: semántica, formularios y multimedia

Estructura un artículo que se pueda recorrer

Escribe un header con el nombre de la publicación, una zona nav con enlaces útiles, un main para el contenido central y un footer con información secundaria. Dentro del contenido, usa article para una pieza con sentido propio y section cuando necesites dividirla en temas. Un div sigue siendo correcto para agrupar elementos solo por presentación. La semántica no significa reemplazar todos los contenedores genéricos sin pensar.

<main>
  <article>
    <h1>Cómo preparar un taller</h1>
    <section><h2>Materiales</h2><p>...</p></section>
  </article>
</main>

Lee solo los encabezados para comprobar si anuncian el recorrido. Si un h3 aparece antes de presentar su tema con un h2, revisa la organización antes de ajustar tamaños con CSS.

Diseña un formulario que diga la verdad

Agrega un campo de nombre y otro de correo, cada uno con una etiqueta asociada. El atributo for de la etiqueta debe coincidir con el id de su control. Elige un botón con texto que describa la acción. Si esta página es una práctica sin servicio de envío, indícalo junto al formulario; no uses “Enviar mensaje” si ningún mensaje puede llegar a un destinatario.

Recorre el formulario con teclado. Activa las etiquetas y observa qué campo recibe foco. Intenta enviar una dirección de correo con formato inválido para ver cómo responde el navegador. Esas pruebas te muestran diferencias entre la estructura del formulario y la lógica adicional que necesitarías para procesar datos en un servidor.

Incluye medios sin perder información

Una imagen puede explicar un paso o decorar una página. En el primer caso su alt debe transmitir la información pertinente; en el segundo puede ser vacío para no repetir ruido. Para video o audio añade controles y una alternativa textual cuando el contenido sea necesario para entender la lección. Un archivo multimedia que no carga no debería impedir encontrar las instrucciones principales.

Termina con una revisión en tres condiciones: sin CSS, con teclado y con el medio desactivado. Debes poder identificar el asunto del artículo, encontrar la navegación, comprender el formulario y recuperar las instrucciones esenciales. Si alguna condición revela una pérdida, corrige el HTML o añade una alternativa antes de mejorar la apariencia. Esa es la utilidad de la estructura: sostiene la tarea cuando la presentación o un recurso falla.