HTML semántico: header, nav, main, section, article, aside y footer

Hasta ahora vimos la estructura básica de un documento HTML, las etiquetas esenciales y cómo crear formularios. El siguiente paso es aprender a organizar una página de forma más clara utilizando HTML semántico.

¿Qué significa HTML semántico?

La semántica consiste en utilizar elementos cuyo nombre expresa el significado o la función del contenido que contienen.

Por ejemplo, estas dos estructuras pueden verse de forma similar en un navegador:

<div>
    <div>Club Programador</div>
    <div>Inicio | Cursos | Contacto</div>
    <div>Contenido principal</div>
    <div>Pie de pagina</div>
</div>

y:

<header>
    <h1>Club Programador</h1>
</header>

<nav>
    Inicio | Cursos | Contacto
</nav>

<main>
    Contenido principal
</main>

<footer>
    Pie de pagina
</footer>

La segunda versión comunica mucho mejor qué representa cada parte del documento.

¿Por qué usar HTML semántico?

Utilizar elementos semánticos ayuda a:

• organizar mejor el código;
• hacer que el documento sea más fácil de leer y mantener;
• mejorar la accesibilidad;
• dar contexto a navegadores y tecnologías de asistencia;
• facilitar la interpretación de la estructura por parte de motores de búsqueda;
• reducir el uso innecesario de elementos genéricos.

header

header representa contenido introductorio o de encabezado.

<header>
    <h1>Club Programador</h1>
    <p>Aprender programacion paso a paso</p>
</header>

No necesariamente existe un único header en toda la página. Un artículo o una sección también pueden tener su propio encabezado.

<article>
    <header>
        <h2>Introduccion a HTML</h2>
        <p>Publicado el 24 de septiembre</p>
    </header>

    <p>Contenido del articulo...</p>
</article>

nav

nav representa una sección de navegación importante.

<nav>
    <a href="index.html">Inicio</a>
    <a href="cursos.html">Cursos</a>
    <a href="contacto.html">Contacto</a>
</nav>

No es necesario colocar dentro de nav absolutamente todos los enlaces de la página. Se utiliza principalmente para grupos de enlaces de navegación relevantes.

main

main identifica el contenido principal del documento.

<main>
    <h1>Curso de HTML</h1>
    <p>Contenido principal de la pagina.</p>
</main>

El contenido que se repite en muchas páginas, como una navegación global o un pie de página, normalmente queda fuera de main.

section

section agrupa contenido relacionado que forma una sección temática del documento.

<section>
    <h2>Cursos disponibles</h2>

    <p>
        En esta seccion vas a encontrar
        distintos cursos de programacion.
    </p>
</section>

Una buena práctica es que una sección tenga normalmente un encabezado que explique de qué trata.

article

article representa contenido que tiene sentido por sí mismo y podría distribuirse o reutilizarse de manera independiente.

Ejemplos habituales:

• una publicación de blog;
• una noticia;
• una entrada de foro;
• una reseña;
• una ficha de contenido independiente.

<article>
    <h2>Introduccion a Python</h2>

    <p>
        Python es un lenguaje de programacion
        muy utilizado...
    </p>
</article>

section o article: ¿cuál usar?

Una forma simple de pensarlo es:

• section: agrupa una parte temática de una página;
• article: contiene una unidad de contenido con sentido independiente.

Por ejemplo, una página de noticias podría contener:

<main>

    <section>

        <h1>Ultimas noticias</h1>

        <article>
            <h2>Noticia 1</h2>
            <p>Contenido...</p>
        </article>

        <article>
            <h2>Noticia 2</h2>
            <p>Contenido...</p>
        </article>

    </section>

</main>

aside

aside representa contenido relacionado de forma secundaria con el contenido principal.

<aside>
    <h2>Articulos relacionados</h2>

    <ul>
        <li>Introduccion a HTML</li>
        <li>Formularios en HTML</li>
    </ul>
</aside>

Puede utilizarse, por ejemplo, para:

• enlaces relacionados;
• información complementaria;
• biografías de autor;
• bloques laterales;
• contenido secundario.

footer

footer representa el pie de una página o de una sección.

<footer>
    <p>© Club Programador</p>
    <a href="contacto.html">Contacto</a>
</footer>

También puede existir un footer dentro de un article.

<article>

    <h2>Guia de HTML</h2>

    <p>Contenido del articulo...</p>

    <footer>
        <p>Autor: Club Programador</p>
    </footer>

</article>

¿Y div?

div sigue siendo completamente válido.

Es un contenedor genérico que podemos utilizar cuando ningún elemento semántico describe adecuadamente el contenido.

<div class="tarjeta">
    <h2>Curso de Python</h2>
    <p>20 ejercicios resueltos.</p>
</div>

El problema no es utilizar div, sino utilizarlo para absolutamente todo cuando existen elementos con un significado más preciso.

