ODYBOT

Lección 3: Etiquetas estructurales de HTML

Estas etiquetas se utilizan para definir la estructura básica del contenido de una página web. No describen cómo se verá el contenido, sino cómo está organizado y qué tipo de contenido representa.

1. <header>

Define el encabezado de una sección o de toda la página. Suele incluir el logotipo, menú de navegación, título del sitio, etc.

2. <main>

Representa el contenido principal del documento. Solo debe haber una etiqueta <main> por página.

3. <section>

Sirve para agrupar contenido relacionado que forma una sección lógica dentro del documento.

4. <article>

Se usa para contenido independiente y autocontenible como entradas de blog, artículos de noticias o publicaciones.

5. <aside>

Contiene información complementaria como barras laterales, anuncios o enlaces relacionados.

6. <footer>

Define el pie de página de una sección o del documento completo. Puede incluir créditos, enlaces de contacto, etc.

Ejemplo completo

<body>
    <header>
        <h1>Mi sitio web</h1>
    </header>

    <main>
        <section>
            <h2>Sobre mí</h2>
            <p>Hola, soy estudiante de desarrollo web.</p>
        </section>

        <article>
            <h2>Último artículo</h2>
            <p>Hoy aprendí sobre las etiquetas estructurales en HTML.</p>
        </article>
    </main>

    <aside>
        <p>También puedes leer mis otros artículos.</p>
    </aside>

    <footer>
        <p>Hecho con ❤️ por mí.</p>
    </footer>
</body>