HTML no es solo colocar etiquetas. Su estructura ayuda a que las personas y las tecnologías de asistencia comprendan una página. Aquí aprenderás a organizarla con criterio.
1. Empieza por una estructura que tenga sentido
Usa un solo elemento main para el contenido principal; header y footer para las áreas repetidas del sitio; nav para los enlaces de navegación. Un article es adecuado para una unidad independiente, como una publicación.
No elijas una etiqueta por su apariencia visual. Usa CSS para cambiar los estilos y HTML para expresar el significado de cada parte.
2. Encabezados en orden
El h1 presenta el tema principal de la página. Los h2 dividen el contenido en grandes bloques y los h3 describen subsecciones de esos bloques. Evita saltar niveles solamente para obtener un tamaño determinado.
En una página de tutoriales, el nombre de la guía puede ser el h1 y cada paso principal un h2.
3. Un ejemplo de estructura
El siguiente fragmento incluye navegación, contenido principal y un artículo. No es necesario usar div para todo.
<header><nav aria-label="Principal">...</nav></header>
<main>
<article>
<h1>Mi primera guía</h1>
<section>
<h2>Introducción</h2>
<p>Contenido...</p>
</section>
</article>
</main>
<footer>...</footer>4. Accesibilidad desde el inicio
Escribe textos descriptivos en enlaces: “Ver calculadora IP” es más informativo que “Clic aquí”. Añade etiquetas label a los campos de formulario y describe las imágenes que aporten contenido con alt.
Antes de publicar, prueba la navegación con Tab y comprueba que puedas identificar siempre dónde está el foco del teclado.
5. Práctica rápida
Crea una página con un encabezado, un menú, un artículo y un pie de página. Después recórrela usando solo el teclado. Verifica que los encabezados cuenten una historia lógica sin necesidad de leer cada párrafo.