Semántica | Code Cats Studio

Actividad Práctica: Semántica HTML

Descripción de la actividad

Crear un documento HTML que utilice correctamente las etiquetas semánticas para estructurar la página:

<header> con el título y la navegación principal.
<main> conteniendo varias <section> y <article> para organizar el contenido principal.
<aside> para información complementaria, anuncios o enlaces relacionados.
<footer> para información de contacto, derechos de autor y enlaces finales.

Ejemplo de código

<!DOCTYPE html>
        <html lang="es">
        <head>
        <meta charset="UTF-8">
        <title>Mi Página</title>
        </head>
        <body>

        <header></header>
        <nav></nav>

        <main>
        <section>
            <article></article>
        </section>
        <aside></aside>
        </main>

        <footer></footer>

        </body>
        </html>

Instrucciones

Abrir un editor de texto y crear un archivo HTML nuevo (por ejemplo, semantica.html).
Escribir la estructura básica de HTML (<!DOCTYPE html>, <html>, <head>, <title>, <body>).
Insertar un header con título y navegación principal.
Agregar un main con <section> y <article> para organizar el contenido principal.
Incluir un aside con información complementaria o enlaces.
Finalizar con un footer con información de contacto o derechos de autor.
Abrir el archivo en un navegador para verificar que la estructura semántica es clara y visible.