¿Cómo estructuro una página compleja usando HTML semántico?

Estructura páginas HTML complejas con semántica: usa «header», «nav», «main», «footer», «article», «section» y encabezados lógicos.

Estructurar una página web compleja con HTML semántico implica utilizar las etiquetas de HTML5 de manera que describan con precisión el significado y la organización del contenido, en lugar de basarse solo en su apariencia visual. Esto mejora la accesibilidad, el SEO y la mantenibilidad del código.

1. Define los hitos principales de la página (Landmarks):

Toda página suele tener una estructura global común. Identifícala primero:

<header> (Cabecera global del sitio): Utiliza esta etiqueta para la parte superior de tu página. Normalmente contiene el logo del sitio, el nombre o título principal del sitio (a menudo un <h1>), la navegación principal (<nav>), y quizás un formulario de búsqueda.
<nav> (Navegación principal): Define el bloque principal de enlaces de navegación del sitio. Puede estar dentro del <header> global o ser un elemento separado.
<main> (Contenido principal): Esta etiqueta es crucial y debe envolver el contenido central y único de la página específica que estás construyendo. Todo lo que no sea repetitivo (cabeceras, pies, navegación común) debería ir aquí. Solo debe haber un elemento <main> visible por página.
<footer> (Pie de página global del sitio): Para la parte inferior de la página. Usualmente contiene información de copyright, enlaces a políticas de privacidad, términos de servicio, información de contacto o enlaces secundarios del sitio.

2. Estructura el contenido dentro de <main>:

Una vez definidos los hitos globales, enfócate en el contenido principal dentro de <main>:

<article>: Utiliza esta etiqueta para cada pieza de contenido que sea auto-contenida, completa e independientemente distribuible.
Piensa en posts de un blog, noticias, productos en una tienda, comentarios de usuarios, o un widget interactivo. Un <article> puede, a su vez, tener su propio <header> y <footer> internos.
<section>: Emplea <section> para agrupar contenido que está temáticamente relacionado, ya sea dentro de <main> directamente o dentro de un <article>.
Cada <section> debería, idealmente, tener un encabezado (<h2>) que identifique su tema.
Una <section> no es tan independiente como un <article>.
<aside>: Reserva esta etiqueta para contenido que está relacionado tangencialmente con el contenido principal que lo rodea.
Es información complementaria que podría considerarse separada. Ejemplos comunes son las barras laterales (sidebars) con enlaces relacionados, biografías cortas del autor, publicidad, o glosarios.

3. Utiliza una jerarquía de encabezados lógica (<h1> - <h6>):

Los encabezados son vitales para la estructura del documento y la accesibilidad.

Usa un solo <h1> por página, generalmente para el título más importante (ya sea el nombre del sitio en el <header> global o el título único de la página dentro de <main>).
Utiliza <h2> para las secciones principales, <h3> para subsecciones de los <h2>, y así sucesivamente, sin saltarte niveles. Esto crea un esquema del documento claro.

4. Aplica otras etiquetas semánticas donde corresponda:

No olvides usar otras etiquetas semánticas para refinar aún más tu estructura:

<figure> y <figcaption> para imágenes, diagramas o fragmentos de código que necesitan una leyenda.
<ul>, <ol>, <dl> para diferentes tipos de listas.
<blockquote> y <q> para citas.
<time> para representar fechas y horas.
<address> para información de contacto.

5. Piensa en el significado, no solo en la apariencia:

La pregunta clave al elegir una etiqueta debe ser: «¿Qué etiqueta describe mejor el propósito de este contenido?». La apariencia visual se controla con CSS.

Ejemplo conceptual de estructura:

<!DOCTYPE <strong>html</strong>>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Página Compleja Semántica</title>
</head>
<body>
    <header> <a href="/" id="logo">NombreDelSitio</a>
        <nav> <ul>
                <li><a href="/">Inicio</a></li>
                <li><a href="/blog">Blog</a></li>
                <li><a href="/contacto">Contacto</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h1>Título Principal de Esta Página Única</h1>

        <section id="novedades">
            <h2>Últimas Novedades</h2>
            <article>
                <header>
                    <h3>Gran Noticia de Hoy</h3>
                    <p>Publicado: <time datetime="2025-05-28">28 de mayo de 2025</time></p>
                </header>
                <p>Este es el resumen de la gran noticia...</p>
                <a href="/noticias/gran-noticia">Leer más</a>
                <footer>
                    <p>Categoría: Actualidad</p>
                </footer>
            </article>
            </section>

        <section id="sobre-nosotros">
            <h2>Sobre Nosotros</h2>
            <p>Información sobre la empresa o proyecto...</p>
            <figure>
                <img src="equipo.jpg" alt="Foto del equipo">
                <figcaption>Nuestro dedicado equipo.</figcaption>
            </figure>
        </section>

        <aside>
            <h3>Enlaces de Interés</h3>
            <ul>
                <li><a href="#">Recurso Externo 1</a></li>
                <li><a href="#">Otro Sitio Relacionado</a></li>
            </ul>
        </aside>
    </main>

    <footer> <address>
            Contacto: info@nombredelsitio.com
        </address>
        <p>&copy; 2025 NombreDelSitio. Todos los derechos reservados.</p>
    </footer>
</body>
</html>
Lenguaje del código: PHP (php)

Para páginas muy complejas, puede ser útil dibujar un esquema o «wireframe» de la estructura antes de escribir el código.

Recuerda usar <div> y <span> con moderación, principalmente para fines de agrupación estilística o para «hooks» de JavaScript cuando ninguna etiqueta semántica más específica sea apropiada.

¿Tienes alguna duda o pregunta?Envía el formulario y procuraré darle respuesta

Si creees que esto puede ser de utilidad a alguien más, pues... compártelo que es gratis 🙂

Más contenido interesante