Elementos de sección (header, nav, main)

Los elementos semánticos de sección representan las principales divisiones estructurales de una página web. A diferencia de las etiquetas genéricas que hemos visto anteriormente, estos elementos aportan significado semántico al contenido, ayudando tanto a los navegadores como a los motores de búsqueda a comprender mejor la estructura del documento.

El elemento header

El elemento <header> define la cabecera de una página o de una sección específica. Generalmente contiene información introductoria, elementos de navegación, logotipos o títulos principales.

<header>
  <h1>Mi Sitio Web</h1>
  <p>Bienvenido a nuestro portal de noticias</p>
</header>

Una característica importante es que puedes usar múltiples elementos header en una misma página. Por ejemplo, cada artículo puede tener su propio header:

<article>
  <header>
    <h2>Noticia del día</h2>
    <time>15 de enero de 2025</time>
    <p>Autor: María García</p>
  </header>
  <p>Contenido del artículo...</p>
</article>

El elemento header no debe contener otros elementos header, footer, ni otros elementos de sección principales como main.

El elemento nav

El elemento <nav> está específicamente diseñado para contener enlaces de navegación principales del sitio. No todos los grupos de enlaces necesitan estar dentro de nav, solo aquellos que constituyen la navegación principal del sitio o sección.

<nav>
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/productos">Productos</a></li>
    <li><a href="/servicios">Servicios</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>

También puedes usar nav para navegación secundaria como breadcrumbs o paginación:

<nav aria-label="Navegación secundaria">
  <ol>
    <li><a href="/">Inicio</a></li>
    <li><a href="/categoria">Categoría</a></li>
    <li>Artículo actual</li>
  </ol>
</nav>

Es recomendable usar el atributo aria-label cuando tengas múltiples elementos nav para distinguir su propósito.

El elemento main

El elemento <main> representa el contenido principal y único de la página. Solo debe haber un elemento main por documento, y debe contener el contenido central que es exclusivo de esa página específica.

<main>
  <h1>Guía de HTML semántico</h1>
  <p>En esta guía aprenderás los elementos fundamentales...</p>
  
  <section>
    <h2>Conceptos básicos</h2>
    <p>Los elementos semánticos proporcionan...</p>
  </section>
</main>

El contenido del elemento main debe ser único para cada página. No incluyas contenido que se repita en múltiples páginas como:

Navegación del sitio
Información de copyright
Logotipos del sitio
Formularios de búsqueda globales

Combinando elementos de sección

Estos elementos funcionan mejor cuando se combinan correctamente para crear una estructura lógica:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Mi Blog Personal</title>
</head>
<body>
  <header>
    <h1>Blog de Tecnología</h1>
    <p>Las últimas tendencias en desarrollo web</p>
  </header>
  
  <nav>
    <ul>
      <li><a href="/">Inicio</a></li>
      <li><a href="/tutoriales">Tutoriales</a></li>
      <li><a href="/recursos">Recursos</a></li>
    </ul>
  </nav>
  
  <main>
    <article>
      <header>
        <h2>Introducción a HTML semántico</h2>
        <time>10 de enero de 2025</time>
      </header>
      <p>El HTML semántico mejora la accesibilidad...</p>
    </article>
  </main>
</body>
</html>

Beneficios de la estructura semántica

Usar estos elementos correctamente proporciona múltiples ventajas:

Accesibilidad mejorada: Los lectores de pantalla pueden navegar más fácilmente por la estructura
SEO optimizado: Los motores de búsqueda comprenden mejor el contenido
Mantenimiento simplificado: El código es más legible y fácil de mantener
Navegación por teclado: Los usuarios pueden saltar entre secciones usando teclas de acceso rápido

La jerarquía lógica que crean estos elementos hace que el HTML sea más comprensible tanto para humanos como para máquinas, estableciendo una base sólida para el desarrollo web moderno.

Elementos de contenido (article, section, aside)

Los elementos de contenido semántico nos permiten organizar y estructurar la información principal de nuestras páginas web de manera más específica. Estos elementos proporcionan contexto adicional sobre el tipo de contenido que contienen, mejorando la comprensión tanto para usuarios como para tecnologías de asistencia.

El elemento article

El elemento <article> representa contenido independiente y completo que podría distribuirse o reutilizarse por sí solo. Un artículo debe tener sentido propio incluso si se extrae del contexto de la página.

<article>
  <h2>Los beneficios del HTML semántico</h2>
  <p>Publicado el <time>12 de enero de 2025</time></p>
  <p>El HTML semántico mejora significativamente la accesibilidad web...</p>
  <p>Los motores de búsqueda pueden interpretar mejor el contenido...</p>