Ejemplo poco semántico

<div class="cabecera">
    <div class="titulo">Mi sitio</div>
</div>

<div class="menu">
    ...
</div>

<div class="contenido">
    ...
</div>

<div class="pie">
    ...
</div>

La misma estructura con semántica

<header>
    <h1>Mi sitio</h1>
</header>

<nav>
    ...
</nav>

<main>
    ...
</main>

<footer>
    ...
</footer>

La estructura resulta más comprensible incluso antes de aplicar CSS.

Los elementos semánticos no determinan el diseño

Un punto importante es que header, main, aside o footer describen la función del contenido, pero no obligan a que tenga un diseño específico.

Por ejemplo, un aside no tiene que aparecer necesariamente a la derecha de la pantalla.

La posición, los colores, los tamaños y la distribución visual se definirán más adelante con CSS.

Semántica y accesibilidad

Los elementos semánticos ayudan a que las tecnologías de asistencia comprendan mejor la estructura de una página.

Por ejemplo, pueden distinguir con mayor claridad:

• dónde comienza la navegación;
• cuál es el contenido principal;
• qué partes son artículos;
• qué información es complementaria;
• dónde se encuentra el pie del documento.

La semántica no resuelve por sí sola todos los aspectos de accesibilidad, pero constituye una base importante.

Semántica y SEO

Una estructura clara también facilita que los motores de búsqueda interpreten el contenido y sus relaciones.

Esto no significa que utilizar una determinada etiqueta garantice mejores posiciones. El SEO depende de muchos factores, pero un documento bien estructurado facilita la comprensión del contenido.

Ejemplo completo: página de blog semántica

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>Mi blog de programacion</title>
</head>

<body>

    <header>

        <h1>Mi blog de programacion</h1>

        <p>
            Aprendiendo desarrollo web
            paso a paso
        </p>

    </header>

    <nav>

        <a href="index.html">Inicio</a>
        <a href="articulos.html">Articulos</a>
        <a href="contacto.html">Contacto</a>

    </nav>

    <main>

        <section>

            <h2>Ultimos articulos</h2>

            <article>

                <header>
                    <h3>Introduccion a HTML</h3>
                    <p>Publicado el 24 de septiembre</p>
                </header>

                <p>
                    En esta guia aprendemos
                    los fundamentos de HTML.
                </p>

                <a href="html.html">
                    Leer articulo
                </a>

                <footer>
                    <p>Categoria: HTML</p>
                </footer>

            </article>

            <article>

                <header>
                    <h3>Introduccion a Python</h3>
                </header>

                <p>
                    Primeros pasos con Python.
                </p>

                <a href="python.html">
                    Leer articulo
                </a>

            </article>

        </section>

        <aside>

            <h2>Contenido recomendado</h2>

            <ul>
                <li>
                    <a href="formularios.html">
                        Formularios HTML
                    </a>
                </li>

                <li>
                    <a href="python.html">
                        Aprender Python
                    </a>
                </li>
            </ul>

        </aside>

    </main>

    <footer>

        <p>
            © Club Programador
        </p>

    </footer>

</body>

</html>

Cómo pensar una estructura antes de escribir HTML

Antes de llenar una página de etiquetas, podemos preguntarnos:

• ¿cuál es el contenido principal?
• ¿existe una navegación principal?
• ¿hay secciones temáticas?
• ¿alguna parte tiene sentido como contenido independiente?
• ¿existe información secundaria?
• ¿qué contenido corresponde al encabezado y al pie?

Estas preguntas ayudan a elegir etiquetas por su significado y no simplemente por cómo queremos que se vea la página.

Errores comunes

• utilizar div para absolutamente todo;
• usar elementos semánticos solo por su apariencia visual;
• confundir section con article;
• pensar que aside significa obligatoriamente “columna derecha”;
• colocar todo dentro de main, incluso navegación y pie global;
• crear secciones sin una estructura de encabezados clara;
• creer que HTML semántico reemplaza a CSS;
• pensar que utilizar etiquetas semánticas agrega lógica de programación.

Qué aprendimos

En esta guía vimos cómo utilizar:

• header para encabezados;
• nav para navegación importante;
• main para el contenido principal;
• section para secciones temáticas;
• article para contenido independiente;
• aside para información complementaria;
• footer para pies de página o sección;
• div cuando necesitamos un contenedor genérico.

La idea central es simple: elegir los elementos por el significado del contenido, no solamente por cómo queremos que se vea.

Seguí aprendiendo HTML

La guía anterior de esta serie es:

Formularios en HTML: input, label, select, textarea y validaciones básicas

En la próxima publicación integramos todo lo aprendido en un proyecto final de HTML:

Proyecto final HTML: crear una página web completa desde cero →

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender desarrollo web, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal