HTML5 semántico: cómo estructurar una página web correctamente

Todo proyecto web empieza por el HTML. Antes de pensar en colores, animaciones o bases de datos, necesitas una estructura sólida que el navegador, los buscadores y los lectores de pantalla puedan entender. En el libro Programación Full-Stack dedicamos un capítulo entero a esta base, porque un HTML mal estructurado se paga después en CSS difícil de mantener y en JavaScript frágil.

Qué es el HTML semántico

El HTML semántico consiste en elegir cada etiqueta según el significado del contenido, no según cómo se ve. Un <div> no dice nada sobre lo que contiene; un <nav> le indica a cualquiera que ahí hay enlaces de navegación.

Esto tiene tres beneficios concretos:

• Accesibilidad: los lectores de pantalla permiten saltar directamente al main o a la navegación. Sin etiquetas semánticas, la página es una sola masa de texto.
• SEO: los buscadores interpretan mejor qué parte de la página es el contenido principal y cuál es accesoria.
• Mantenimiento: <article> se lee mucho mejor que <div class="contenedor-2"> cuando vuelves al código seis meses después.

El esqueleto de un documento HTML5

Todo documento empieza igual. Estas líneas no son decorativas: cada una cumple una función.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primera página</title>
    <meta name="description" content="Descripción breve para buscadores">
</head>
<body>
    <!-- aquí va el contenido visible -->
</body>
</html>

• <!DOCTYPE html> activa el modo estándar del navegador.
• lang="es" indica el idioma: ayuda a los lectores de pantalla a pronunciar bien y a los buscadores a clasificar la página.
• charset="UTF-8" evita que las tildes y la ñ se vean como símbolos raros.
• La etiqueta viewport es imprescindible para que el diseño responsivo funcione en móviles.

Las etiquetas semánticas que más vas a usar

¿section o article?

Es la duda más habitual. Pregúntate: ¿este bloque tendría sentido publicado solo, en otro sitio? Si la respuesta es sí (un post, un comentario, una tarjeta de producto), es un article. Si es una parte de algo mayor (“Características”, “Precios”), es una section.

Los títulos también son estructura

Los encabezados h1 a h6 forman el índice de tu página. Usa un solo h1 con el tema principal y no saltes niveles (de h2 a h4) solo porque el tamaño te guste más: el tamaño se cambia con CSS.

Ejemplo completo: la página de un blog

Así se ve una página de blog bien estructurada. Es el tipo de base que necesitas antes de convertirla en un blog dinámico con PHP y MySQL, como el primer proyecto del libro.

<body>
    <header>
        <a href="/">MiBlog</a>
        <nav aria-label="Principal">
            <ul>
                <li><a href="/">Inicio</a></li>
                <li><a href="/articulos">Artículos</a></li>
                <li><a href="/contacto">Contacto</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <header>
                <h1>Cómo aprendí a programar</h1>
                <p>Por Ana · <time datetime="2026-10-13">13 de octubre</time></p>
            </header>

            <section>
                <h2>Los primeros pasos</h2>
                <p>Todo empezó con un archivo index.html...</p>
            </section>

            <figure>
                <img src="setup.jpg" alt="Escritorio con un portátil y el editor abierto">
                <figcaption>Mi primer entorno de trabajo</figcaption>
            </figure>
        </article>

        <aside>
            <h2>Artículos relacionados</h2>
            <!-- lista de enlaces -->
        </aside>
    </main>

    <footer>
        <p>&copy; 2026 MiBlog</p>
    </footer>
</body>

Fíjate en tres detalles: el header puede aparecer también dentro de un article; la fecha usa <time datetime> para que sea legible por máquinas; y la imagen tiene un alt que describe lo que se ve, no “imagen1”.

Errores comunes

• “Divitis”: envolver todo en div. Si existe una etiqueta con significado, úsala.
• Usar etiquetas por su estilo: poner un h3 porque “se ve más chico” o un <blockquote> solo para tener sangría.
• Botones que no son botones: un <div onclick> no se puede usar con teclado. Para acciones, <button>; para navegar, <a href>.
• Formularios sin label: cada campo necesita su etiqueta asociada con for e id.
• Olvidar el alt: si la imagen es decorativa, usa alt=""; si informa algo, descríbelo.

Sigue aprendiendo con el libro Programación Full-Stack

El capítulo 2 está dedicado a la estructura de una página web con HTML5, la base sobre la que después se construye el blog dinámico con PHP y MySQL.

Comprar en Amazon