Cargando...
Elementos semánticos en HTML
Tras div y class/id, lo semántico nombra regiones por significado.
Significado antes que cajas
CSS estiliza cualquier etiqueta; la semántica documenta la intención.
Respuesta directa
Usa landmarks cuando el significado encaje. Un main. No envuelvas todo el sitio en un article.
📊 Core landmarks
| Element | Typical meaning |
|---|---|
| header | Introductory or banner content for a page or section |
| nav | Major navigation links |
| main | Dominant unique content of this page |
| article | Independent composition (post, story, card that could stand alone) |
| section | Thematic grouping, usually with a heading |
| aside | Side note related to the surrounding content |
| footer | Closing content for a page or section |
Esqueleto simple
Cabecera y enlaces, main con contenido único, footer al cierre.
Simple semantic skeleton
html
HTML Code
<body>
<header>
<h1>City Guide</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
</nav>
</header>
<main>
<h2>Welcome</h2>
<p>Explore the city with clear HTML structure.</p>
</main>
<footer>
<p>All rights reserved.</p>
</footer>
</body>Leer el esqueleto
- header con nav a menudo
- un main
- footer cierra
article, section y aside
Dentro de main: pieza independiente, bloques temáticos, nota lateral.
Article section and aside
html
HTML Code
<main>
<article>
<h2>Weekend markets</h2>
<section>
<h3>Saturday</h3>
<p>Fresh fruit stalls open at 8:00.</p>
</section>
<section>
<h3>Sunday</h3>
<p>Craft vendors join the square.</p>
</section>
</article>
<aside>
<h2>Tip</h2>
<p>Arrive early for the best produce.</p>
</aside>
</main>Leer el segundo demo
- article puede sostenerse solo
- section con encabezado
- aside no es un segundo main
Landmark vs div
¿Rol estándar? landmark. ¿Solo envoltorio de layout? div.
Práctica
- header/nav/main/footer
- historia solo en main
- un article
- confirmar un solo main
Errores fáciles
- varios main
- section sin tema
- landmarks al azar
Resumen
- Semántica nombra significado
- un main
- landmark cuando el rol encaja
🧠 Pon a Prueba tu Conocimiento
Listo para Empezar
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
6
Preguntas
70%
Para Aprobar
∞
Tiempo
∞
Intentos
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior