Curso de HTML
Construye la estructura de la web.
Aprende cada etiqueta con ejemplos interactivos y crea proyectos reales.
Estas seis etiquetas forman el esqueleto semántico de una página moderna: header, nav, main, section, article y footer. Con ellas, la estructura de tu HTML cuenta su propia historia.
Explicación
Cada una de estas etiquetas describe una parte específica de la estructura de una página:
<header>Cabecera introductoria de la página o de una sección: suele contener el título y la navegación.
<nav>Agrupa los enlaces de navegación principal del sitio.
<main>El contenido principal de la página. Debe existir una sola vez por página.
<section>Agrupa contenido relacionado por tema, normalmente con su propio encabezado.
<article>Contenido autónomo que tendría sentido distribuido por separado, como un post de blog o una noticia.
<footer>Pie de página o de una sección: suele contener información de cierre, como derechos de autor.
Reto rápido
Cada div de abajo tiene un comentario indicando qué etiqueta semántica debería ser. Reemplázalos.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Para elegir entre <section> y <article>, pregúntate: ¿este contenido tendría sentido por sí solo, sacado de esta página (como una noticia o un producto)? Si sí, es <article>.
Dato extra
Puedes tener varias etiquetas <section> o <article> en una misma página, pero solo debe existir un único <main>.
Error común
Confundir <section> con <div>: usar <section> para cualquier agrupación puramente visual, sin que tenga un encabezado o un tema propio. Ahí un <div> es lo correcto.
Siguiente paso
Terminaste el módulo de organización del contenido. El siguiente módulo trata sobre listas: cómo mostrar elementos ordenados y sin ordenar.
Ir a la siguiente lección