Estructura semántica de la página

La mayoría de las páginas comparten la misma forma general: un encabezado, un menú, el contenido principal y un pie de página. HTML tiene un elemento para cada uno, y los lectores de pantalla permiten saltar directamente a ellos.

De la sopa de div a las regiones

Durante años las páginas se armaron con elementos <div> con nombres de clase como header o menu. Un <div> es una caja genérica sin ningún significado, así que el nombre de clase era la única pista, y solo podían verla quienes leían el código. Hoy HTML tiene elementos que dicen qué es cada región. Los navegadores, los buscadores y las tecnologías de asistencia los entienden, y quienes usan lectores de pantalla pueden abrir una lista de estas regiones, llamadas regiones (landmarks), y saltar a la que quieran, igual que quienes ven echan un vistazo al diseño.

Las regiones principales

• <header>: contenido introductorio, normalmente el nombre o el logotipo del sitio y a menudo el menú principal. Un artículo también puede tener su propio header.
• <nav>: un bloque de enlaces de navegación principales, como el menú del sitio o un índice. No todo grupo de enlaces necesita uno.
• <main>: el contenido propio de esta página. Usa exactamente un <main> visible por página, y no lo pongas dentro de header, nav, aside ni footer.
• <article>: una pieza independiente que tendría sentido por sí sola, como una entrada de blog, una noticia o la tarjeta de un producto.
• <section>: una parte temática de una página o un artículo, normalmente con su propio título.
• <aside>: contenido relacionado con el contenido principal pero separado de él, como una barra lateral, un recuadro de glosario o enlaces relacionados.
• <footer>: información de cierre, como el autor, los derechos de autor y los enlaces de contacto.

Estos elementos describen el significado, no la posición. Un <nav> no tiene por qué estar arriba, y un <aside> no tiene por qué estar a la derecha; en un teléfono el aside suele terminar debajo del contenido principal. Las posiciones vienen de CSS. Elige el elemento preguntándote qué es el contenido, igual que elegiste los niveles de título por la estructura y no por el tamaño.

¿article o section?

La pregunta clave es si la pieza tendría sentido por sí sola en otro lugar, por ejemplo en un lector de noticias o compartida como enlace. Si la respuesta es sí, es un <article>. Si solo tiene sentido como parte de algo más grande, como la parte Ingredientes de una receta, es un <section>. Los dos deberían empezar normalmente con un título. Los artículos pueden contener secciones, y una sección puede contener artículos, como una sección de Últimas entradas con varias tarjetas de entradas.

div y span todavía tienen su lugar

Cuando ningún elemento encaja, usa <div> para un bloque y <span> para unas pocas palabras dentro de una línea. Sirven como ganchos para CSS, por ejemplo un <div class="cards"> que acomoda tarjetas en una cuadrícula. La regla es recurrir primero a un elemento con significado y usar uno genérico solo cuando nada describe el contenido. Una página hecha solo de div funciona, pero le oculta su estructura a todo el que no mira el código.

Una prueba rápida: abre tu página con CSS desactivado, o lee el esquema de títulos y regiones que te muestra una extensión del navegador. Si la página todavía se lee en un orden razonable, con un encabezado, un menú, un contenido principal y un pie de página claros, la estructura está haciendo su trabajo.

Elementos nativos antes que ARIA

Puede que te encuentres con el atributo role, parte de un estándar del W3C llamado WAI-ARIA, escrito como <div role="navigation">. Le da a un elemento genérico un significado para las tecnologías de asistencia. La guía del W3C sobre el uso de ARIA empieza con una regla simple: si un elemento HTML nativo ya tiene el significado que necesitas, úsalo. <nav> es más corto, funciona en todas partes y no se puede olvidar en un lugar y recordar en otro. La misma idea vale para los botones: un <button> real recibe el foco con Tab y se presiona con Enter o Espacio sin esfuerzo, mientras que un <div> en el que se puede hacer clic necesita código extra para hacer lo mismo.