Estructura de un sitio web con HTML Semántico¶

Cuando se utiliza HTML semántico, se busca que la estructura del sitio web esté claramente organizada, lo que no solo facilita la lectura del código, sino que también mejora la accesibilidad y el SEO. A continuación, te explico cómo se estructuran las principales áreas de un sitio web utilizando las etiquetas semánticas adecuadas.

Estructura Completa de un Sitio Web con HTML Semántico¶

A continuación, te muestro un ejemplo de cómo todas estas etiquetas semánticas pueden combinarse para crear una estructura básica de una página web:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Sitio Web</title>
</head>
<body>
    <!-- Encabezado con título y menú de navegación -->
    <header>
        <h1>Mi Sitio Web</h1>
        <nav>
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Servicios</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </nav>
    </header>

    <!-- Contenido principal del sitio -->
    <main>
        <section>
            <h2>Bienvenidos</h2>
            <p>Esta es la sección de bienvenida de nuestro sitio web.</p>
        </section>

        <article>
            <h2>Título del artículo</h2>
            <p>Contenido del artículo...</p>
        </article>
    </main>

    <!-- Barra lateral con contenido relacionado -->
    <aside>
        <h3>Enlaces relacionados</h3>
        <ul>
            <li><a href="#">Enlace 1</a></li>
            <li><a href="#">Enlace 2</a></li>
        </ul>
    </aside>

    <!-- Pie de página con información de derechos de autor -->
    <footer>
        <p>&copy; 2024 Mi Sitio Web. Todos los derechos reservados.</p>
    </footer>
</body>
</html>

Actividades¶

PR 207 (RA1 / CE1b / IC2/ 5p) Realiza la estructura de HTML de la home de un blog. Busca inspiración, poniendo la url, en uno de tus favoritos.
PR 208 (RA1 / CE1b / IC2/ 5p) Realiza la estructura de HTML de un post de un blog. Busca inspiración, poniendo la url, en uno de tus favoritos.
PR 209 (RA1 / CE1b / IC2/ 5p) Realiza la estructura de HTML de una categoría de un blog. Busca inspiración, poniendo la url, en uno de tus favoritos.
AC 210 (RA1 / CE1b / IC1/ 3p) Realiza la estructura de HTML de un blog aprovechando todo lo creado hasta la fecha.