En el Módulo 1 aprendiste a poner contenido en la página. Acá vas a aprender a decir qué es cada parte de esa página.
Imaginate una casa donde todas las puertas son iguales y ninguna tiene cartel. Para saber cuál es el baño, tenés que abrirlas una por una.
Ahora ponele un cartel a cada una: cocina, baño, dormitorio. Las puertas son físicamente idénticas — lo que cambió es que ahora comunican qué hay adentro.
<div> <h1>Mi página</h1> </div>
<header> <h1>Mi página</h1> </header>
Arrastrá cada etiqueta a su columna. Las genéricas no están prohibidas: simplemente no comunican nada.
Las dos páginas de al lado se ven idénticas cuando las abrís en el navegador. Mismo texto, mismo orden, mismo resultado en pantalla.
Y sin embargo solo una le cuenta al mundo qué es cada zona. La otra dice "acá hay algo" cuatro veces seguidas.
Esta página de un refugio de animales funciona, pero está armada con puros <div>. Seguí los comentarios ✏️ y reemplazá cada uno por su etiqueta semántica. Ejecutá: se ve igual, pero ahora significa.
A tres públicos muy concretos. Ninguno de los tres sos vos mirando la pantalla.
Las personas que usan lector de pantalla escuchan la página en voz alta. Cuando el programa encuentra un <nav> anuncia "navegación" y pueden saltearlo. Cuando encuentra un <div>, no dice nada: no hay nada que decir.
Google lee tu HTML para entender de qué trata la página. Si marcás una nota con <article>, entiende que es contenido con valor propio. Si la marcás con <div>, tiene que adivinar.
Y vos mismo dentro de seis meses, cuando abras tu código y no te acuerdes de nada. Un <footer> se entiende al instante; un <div id="abajo"> te obliga a investigar.
| Quién | Qué gana |
|---|---|
| 🦻 Lector de pantalla | Navegar y saltar zonas sin escuchar todo |
| 🔍 Buscadores | Entender el contenido y posicionarlo |
| 👩💻 Quien lea tu código | Entenderlo de un vistazo |
Arrastrá las tarjetas para ordenarlas en el orden en que las presentamos.
Una sola. Es la que vas a aplicar cada vez que te sientes a escribir HTML, y la que resume todo lo anterior.
<div>, preguntate si existe una etiqueta que signifique lo que estás haciendo. Si existe, usá esa.
El <div> no está prohibido. Lo que está mal es usarlo cuando había una etiqueta mejor disponible.
<div> <h1>Refugio Patitas</h1> </div>
<header> <h1>Refugio Patitas</h1> </header>
Elegí la opción correcta. Recibís una explicación con cada respuesta. No podés cambiarla, así que pensala bien.
<!-- Probá la diferencia vos: --> <!-- la página SE VE igual, pero --> <!-- una SIGNIFICA y la otra no --> <header> <h1>Mi página</h1> </header> <main> <p>Contenido principal.</p> </main> <footer> <p>© 2026</p> </footer>
Escribí desde cero (el editor está vacío a propósito) la página de una feria de ciencias: una zona que presente el evento, una con tres enlaces de navegación, una con el contenido principal, y una que cierre con el año. Todo con etiquetas semánticas, sin un solo <div>.
Siete etiquetas. Lo importante no es memorizarlas, sino saber cuándo te toca usar cada una.
Antes de ver una por una, mirá cómo se acomodan todas juntas. Este es el esqueleto que vas a repetir en casi cualquier página.
Fijate en la jerarquía: el <article> vive adentro de la <section>, y la <section> vive adentro del <main>. No es casualidad.
<header> <!-- presenta -->
<nav> <!-- menú -->
<main> <!-- ⭐ uno solo -->
<section> <!-- capítulo -->
<h2>Título</h2>
<article> <!-- pieza autónoma -->
<h3>Una nota</h3>
</article>
</section>
</main>
<footer> <!-- cierra -->
Ordená las etiquetas como aparecerían en una página real, de arriba hacia abajo.
El <header> es lo que aparece arriba de todo y te dice dónde estás parado: el nombre del sitio, el logo, el título grande.
El <nav> es el conjunto de enlaces que te permiten moverte por el sitio.
<header> con <head>. Se parecen en el nombre pero no tienen nada que ver: <head> es la parte invisible del documento; <header> es contenido visible.
<header> <h1>Cocina Fácil</h1> </header> <nav> <a href="#recetas">Recetas</a> <a href="#contacto">Contacto</a> </nav>
Elegí la opción correcta. Pensala bien: no podés cambiarla.
Es el motivo por el que la persona entró a esa página. Todo lo que se repite en todas las páginas del sitio (menú, pie) queda afuera.
<header> ni de un <footer>: es hermano de ellos, no hijo.
<header> <main>...</main> <!-- acá no va --> </header> <main>...</main> <!-- ya había uno -->
<header>...</header> <main>...</main> <footer>...</footer>
Este código tiene dos errores con el <main>, marcados con 🐛. Encontralos y corregilos.
Una zona temática dentro del contenido. Como los capítulos de un libro: cada uno tiene su tema y su título.
<h2> arriba, es una section. Si no se te ocurre ninguno, probablemente sea un <div>.
Por eso una section casi siempre empieza con su encabezado. Si no tiene título, sospechá.
<section> <h2>Recetas de invierno</h2> <p>Las mejores para el frío.</p> </section>
<section> <p>Un texto suelto.</p> </section>
Escribí el nombre de la etiqueta que falta (sin los signos < >).
<>
<h1>Feria de Ciencias</h1>
</...>
<> <!-- solo uno por página -->
<> <!-- ¿le puedo poner título? sí -->
<h2>Proyectos</h2>
</...>
</...>
Contenido que tendría sentido aunque lo sacaras de la página y lo publicaras aparte: una noticia, un post, una receta, un comentario.
<section>
<h2>Últimas reseñas</h2>
<article>
<h3>Metrópolis</h3>
<p>Una obra maestra.</p>
</article>
<article>
<h3>Whiplash</h3>
<p>Intensa de principio a fin.</p>
</article>
</section>
Aplicá la prueba del recorte: si se entiende solo fuera de la página, es article. Si es una parte de un todo, es section.
El <footer> es lo que va al final: copyright, contacto, links secundarios.
El <div> es un contenedor genérico: no significa nada, solo agrupa. A veces necesitás juntar cosas por una razón puramente visual, y eso está bien.
| Etiqueta | La pregunta que te hacés |
|---|---|
<header> | ¿Presenta lo que viene abajo? |
<nav> | ¿Es un grupo de enlaces para navegar? |
<main> | ¿Si lo borro, la página pierde sentido? |
<section> | ¿Le puedo poner un título? |
<article> | ¿Se entiende solo si lo saco de acá? |
<footer> | ¿Cierra lo que estuvo arriba? |
<div> | ¿Ya descarté todas las anteriores? |
Elegí la opción correcta. Pensala bien: no podés cambiarla.
<!-- Todas juntas, con su jerarquía -->
<header>
<h1>Cocina Fácil</h1>
</header>
<nav>
<a href="#recetas">Recetas</a>
</nav>
<main>
<section>
<h2>De invierno</h2>
<article>
<h3>Ñoquis</h3>
</article>
</section>
</main>
<footer>
<p>© 2026</p>
</footer>Armá desde cero un blog de reseñas de películas. Debe tener: presentación del blog, menú, un <main> con una <section> titulada "Últimas reseñas", y adentro tres <article> (una reseña cada uno, con su <h3>). Cerrá con el pie.
Vamos de a uno. En esta sección solo existe id. Nada más.
Un atributo agrega información extra a una etiqueta. La etiqueta sola dice qué es; el atributo agrega datos sobre eso.
El id es uno de ellos. Es el que sirve para señalar a UNO solo y decir "ese, ese mismo, no otro".
<section>
<section id="contacto">
Elegí la opción correcta. Pensala bien: no podés cambiarla.
La forma es siempre la misma, sin excepciones: nombre = "valor", con el valor entre comillas.
Mirá la anotación de al lado: cada parte tiene su nombre. Cuando algo te falle, volvé a esa imagen.
</section id="contacto">
<section id="contacto"> <h2>Contacto</h2> </section>
Completá para que el enlace llegue a la section correcta.
<a href="#">Escribinos</a> <section =""> <h2>Contacto</h2> </section>
En tu clase puede haber tres personas que se llamen Martín. Pero no hay dos con el mismo número de cédula. Ese número identifica a una sola persona, sin ambigüedad.
El id hace exactamente eso: le pone a un elemento un nombre único que no se repite en ningún otro lado de la página.
id no puede aparecer dos veces en la misma página. Nunca.
<div id="caja">Una</div> <div id="caja">Otra</div>
<div id="caja-izquierda">Una</div> <div id="caja-derecha">Otra</div>
Este código tiene un id repetido dos veces. Encontralo y arreglalo dándole a cada uno su identidad propia.
Ahora mismo, para algo que ya conocés del Módulo 1: los enlaces internos.
¿Te acordás del <a href="#algo"> que te llevaba a otra parte de la misma página? Ese #algo está buscando un id.
<a href="#recetas">Ir a recetas</a>
<section id="recetas"> <h2>Nuestras recetas</h2> </section>
Ordená los pasos que ocurren cuando alguien hace clic en <a href="#contacto">.
Hay convenciones. No son caprichos: minúsculas, sin espacios, y describiendo qué es el elemento.
Por eso id="caja-azul" es mal nombre: si mañana la pintás de verde, el nombre te miente.
| ✖ Así no | ✔ Así sí | Por qué |
|---|---|---|
menu principal | menu-principal | Sin espacios |
MenuPrincipal | menu-principal | Todo en minúsculas |
x | menu-principal | Tiene que describir |
caja-azul | galeria-fotos | El contenido, no el color |
Clasificá cada nombre según respete o no las convenciones.
<!-- El enlace busca… --> <a href="#recetas">Ir a recetas</a> <!-- …y el destino levanta la mano --> <section id="recetas"> <h2>Nuestras recetas</h2> </section>
Construí desde cero una página sobre tu barrio con un <nav> que tenga cuatro enlaces internos, y cuatro <section> con sus respectivos id, de modo que los cuatro saltos funcionen.
Mismo formato que id, pero resuelve el problema contrario.
El id servía para señalar a uno. Pero muchas veces no querés señalar a uno: querés decir "todos estos son del mismo tipo".
En un liceo, la cédula identifica a cada persona. Pero el uniforme dice a qué grupo pertenece. Y el uniforme se comparte: veinte personas pueden llevar el mismo, y eso es justamente el punto.
id no se puede repetir. La class está hecha para repetirse.
<article class="tarjeta">Receta 1</article> <article class="tarjeta">Receta 2</article> <article class="tarjeta">Receta 3</article>
id | class | |
|---|---|---|
| Es como… | La cédula | El uniforme |
| ¿Se repite? | No | Sí |
| Sirve para | Señalar a UNO | Agrupar a VARIOS |
La pregunta clave es siempre la misma: ¿hay uno solo, o hay varios?
Hay un síntoma clarísimo, y lo vas a reconocer apenas te pase.
tarjeta1, tarjeta2, tarjeta3…), eso es una class gritando que la uses.
Numerar ids significa que estás forzando el id a hacer el trabajo de la class. Y encima corrés el riesgo de repetir uno sin darte cuenta.
<article id="tarjeta1">Mate</article> <article id="tarjeta2">Bombilla</article> <article id="tarjeta3">Termo</article>
<article class="tarjeta">Mate</article> <article class="tarjeta">Bombilla</article> <article class="tarjeta">Termo</article>
Alguien numeró los ids porque no conocía las class. Peor todavía: repitió uno. Reemplazá los cuatro ids por una sola class compartida, y dejale el id únicamente a la tarjeta que necesita identidad propia (la del mes).
Acá está la parte que sorprende: un mismo elemento puede pertenecer a más de un grupo al mismo tiempo.
Alguien puede llevar el uniforme del liceo y la camiseta del equipo de handball. Las dos cosas conviven.
<article class="tarjeta destacada"> Receta especial </article>
<article class="tarjeta" class="destacada">
<article class="tarjeta, destacada">
Elegí la opción correcta. Pensala bien: no podés cambiarla.
Escribí cómo se declaran correctamente dos clases en un mismo elemento.
<!-- Quiero que este article sea "tarjeta" Y "destacada" -->
<article ="">
<h3>Chivito al plato</h3>
</article>
<!-- Pista: van en el MISMO atributo,
separadas por un ESPACIO -->
Para el módulo que viene: CSS. Vas a poder escribir una sola regla que diga "todo lo que sea tarjeta se ve así", y las tres tarjetas la obedecen sin que repitas nada.
Pensalo al revés: sin class, tendrías que darle estilo a cada tarjeta por separado.
/* UNA regla… */
.tarjeta {
border: 2px solid gold;
}
/* …y las TRES tarjetas obedecen */
Ordená el razonamiento que lleva a un programador a darse cuenta de que necesita una class.
<!-- La misma class, repetida. Perfecto. --> <article class="tarjeta">Receta 1</article> <article class="tarjeta">Receta 2</article> <!-- Varias clases: separadas por ESPACIOS --> <article class="tarjeta destacada"> Receta especial </article>
Armá desde cero una galería del paseo de fin de año: una <section> con cinco <article> que compartan la class foto-card. Una de ellas, la ganadora del concurso, debe llevar además una segunda class (ganadora) en el mismo atributo.
Ya sabés qué hace cada uno por separado. Es hora de ponerlos a trabajar en la misma página.
Antes de que te explique nada, leé el código de al lado con atención. No hace falta que entiendas todo.
Solo mirá los nombres que aparecen. Fijate cuáles se repiten y cuáles no.
Los que se repiten son class. Los que son únicos son id. Ahí está toda la diferencia, y la acabás de descubrir vos.
<header id="cabecera"> <nav id="menu"> <article class="tarjeta"> <article class="tarjeta"> <footer id="pie">
Elegí la opción correcta. Pensala bien: no podés cambiarla.
La pregunta que aparece siempre en este punto: "¿un elemento puede tener id y class al mismo tiempo?" Sí. Y muchas veces es lo correcto.
Volvamos al liceo: una persona lleva el uniforme y tiene su cédula. Las dos cosas conviven, porque responden preguntas distintas.
class dice de qué grupo sos. El id dice quién sos.
El orden no importa: class="x" id="y" e id="y" class="x" son equivalentes.
<article class="foto-card">
<p>Foto del paseo</p>
</article>
<article class="foto-card"
id="foto-ganadora">
<p>Foto ⭐</p>
</article>
Ordená las preguntas que te hacés, en orden, al decidir cómo marcar un elemento nuevo.
Esta foto pertenece al grupo y además es única. Completá los dos atributos.
<article ="foto-card"
="foto-ganadora">
<p>Foto ⭐</p>
</article>
<!-- Pista: el grupo se comparte;
la identidad es única. -->
Muestra un cartelito cuando pasás el mouse por encima. Sirve para una aclaración extra.
<abbr title="HyperText Markup Language"> HTML </abbr>
<p title="Cierra el 30 de julio"> Info </p>
Elegí la opción correcta. Pensala bien: no podés cambiarla.
Aplica estilo directamente sobre el elemento. Funciona, y sirve para pruebas rápidas.
style solo para probar.
<p style="color: red;">Alerta</p>
<p style="color: red;">Uno</p> <p style="color: red;">Dos</p> <p style="color: red;">Tres</p> <!-- ¿y si ahora lo querés azul? -->
Arrastrá el atributo correcto a cada hueco. Hay uno que sobra: descubrí cuál y por qué.
Destino único de un enlace #contacto → …
Las 12 tarjetas que comparten aspecto → …
Un borde dorado puesto directo en el elemento → …
Un cartelito al pasar el mouse → …
Estos cinco son los que vas a cometer. No es una amenaza: es estadística. Todos los cometemos al principio.
Leelos, y cuando algo no te funcione, volvé acá antes de desesperarte.
| ✖ El error | Por qué está mal |
|---|---|
Más de un <main> | El contenido principal es uno solo |
Repetir un id | Los enlaces internos dejan de funcionar |
<div> habiendo etiqueta semántica | Perdés accesibilidad sin ganar nada |
Información solo en title | En celulares desaparece |
style en todos lados | Es CSS pidiendo que lo uses |
Este código acumula cuatro de los cinco errores de la tabla. Están marcados con 🐛. Corregilos todos.
<!-- Semántica + atributos, juntos -->
<section id="galeria">
<h2>Galería</h2>
<article class="foto-card">
<p>Foto del paseo</p>
</article>
<article class="foto-card"
id="foto-ganadora"
style="border: 2px solid gold;">
<p title="¡Ganó el concurso!">Foto ⭐</p>
</article>
</section>Armá desde cero la página de un club deportivo con todo lo del módulo: estructura semántica completa, id en las zonas únicas, un nav cuyos enlaces salten a esas zonas, y al menos tres <article> con class compartida, de los cuales uno lleve también un id.
Nadie construye una casa poniendo ladrillos a ver qué sale. Primero se hace el plano.
Cuando te sentás a hacer una página, la tentación es abrir el editor y empezar a tipear. Y funciona… hasta que a mitad de camino te das cuenta de que la estructura no cierra y tenés que rehacer todo.
El mockup es el plano: un dibujo de cajas que muestra qué zonas va a tener tu página y dónde va cada una. Se hace antes de escribir una sola línea de HTML.
Ordená las etapas del proceso, desde que se te ocurre la idea hasta la página terminada.
Si respondés estas tres, ya tenés la página escrita en tu cabeza. Escribirla en el editor pasa a ser un trámite.
id; se repite → class.
| Pregunta | Te da… |
|---|---|
| ¿Qué zonas hay? | El plano |
| ¿Qué etiqueta va? | La estructura semántica |
| ¿Única o repetida? | El id o la class |
Elegí la opción correcta. Pensala bien: no podés cambiarla.
Arrastrá cada etiqueta a la zona donde te parece que va. El constructor te dice si tu elección es semánticamente correcta, y al final te genera el código HTML de tu propio plano.
<header> se presenta arriba, el <nav> te deja moverte, el <main> tiene lo importante, adentro va una <section> como capítulo, la zona lateral es un <div> (ninguna etiqueta semántica le calza) y el <footer> cierra.
Llegó el momento de juntar todo: estructura semántica, id en lo único, class en lo que se repite.
Armá una página sobre un tema que te guste (tu deporte, tu banda, tu barrio, lo que sea). Tiene que cumplir con esto:
<header> con el título del sitio.<nav> con al menos dos enlaces internos.<main> (uno solo) con dos <section>, cada una con su id, para que los enlaces del nav lleguen.<article> con la misma class.<footer> con tu nombre y el año.El desafío: antes de escribir, dibujá el mockup en papel. Después codeá.
El editor arranca vacío a propósito: acá no hay andamiaje. Todo lo que necesitás ya lo practicaste en las secciones anteriores — la estructura del documento, las siete etiquetas y los dos atributos. Si te trabás, volvé al paso correspondiente con el índice 📑 o espiá el glosario.
<main>? ¿Ningún id repetido? ¿Los href="#…" coinciden con algún id real? ¿Las tarjetas comparten la misma class?Tocá cualquier tarjeta para darla vuelta. Buscá por palabra si necesitás algo puntual.
No hay resultados para esa búsqueda.
Todo el módulo explicado en video. Sirve para preparar la clase antes de leer, o para repasar después de practicar.