Guía rápida — todos los elementos del módulo
Antes de arrancar el ejercicio, repasá esta referencia rápida:
| Elemento | Rol semántico | ¿Cuándo usarlo? |
|---|---|---|
<header> | Cabecera de página o sección | Logo, nombre del sitio, <nav> principal — no es único |
<nav> | Bloque de navegación principal | Menú del sitio, paginación, índice de guía |
<main> | Contenido principal | El contenido específico de esta página — único |
<section> | Agrupación temática | Cuando hay un tema común con un heading que lo identifica |
<article> | Contenido autónomo | Posts, noticias, tarjetas — tiene sentido solo, fuera de la página |
<aside> | Contenido complementario | Sidebar, notas al margen, artículos relacionados |
<footer> | Pie de página o sección | Copyright, links legales — no es único |
<div> | Contenedor genérico de bloque | Cuando no hay elemento semántico apropiado |
<span> | Contenedor genérico inline | Cuando no hay elemento semántico apropiado |
Recordatorios clave:
<main>es el único elemento de este grupo que debe aparecer exactamente una vez.<aside>y<footer>se apilan verticalmente sin CSS — eso es correcto. No busques “hacer que quede a la derecha” con HTML.<article>es para contenido autónomo y redistribuible.<section>es para agrupaciones temáticas dentro del flujo de la página.
Tu turno: usá el starter como guía y completá la estructura del blog. Hacé clic en “Comprobar” cuando termines.
Armá una página de blog
Armá la estructura semántica de una página de blog ficticio. El sandbox ya pone el `<body>` — tu código son los hijos del body. La página debe tener esta estructura: 1. Un `<header>` que contenga: - Un `<h1>` con el texto `Blog de Tecnología`. - Un `<nav>` con una `<ul>` de exactamente 2 `<li>`, cada uno con un `<a>`: - `<a href="inicio.html">Inicio</a>` - `<a href="articulos.html">Artículos</a>` 2. Un `<main>` que contenga una `<section>` con: - Un `<h2>` con el texto `Artículos recientes`. - Exactamente 2 `<article>`, cada uno con un `<h3>` y al menos un `<p>`. 3. Un `<aside>` que contenga: - Un `<h2>` con el texto `Sobre este blog`. - Al menos un `<p>`. 4. Un `<footer>` que contenga al menos un `<p>`. Recordá: usá `<article>` para las publicaciones del blog (son contenido autónomo y redistribuible), no `<section>`.
Preview