</article>

Los casos más comunes para usar article incluyen:

Entradas de blog o noticias
Comentarios de usuarios
Reseñas de productos
Publicaciones en redes sociales
Artículos de revistas digitales

Un aspecto importante es que puedes anidar artículos cuando tiene sentido semántico:

<article>
  <h2>Guía de HTML para principiantes</h2>
  <p>Esta guía te enseñará los conceptos fundamentales...</p>
  
  <article>
    <h3>Comentario de usuario</h3>
    <p>Por: Juan Pérez - <time>13 de enero de 2025</time></p>
    <p>Excelente tutorial, muy claro y fácil de seguir.</p>
  </article>
  
  <article>
    <h3>Comentario de usuario</h3>
    <p>Por: Ana López - <time>14 de enero de 2025</time></p>
    <p>Me ha ayudado mucho a entender la estructura HTML.</p>
  </article>
</article>

El elemento section

El elemento <section> agrupa contenido temáticamente relacionado, generalmente con un encabezado propio. A diferencia de article, section no es independiente y cobra sentido dentro del contexto de la página.

<section>
  <h2>Características del producto</h2>
  <p>Nuestro producto incluye las siguientes funcionalidades:</p>
  <ul>
    <li>Diseño responsivo</li>
    <li>Optimización SEO</li>
    <li>Carga rápida</li>
  </ul>
</section>

Las secciones típicas donde usar section incluyen:

Capítulos de un documento largo
Categorías de contenido relacionado
Pestañas de información
Diferentes temas dentro de una página

Una página de producto podría estructurarse así:

<main>
  <h1>Smartphone Galaxy Pro</h1>
  
  <section>
    <h2>Especificaciones técnicas</h2>
    <p>Pantalla: 6.5 pulgadas OLED</p>
    <p>Procesador: Octa-core 3.2GHz</p>
    <p>Memoria: 8GB RAM, 256GB almacenamiento</p>
  </section>
  
  <section>
    <h2>Opiniones de clientes</h2>
    <p>Valoración promedio: 4.5/5 estrellas</p>
    <p>Basado en 1,247 reseñas verificadas</p>
  </section>
</main>

El elemento aside

El elemento <aside> contiene información complementaria o tangencial al contenido principal. Este contenido podría eliminarse sin afectar la comprensión del contenido principal.

<aside>
  <h3>Información adicional</h3>
  <p>HTML fue creado por Tim Berners-Lee en 1990 como parte del proyecto World Wide Web.</p>
</aside>

Los usos más frecuentes de aside incluyen:

Barras laterales con información relacionada
Cuadros de información adicional
Publicidad contextual
Definiciones de términos
Enlaces relacionados

Un ejemplo práctico en el contexto de un artículo:

<article>
  <h2>Cómo crear un jardín urbano</h2>
  <p>Los jardines urbanos se han convertido en una tendencia...</p>
  
  <aside>
    <h3>Consejo útil</h3>
    <p>Las plantas aromáticas como la albahaca y el romero son perfectas para principiantes porque requieren poco mantenimiento.</p>
  </aside>
  
  <p>Para comenzar tu jardín, necesitarás los siguientes materiales...</p>
</article>

Combinando elementos de contenido

La combinación inteligente de estos elementos crea una estructura de contenido rica y semánticamente correcta:

<main>
  <article>
    <header>
      <h1>Introducción al desarrollo web</h1>
      <p>Por María González - <time>15 de enero de 2025</time></p>
    </header>
    
    <section>
      <h2>¿Qué es el desarrollo web?</h2>
      <p>El desarrollo web abarca la creación y mantenimiento de sitios web...</p>
      
      <aside>
        <h3>Dato curioso</h3>
        <p>El primer sitio web de la historia sigue activo en: http://info.cern.ch/hypertext/WWW/TheProject.html</p>
      </aside>
    </section>
    
    <section>
      <h2>Tecnologías fundamentales</h2>
      <p>Las tres tecnologías básicas del desarrollo web frontend son:</p>
      <ul>
        <li>HTML para la estructura</li>
        <li>CSS para el diseño</li>
        <li>JavaScript para la interactividad</li>
      </ul>
    </section>
  </article>
</main>

Criterios de selección

Para elegir el elemento correcto, hazte estas preguntas:

¿Es contenido independiente que podría funcionar solo? → Usa <article>
¿Es una sección temática del contenido principal? → Usa <section>
¿Es información complementaria o secundaria? → Usa <aside>

Anidamiento de elementos

Los elementos de contenido pueden anidarse lógicamente siguiendo estas reglas:

article puede contener section y aside
section puede contener article y aside
aside generalmente no contiene article ni section principales

