HTML semántico

De <div id="header"> a <header>

Antes de HTML5, la estructura de una página se armaba con <div> y atributos id o class que le daban nombres como "header", "nav", "main", "footer". El navegador no entendía nada de esos nombres — eran solo cadenas de texto para el desarrollador.

Desde HTML5, existen elementos que comunican directamente ese significado al navegador, al lector de pantalla y al motor de búsqueda. En esta lección vas a ver los cuatro que forman el esqueleto de cualquier página.

<header>: la cabecera

<header> representa la cabecera de su sección más cercana. En el nivel de la página, es el bloque que contiene el logo, el nombre del sitio y la navegación principal.

<header>
  <img src="logo.svg" alt="MiSitio">
  <nav>
    <ul>
      <li><a href="inicio.html">Inicio</a></li>
      <li><a href="acerca.html">Acerca</a></li>
    </ul>
  </nav>
</header>
MiSitio

<header> no es único. Un <article> o una <section> pueden tener su propio <header> interno con el título del artículo, la fecha de publicación, etc.:

<article>
  <header>
    <h2>Cómo aprender HTML</h2>
    <p>Publicado el <time datetime="2026-06-01">1 de junio de 2026</time></p>
  </header>
  <p>HTML es el lenguaje de marcado...</p>
</article>

El <header> de nivel de página genera el landmark banner en accesibilidad — los lectores de pantalla lo reconocen como el encabezado principal del sitio. Cuando <header> está anidado dentro de <article>, <aside>, <main>, <nav> o <section>, su rol pasa a ser genérico.

<div id="header"> → LEGACY desde HTML5. El elemento semántico <header> lo reemplaza.

<nav> envuelve un bloque de navegación principal — los links que permiten recorrer el sitio o la página. Ya lo usaste en los módulos de links (CAT-05/06); acá lo vemos en su contexto de página completa.

<nav>
  <ul>
    <li><a href="inicio.html">Inicio</a></li>
    <li><a href="portafolio.html">Portafolio</a></li>
    <li><a href="contacto.html">Contacto</a></li>
  </ul>
</nav>

<nav> no es para cualquier grupo de links. Un párrafo con links a fuentes externas, un listado de referencias al pie del artículo, o links dentro del contenido no son <nav>. <nav> es para bloques de navegación del sitio o de la página: el menú principal, la paginación, el índice de una guía larga.

Puede haber más de un <nav>. Un sitio puede tener <nav> en el header (menú principal) y otro en el footer (links legales/mapa del sitio). Son dos bloques de navegación distintos y ambos son válidos.

<header>
  <nav><!-- menú principal --></nav>
</header>

<footer>
  <nav><!-- links legales / mapa del sitio --></nav>
</footer>

<nav> genera el landmark navigation — los lectores de pantalla permiten saltar directamente al bloque de navegación.

<div id="nav"> o <div class="menu"> → LEGACY.

<main>: el contenido principal

<main> envuelve el contenido principal de la página — lo que cambia de una página a otra, lo que el usuario vino a ver. El header, footer y nav son compartidos por muchas páginas del sitio; el <main> es el contenido específico de esta página.

<body>
  <header><!-- logo + nav --></header>

  <main>
    <h1>Guía de HTML semántico</h1>
    <p>El HTML semántico comunica el significado del contenido...</p>
  </main>

  <footer><!-- pie de página --></footer>
</body>

<main> es ÚNICO por página. Solo puede haber un <main> activo por documento. Esto contrasta con <header> y <footer>, que pueden aparecer varias veces. La unicidad es una regla de la especificación — y el ejercicio integrador de este módulo la valida directamente.

<main> va como hijo directo de <body>. No se anida dentro de <article>, <aside>, <footer>, <header> ni <nav>.

<main> genera el landmark main — los lectores de pantalla ofrecen “ir al contenido principal” como acción, permitiendo saltear el header y la nav.

<div id="main"> o <div id="contenido"> → LEGACY.

<footer> representa el pie de su sección más cercana. En el nivel de la página, contiene información de autoría, copyright, links legales y navegación secundaria.

<footer>
  <p>© 2026 MiSitio. Todos los derechos reservados.</p>
  <nav>
    <ul>
      <li><a href="privacidad.html">Privacidad</a></li>
      <li><a href="terminos.html">Términos</a></li>
    </ul>
  </nav>
</footer>

<footer> tampoco es único. Igual que <header>, puede existir dentro de <article> o <section> para marcar el pie de ese contenido específico:

<article>
  <header>
    <h2>El futuro de HTML</h2>
  </header>
  <p>HTML sigue evolucionando con el Living Standard...</p>
  <footer>
    <p>Autor: Ejemplo · <time datetime="2026-01-15">15 de enero de 2026</time></p>
  </footer>
</article>

El <footer> de nivel de página genera el landmark contentinfo en accesibilidad. Cuando está dentro de <article>, <aside>, <main>, <nav> o <section>, su rol es genérico.

<div id="footer"> → LEGACY.

La estructura completa

Estos cuatro elementos juntos forman el esqueleto estándar de una página:

<body>
  <header>
    <img src="logo.svg" alt="MiSitio">
    <nav>
      <ul>
        <li><a href="inicio.html">Inicio</a></li>
        <li><a href="acerca.html">Acerca</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>Bienvenido</h1>
    <p>Contenido principal de la página.</p>
  </main>

  <footer>
    <p>© 2026 MiSitio</p>
  </footer>
</body>
MiSitio Inicio · Acerca
Bienvenido

Contenido principal de la página.

© 2026 MiSitio

Sin CSS, cada elemento ocupa su fila en orden vertical — eso es correcto. En el módulo de CSS (Bloque II) vas a ver cómo posicionar estas partes visualmente. Por ahora, lo importante es que la estructura semántica ya está comunicando los roles correctamente.

En la siguiente lección vas a ver los elementos que van dentro del <main>: <section>, <article> y <aside>.

Sandbox libre — probá lo que aprendiste:

Preview

En la referencia