HTML semántico y accesibilidad: header, nav, main y article

Hasta ahora has elegido las etiquetas por cómo se ven. Con el HTML semántico aprenderás a elegirlas por lo que significan: la cabecera, el menú, el contenido principal, un artículo, el pie. La página se ve igual, pero la entienden mucho mejor los lectores de pantalla, los buscadores y quien mantenga el código. Es también el primer paso de la accesibilidad, que consiste en que tu página la pueda usar cualquiera.

Dos páginas que se ven igual

Con lo que ya sabes de CSS, podrías hacer cualquier página usando solo <div>, una caja genérica que no significa nada, y dándole a cada una la apariencia que quieras. Mira estas dos versiones de la misma página:

<div class="cabecera">
  <div class="logo">Taquería El Güero</div>
  <div class="menu"><a href="#">Menú</a> <a href="#">Sucursales</a></div>
</div>
<div class="contenido">
  <div class="titulo">Nuestros tacos</div>
  <div>Al pastor, suadero y campechanos.</div>
</div>
<div class="pie">Abierto de 7 p. m. a 2 a. m.</div>

.cabecera, header {
  display: flex;
  justify-content: space-between;
  background: #0f1f33;
  color: white;
  padding: 0.6rem 1rem;
}
.cabecera a, header a { color: white; margin-left: 0.8rem; }
.logo { font-weight: 700; margin: 0; }
.titulo, h1 { font-size: 1.5rem; font-weight: 700; margin: 1rem 0 0.4rem; }
.contenido, main { padding: 0 1rem; }
main p { margin: 0; }
.pie, footer { padding: 0.6rem 1rem; color: #5b6b7c; }

<header>
  <p class="logo">Taquería El Güero</p>
  <nav><a href="#">Menú</a> <a href="#">Sucursales</a></nav>
</header>
<main>
  <h1>Nuestros tacos</h1>
  <p>Al pastor, suadero y campechanos.</p>
</main>
<footer>Abierto de 7 p. m. a 2 a. m.</footer>

En la pantalla son idénticas: medidas en Chrome, Firefox y Safari, las dos ocupan exactamente lo mismo en cada navegador. La diferencia está en lo que no se ve. En la segunda, el navegador sabe que hay una cabecera, un menú de navegación y un contenido principal con un título de primer nivel; en la primera solo ve cajas. Eso lo aprovechan:

• Los lectores de pantalla, que usan las personas ciegas. Permiten saltar directamente al contenido principal, al menú o de título en título, sin escuchar la página entera.
• Los buscadores, que entienden mejor qué parte de la página es el contenido y cuál es el título.
• El modo de lectura de Safari y Firefox, y las extensiones que traducen o resumen páginas.
• Tú, dentro de seis meses: </nav></header> se entiende mucho mejor que </div></div>.

A esto se le llama HTML semántico: elegir cada etiqueta por lo que el contenido es, no por cómo se ve. La apariencia ya la pone CSS.

Las regiones de una página

• <header>La cabecera: el logotipo, el nombre del sitio y, a menudo, el menú. Un article también puede tener la suya, con su título y su fecha.
• <nav>Un bloque de enlaces de navegación principal: el menú, las migas de pan, el índice de un artículo largo. No hace falta para cualquier grupo de enlaces.
• <main>El contenido principal, lo que es propio de esta página. Solo puede haber uno visible.
• <article>Algo que se entiende por sí solo y se podría publicar en otro sitio: una noticia, una entrada de blog, un comentario, la ficha de un producto.
• <section>Una parte de un todo que tiene su propio título. Si no le pondrías un título, probablemente es un div.
• <aside>Contenido relacionado pero aparte: una barra lateral, un recuadro de «también te puede interesar».
• <footer>El pie: datos de contacto, derechos de autor, enlaces legales.

Y <div> no desaparece: sigue siendo la caja correcta cuando solo necesitas agrupar elementos para darles estilo y no hay una etiqueta que diga lo que son.

<header>
  <p><a href="/">Recetario</a></p>
  <nav>
    <a href="/sopas">Sopas</a> ·
    <a href="/guisados">Guisados</a> ·
    <a href="/postres">Postres</a>
  </nav>
</header>

<main>
  <article>
    <h1>Pozole rojo</h1>
    <p>Publicado el <time datetime="2026-09-15">15 de septiembre de 2026</time>.</p>

    <section>
      <h2>Ingredientes</h2>
      <ul>
        <li>1 kg de maíz pozolero</li>
        <li>Chile guajillo y ancho</li>
      </ul>
    </section>

    <section>
      <h2>Preparación</h2>
      <p>Cuece el maíz hasta que floree…</p>
    </section>
  </article>
</main>

<aside>
  <h2>También te puede gustar</h2>
  <p><a href="/tostadas">Tostadas de tinga</a></p>
</aside>

<footer>
  <p><small>© 2026 Recetario</small></p>
</footer>

El elemento <time> lleva la fecha escrita para personas y, en datetime, en el formato que entienden las máquinas (año-mes-día). Los buscadores y los calendarios lo aprovechan.

<main>
  <h1>Inicio</h1>
</main>
<main>
  <p>Más contenido</p>
</main>

Nu Html Checker (validador del W3C)línea 4: error: A document must not include more than one visible “main” element.

Los títulos, en orden

Los h1 a h6 forman el índice de la página (lo viste en la lección 2). Las reglas prácticas:

• Un solo h1 por página, con lo que la página es: el título del artículo, el nombre del producto.
• No te saltes niveles al bajar: después de un h2 va un h3, no un h4. Al subir sí puedes saltar (de un h4 a un h2 que abre otra sección).
• Nunca elijas el nivel por el tamaño. Si el diseño pide un h2 chiquito, se cambia con CSS.

Para revisarlo, el validador del W3C tiene la opción «outline», y las herramientas del navegador muestran el árbol de accesibilidad de la página.

Botón o enlace

Es la duda más frecuente y la regla es sencilla: si lleva a otra página o a otra parte de la página, es un enlace (<a href>); si hace algo aquí (enviar un formulario, abrir un menú, agregar al carrito), es un botón (<button>). No importa cómo se vean: con CSS un enlace puede parecer un botón y al revés.

<div class="boton" onclick="this.textContent = '¡Hola!'">Saludar con div</div>
<button class="boton" type="button" onclick="this.textContent = '¡Hola!'">Saludar con button</button>

.boton {
  display: inline-block;
  font: inherit;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 8px;
  background: #1e64af;
  color: white;
  cursor: pointer;
}

El type="button" del ejemplo importa: dentro de un formulario, un <button> sin tipo es de tipo submit y envía el formulario al pulsarlo. Lo verás en la lección 4.

Tablas, solo para datos

Hace veinte años las páginas se maquetaban con tablas. Hoy eso lo hace CSS (lo verás en la lección 7), y <table> se reserva para lo que es: datos en filas y columnas, como un horario o una comparación de precios. Una tabla accesible lleva un título (caption) y marca qué celdas son encabezados (th) y de qué (scope), para que un lector de pantalla pueda decir «Martes, Matemáticas» al llegar a una celda:

<table>
  <caption>Horario de 1.º B</caption>
  <thead>
    <tr>
      <th scope="col">Hora</th>
      <th scope="col">Lunes</th>
      <th scope="col">Martes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">8:00</th>
      <td>Español</td>
      <td>Matemáticas</td>
    </tr>
    <tr>
      <th scope="row">9:00</th>
      <td>Historia</td>
      <td>Inglés</td>
    </tr>
  </tbody>
</table>

table { border-collapse: collapse; font-family: system-ui, sans-serif; }
caption { font-weight: 700; margin-bottom: 0.4rem; }
th, td { border: 1px solid #c9d6e4; padding: 0.4rem 0.7rem; text-align: left; }
thead th { background: #eef3f9; }

Otros elementos que conviene conocer

• <figure>Una imagen, un diagrama o un fragmento de código con su pie (<figcaption>).
• <blockquote>Una cita larga de otra fuente; <q> para una cita corta dentro de un párrafo.
• <abbr>Una abreviatura con su significado: <abbr title="Instituto Mexicano del Seguro Social">IMSS</abbr>.
• <address>Los datos de contacto del autor o del sitio.
• <details>Un bloque que se abre y se cierra sin JavaScript, con su título en <summary>. Es el que esconde las soluciones de los retos de este curso.

<details>
  <summary>¿Hacen envíos a domicilio?</summary>
  <p>Sí, en toda la ciudad, de 1 a 9 p. m.</p>
</details>
<details>
  <summary>¿Aceptan tarjeta?</summary>
  <p>Débito y crédito, sin comisión.</p>
</details>

ARIA: solo cuando HTML no alcanza

ARIA es un conjunto de atributos (role, aria-label, aria-expanded…) que añaden información de accesibilidad que el HTML no da. La primera regla, que publica el propio W3C, es no usar ARIA si existe un elemento de HTML que ya hace eso: un <button> es mejor que un <div role="button">, porque el segundo sigue sin poder alcanzarse con el teclado. El caso en el que sí lo vas a necesitar pronto es el botón que solo tiene un icono: sin texto, un lector de pantalla diría solo «botón».

<button type="button" aria-label="Cerrar">
  <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
    <path d="M3 3l10 10M13 3L3 13" stroke="currentColor" stroke-width="2"/>
  </svg>
</button>

El aria-label le da el nombre «Cerrar», y aria-hidden="true" hace que el dibujo se ignore. El idioma también es accesibilidad: si una frase está en otro idioma, márcala con lang (<span lang="en">deadline</span>) para que el lector de pantalla la pronuncie bien.

Retos

<nav>
  <a href="/">Inicio</a>
  <a href="/noticias">Noticias</a>
  <a href="/contacto">Contacto</a>
</nav>
<main>
  <article>
    <h1>Abre la nueva línea del Metro</h1>
    <p>La línea conecta el centro con el aeropuerto.</p>
  </article>
</main>
<footer>
  <p><small>© 2026 Noticias del Valle</small></p>
</footer>

<h1>Mi tienda</h1>
<h2>Ofertas</h2>
<img src="oferta.jpg" alt="Pantalla de 55 pulgadas con 20 % de descuento" width="300" height="200">
<button type="button">Comprar</button>

Cada fragmento de HTML de esta lección pasó por el Nu Html Checker 26.11.4, el validador oficial del W3C, y cada resultado se pintó en Chromium, Firefox y WebKit (los motores de Chrome, Firefox y Safari); las cifras del texto se midieron en los tres. ¿Quieres probar algo? Usa el editor de HTML y CSS. Logotipos de HTML5 (W3C) y CSS3 (Rudloff) en la imagen de la página: Wikimedia Commons, CC BY 3.0.