<article>
  <h2>Tutorial de CSS Grid</h2>
  
  <section>
    <h3>Conceptos básicos</h3>
    <p>CSS Grid permite crear layouts bidimensionales...</p>
  </section>
  
  <section>
    <h3>Ejemplos prácticos</h3>
    <p>Veamos cómo implementar una cuadrícula básica...</p>
    
    <aside>
      <p><strong>Nota:</strong> CSS Grid es compatible con todos los navegadores modernos desde 2017.</p>
    </aside>
  </section>
</article>

Esta estructura semántica no solo organiza mejor el contenido, sino que también facilita la navegación mediante tecnologías de asistencia y mejora el posicionamiento en motores de búsqueda al proporcionar contexto claro sobre la jerarquía y relación del contenido.

Elementos de pie de página (footer)

El elemento <footer> representa información final o de cierre para su sección contenedora. Este elemento semántico proporciona un área específica para incluir información de contacto, enlaces de navegación secundarios, derechos de autor y otros datos complementarios que típicamente aparecen al final de una página o sección.

Características del elemento footer

El footer puede aparecer en diferentes niveles de la estructura HTML. Al igual que header, puedes usar múltiples elementos footer en una misma página según el contexto:

<footer>
  <p>&copy; 2025 Mi Empresa. Todos los derechos reservados.</p>
  <p>Contacto: <a href="mailto:info@miempresa.com">info@miempresa.com</a></p>
</footer>

Una característica importante es que footer representa información sobre su elemento contenedor más cercano, ya sea la página completa, un artículo específico o una sección particular.

Footer a nivel de página

El footer principal de una página web suele contener información corporativa, enlaces legales y de navegación secundaria:

<footer>
  <div>
    <h3>Sobre nosotros</h3>
    <p>Somos una empresa dedicada al desarrollo web desde 2010.</p>
  </div>
  
  <div>
    <h3>Enlaces útiles</h3>
    <ul>
      <li><a href="/privacidad">Política de privacidad</a></li>
      <li><a href="/terminos">Términos de uso</a></li>
      <li><a href="/cookies">Política de cookies</a></li>
    </ul>
  </div>
  
  <div>
    <h3>Síguenos</h3>
    <p>
      <a href="https://twitter.com/miempresa">Twitter</a> |
      <a href="https://facebook.com/miempresa">Facebook</a> |
      <a href="https://linkedin.com/company/miempresa">LinkedIn</a>
    </p>
  </div>
  
  <p>&copy; 2025 Mi Empresa. Todos los derechos reservados.</p>
</footer>

Footer en elementos article

Los artículos individuales pueden tener su propio footer con información específica como autor, fecha de publicación o enlaces relacionados:

<article>
  <h2>Tendencias del diseño web en 2025</h2>
  <p>El diseño web continúa evolucionando hacia interfaces más intuitivas...</p>
  
  <footer>
    <p>Autor: <a href="/autor/carlos-mendez">Carlos Méndez</a></p>
    <p>Publicado el <time datetime="2025-01-15">15 de enero de 2025</time></p>
    <p>Categorías: <a href="/categoria/diseno">Diseño</a>, <a href="/categoria/tendencias">Tendencias</a></p>
  </footer>
</article>

Footer en elementos section

Las secciones también pueden incluir información de cierre específica para su contenido:

<section>
  <h2>Resultados del estudio</h2>
  <p>Después de analizar 500 sitios web, encontramos que...</p>
  <p>Los datos muestran una clara tendencia hacia...</p>
  
  <footer>
    <p>Fuente: Estudio realizado por el Instituto de Tecnología Web</p>
    <p>Metodología disponible en: <a href="/metodologia-estudio">enlace</a></p>
  </footer>
</section>

Contenido típico de footer

Los elementos comunes que suelen incluirse en footers son:

Información de derechos de autor y licencias
Datos de contacto y ubicación física
Enlaces de navegación secundarios o de pie
Políticas legales (privacidad, términos, cookies)
Información del autor en artículos específicos
Enlaces a redes sociales corporativas
Fechas de publicación o actualización

Footer con información de contacto completa

Un ejemplo más detallado de footer corporativo podría incluir:

<footer>
  <section>
    <h3>Información de contacto</h3>
    <address>
      <p>Empresa Desarrollo Web S.L.</p>
      <p>Calle Mayor, 123</p>
      <p>28001 Madrid, España</p>
      <p>Teléfono: <a href="tel:+34912345678">+34 91 234 56 78</a></p>
      <p>Email: <a href="mailto:contacto@desarrolloweb.com">contacto@desarrolloweb.com</a></p>
    </address>
  </section>
  
  <section>
    <h3>Horario de atención</h3>
    <p>Lunes a Viernes: 9:00 - 18:00</p>
    <p>Sábados: 10:00 - 14:00</p>
    <p>Domingos: Cerrado</p>
  </section>
  
  <div>
    <p>&copy; 2025 Empresa Desarrollo Web S.L. - CIF: B12345678</p>
    <p>Registro Mercantil de Madrid, Tomo 1234, Folio 567</p>
  </div>
