Fundamentos de HTML y CSS

Teoría: Elementos Semánticos

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?

La semántica en HTML significa que las etiquetas no solo estructuran la web, sino que también describen su contenido.

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ónContiene el logotipo y el menú de navegación
<nav>Para agrupar enlaces de navegación principalesDefine un bloque de navegación en la web
<main>Para el contenido principal de la páginaContiene 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 complementarioSe usa en barras laterales o publicidad
<footer>En la parte inferior de la página o secciónContiene 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> con id para 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.
NavegaciónTeoría

Completado

0 / 18