Estructura del documento y el esquema
Una página no es un montón plano de elementos. Si la lees de arriba a abajo, debe tener coherencia: un título, luego las secciones bajo él, cada una con su propio encabezado, en un orden que tenga sentido para avanzar. Esa forma es el esquema de la página, y proviene de dos cosas que funcionan juntas. Los encabezados nombran cada parte, y las regiones de referencia del capítulo HTML semántico, <header>, <nav>, <main>, <aside> y <footer>, agrupan esas partes en áreas. Este capítulo trata sobre cómo ambas se combinan en una página completa.
Cómo los encabezados y las regiones de referencia forman un esquema
Una página web se lee de arriba a abajo, de la misma manera que lees una página en un libro. Quien la visita comienza en la parte superior y avanza hacia abajo, por lo que el orden en que colocas tu contenido es el orden en que los visitantes lo leen. Coloca las cosas en el orden en que alguien realmente querría encontrarlas.
Los encabezados son lo que le da forma a ese orden. Un encabezado es una etiqueta corta para la parte que lo sigue, escrita con etiquetas que van de <h1> hasta <h6>. El <h1> es el título de toda la página. Cada <h2> nombra una sección principal bajo él, y un <h3> nombra una parte más pequeña dentro de un <h2>. Apílalos y obtendrás el esquema de la página: una tabla de contenidos que refleja el orden de la página.
<h1>Masa madre para principiantes</h1>
<h2>Lo que necesitas</h2>
<h3>Ingredientes</h3>
<h3>Equipo</h3>
<h2>Preparar la masa madre</h2>Lee solo los encabezados y ya sabrás de qué trata la página y cómo está organizada, antes de leer un solo párrafo.
<h1> hasta <h6>, son el esqueleto: el <h1> es el título de la página, y todo se anida bajo él. Lee solo los encabezados y ya deberías saber cómo se distribuye la página. Un main, y el orden correcto de encabezados
Dos hábitos mantienen un esquema limpio. Primero, dale a la página un solo <h1>. Es el título de la página, y una página tiene un título, de la misma manera que un libro tiene un nombre en la portada. Todo lo demás es <h2> y menos.
Segundo, no saltes niveles. Después de un <h2>, el siguiente paso hacia abajo es <h3>, no <h5>. Saltar un nivel deja un hueco en el esquema, como una página de contenidos que enumera el capítulo 1 y luego el capítulo 4. Muévete un nivel a la vez, hacia abajo y hacia arriba:
<h1>Cenas entre semana</h1>
<h2>Pasta</h2>
<h3>Tomate y albahaca</h3>
<h3>Ajo y mantequilla</h3>
<h2>Ensaladas</h2>
<h3>Griega</h3>El contenido que esos encabezados tienen usualmente vive en una región <main>. <main> marca el contenido principal de la página, la parte que es única para esta página y no el encabezado compartido, la navegación o el pie de página. Hay un <main>, igual que hay un <h1>.
<h1> por página, porque una página tiene un título. Desciende los niveles de encabezado uno a la vez, <h2> luego <h3>, sin saltar a <h5>. Y el contenido principal de la página va en un <main>. Si un encabezado se ve del tamaño incorrecto, ese es un trabajo para CSS, no una razón para cambiar niveles. Agrupar y ordenar contenido
El contenido relacionado se lee mejor cuando está agrupado. Dos elementos existen para esto. Un <section> es un fragmento temático de una página que tiene su propio encabezado, como la parte de "Ingredientes" de una receta. Un <article> es una pieza que se sostiene por sí sola y seguiría teniendo sentido si la sacas, como una sola entrada de blog o una reseña de cliente.
<article>
<h2>Focaccia de levadura lenta</h2>
<p>Un pan que casi no necesita amasado.</p>
</article>El orden importa tanto como la agrupación. Porque la página se lee de arriba a abajo, coloca el contenido más importante cerca de la parte superior, y ordena el resto en el orden en que un lector querría hacerlo. Una receta enumera lo que necesitas antes de los pasos, porque ese es el orden en que lo seguirías.
<section> para una parte temática que tiene un encabezado, y <article> para una pieza que se sostiene por sí sola, como una sola entrada. Luego cuida el orden: la página se lee de arriba a abajo, así que las cosas importantes van cerca de la parte superior. Escríbelo en el orden en que alguien realmente querría leerlo. Errores estructurales comunes
Algunos errores estructurales aparecen una y otra vez, y cada uno tiene una solución clara.
- Usar una etiqueta de encabezado para hacer texto grande. Recurrir a
<h3>porque se renderiza al tamaño que deseas rompe el esquema. Elige el nivel por significado, y establece el tamaño en CSS. - Saltar niveles de encabezado. Saltar de
<h2>a<h4>deja un agujero en el esquema. Desciende un nivel a la vez. - Más de un
<h1>. Una página tiene un título. Etiquetas<h1>adicionales confunden la tabla de contenidos. - Sin encabezados en absoluto. Una larga serie de párrafos sin nada que la interrumpa es difícil de escanear. Agrega encabezados para que un lector pueda encontrar su camino.
Arregla estos y la página se lee claramente para todos, ya sea que estén escaneando con los ojos o escuchándola leer en voz alta. El capítulo Accesibilidad va más lejos en hacer que una página funcione para cada visitante.
<h1>, y no dejes una página larga sin encabezados en absoluto. Cada uno nubla el esquema. Elige niveles de encabezado por significado y deja que CSS maneje los tamaños.