- ¿Qué es la semántica en HTML?
- HTML5 y las etiquetas semánticas
- Beneficios de usar etiquetas semánticas
Cuando creamos una página web, organizamos su contenido en diferentes secciones. En las versiones antiguas de HTML (antes de HTML5), los desarrolladores usaban <div> y <span> con clases o identificadores (id) para estructurar el código. Sin embargo, esto no era ideal, porque estas etiquetas no indicaban el significado del contenido.
¿Qué es la semántica en HTML?
Por ejemplo, <p> indica un párrafo y <img> una imagen. En cambio, <div> y <span> no aportan información sobre el propósito del contenido.
Antes de HTML5, los desarrolladores usaban <div> con id para dividir una página. Este método funcionaba, pero no ayudaba a navegadores ni motores de búsqueda a entender la estructura del sitio.
Ejemplo sin semántica (antes de HTML5)
<div id="header">Encabezado</div>
<div id="main">Contenido principal</div>
<div id="footer">Pie de página</div>
HTML5 y las etiquetas semánticas
Con la llegada de HTML5, se introdujeron nuevas etiquetas semánticas que reemplazan a los <div> genéricos. Estas etiquetas indican claramente el propósito de cada sección en la página.
Algunas de las etiquetas más importantes son:
| Etiqueta | ¿Cuándo usarla? | Propósito |
|---|---|---|
<header> |
En la parte superior de una página o sección | Contiene el logotipo y el menú de navegación |
<nav> |
Para agrupar enlaces de navegación principales | Define un bloque de navegación en la web |
<main> |
Para el contenido principal de la página | Contiene lo más relevante para el usuario |
<article> |
Para contenido independiente (blogs, noticias) | Representa información que puede entenderse por sí sola |
<section> |
Para dividir contenido relacionado dentro de <main> o <article> |
Agrupa temas dentro de una página |
<aside> |
Para contenido secundario o complementario | Se usa en barras laterales o publicidad |
<footer> |
En la parte inferior de la página o sección | Contiene información de contacto y enlaces legales |
Ahora, podemos mejorar el ejemplo anterior con estas nuevas etiquetas:
Ejemplo con etiquetas semánticas (HTML5)
<header>Encabezado</header>
<main>Contenido principal</main>
<footer>Pie de página</footer>
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
En las siguientes lecciones, profundizaremos en cada una de estas etiquetas y aprenderemos a usarlas correctamente con ejemplos prácticos.
💡 Cuando estamos trabajando con etiquetas semánticas en HTML5, es importante recordar que todas deben estar dentro de la etiqueta body.
La etiqueta body es donde se encuentra todo el contenido visible de la página web.
Beneficios de usar etiquetas semánticas
Las etiquetas semánticas son súper útiles para tener un código limpio y ordenado. No solo mejoran la estructura de la página, sino que también traen varios beneficios para desarrolladores y usuarios. Algunos son:
- Código más claro → Más fácil de leer y entender.
- Mejor SEO → Los motores de búsqueda identifican mejor el contenido relevante.
- Mayor accesibilidad → Los lectores de pantalla reconocen la estructura de la página.
Resumen
- Antes de HTML5, se usaban
<div>conidpara estructurar páginas, pero no tenían significado para los navegadores. - HTML5 introdujo etiquetas semánticas, lo que mejora la claridad del código, el SEO y la accesibilidad.
- Siempre que sea posible, usa etiquetas semánticas en lugar de
<div>para indicar la función del contenido.