</footer>

Uso del elemento address

Dentro de footer es común usar el elemento <address> para marcar específicamente información de contacto:

<footer>
  <address>
    <p>Escrito por: <a href="mailto:autor@ejemplo.com">María García</a></p>
    <p>Puedes visitarnos en:</p>
    <p>Avenida Tecnología, 456<br>
    08001 Barcelona, España</p>
  </address>
  
  <p>Última actualización: <time datetime="2025-01-15">15 de enero de 2025</time></p>
</footer>

El elemento address debe contener únicamente información de contacto, no otro tipo de direcciones como direcciones postales de envío o ubicaciones geográficas generales.

Estructura completa con footer

Veamos cómo integrar correctamente el footer en una estructura HTML completa:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Blog de Tecnología</title>
</head>
<body>
  <header>
    <h1>TechBlog</h1>
    <nav>
      <ul>
        <li><a href="/">Inicio</a></li>
        <li><a href="/tutoriales">Tutoriales</a></li>
        <li><a href="/noticias">Noticias</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <article>
      <h2>Guía completa de HTML semántico</h2>
      <p>En este artículo aprenderás a estructurar correctamente...</p>
      
      <footer>
        <p>Por: <a href="/autor/juan-perez">Juan Pérez</a></p>
        <p>Publicado: <time datetime="2025-01-10">10 de enero de 2025</time></p>
      </footer>
    </article>
  </main>
  
  <footer>
    <div>
      <h3>Acerca de TechBlog</h3>
      <p>Tu fuente de información sobre las últimas tecnologías web.</p>
    </div>
    
    <div>
      <h3>Legal</h3>
      <ul>
        <li><a href="/privacidad">Privacidad</a></li>
        <li><a href="/terminos">Términos</a></li>
        <li><a href="/cookies">Cookies</a></li>
      </ul>
    </div>
    
    <address>
      <p>Contacto: <a href="mailto:info@techblog.com">info@techblog.com</a></p>
    </address>
    
    <p>&copy; 2025 TechBlog. Todos los derechos reservados.</p>
  </footer>
</body>
</html>

Consideraciones de accesibilidad

Para mejorar la accesibilidad del footer, considera estas prácticas:

Usa encabezados apropiados (h2, h3) para organizar las secciones del footer
Agrupa enlaces relacionados en listas para facilitar la navegación
Incluye texto alternativo descriptivo para iconos de redes sociales
Mantén un orden lógico de tabulación para usuarios de teclado

Diferencias con otros elementos

Es importante entender que footer no es simplemente un contenedor genérico. A diferencia de un div común:

Footer proporciona significado semántico específico
Los lectores de pantalla pueden identificarlo como información de cierre
Los motores de búsqueda comprenden que contiene metainformación
Las herramientas de desarrollo pueden aprovechar esta estructura semántica

El elemento footer completa la estructura semántica de HTML, proporcionando un lugar apropiado para la información de cierre y estableciendo una jerarquía clara que mejora tanto la experiencia del usuario como la interpretación técnica del contenido.

Fuentes y referencias

Documentación oficial y recursos externos para profundizar en HTML

Documentación oficial de HTML

Alan Sastre

Ingeniero de Software y formador, CEO en CertiDevs

Ingeniero de software especializado en Full Stack y en Inteligencia Artificial. Como CEO de CertiDevs, HTML es una de sus áreas de expertise. Con más de 15 años programando, 6K seguidores en LinkedIn y experiencia como formador, Alan se dedica a crear contenido educativo de calidad para desarrolladores de todos los niveles.

Más tutoriales de HTML

Explora más contenido relacionado con HTML y continúa aprendiendo con nuestros tutoriales gratuitos.

Ver más tutoriales de HTML Explorar todas las tecnologías

Aprendizajes de esta lección

Comprender la función y uso correcto de los elementos semánticos de sección: header, nav y main.
Identificar cuándo y cómo utilizar los elementos de contenido: article, section y aside.
Aprender la estructura y propósito del elemento footer en diferentes contextos.
Reconocer la importancia de la semántica para la accesibilidad y optimización en motores de búsqueda.
Aplicar buenas prácticas para combinar y anidar estos elementos en una estructura HTML coherente.

Estructura semántica