Free
Semántica HTML
Activar audio
Descubre qué es la semántica en HTML, sus beneficios en SEO, accesibilidad y mantenimiento de proyectos, y aprende a utilizar las etiquetas adecuadas para estructurar contenido de forma profesional.
¿Qué es la semántica HTML?
La semántica en HTML consiste en el uso de etiquetas que aportan un significado específico al contenido que envuelven, más allá de su mera apariencia visual. Esto ayuda a navegadores, lectores de pantalla y motores de búsqueda a comprender mejor la estructura y el propósito de cada elemento. Por ejemplo, en lugar de usar múltiples <div> para todo, utilizamos etiquetas como <header> o <article> que comunican su función dentro de la página.
Documentación en MDN sobre semántica
Beneficios de usar semántica HTML
- Beneficios en SEO: Los motores de búsqueda entienden la estructura del contenido, lo que puede ayudar a posicionar mejor tus páginas.
- Mejora de la accesibilidad: Los lectores de pantalla y otras herramientas de asistencia interpretan mejor el contenido, lo que facilita la navegación a personas con discapacidades visuales.
- Mantenimiento más sencillo: Para ti o cualquier otro desarrollador que trabaje en tu proyecto, será más fácil ubicar y modificar secciones gracias a un marcado claro y ordenado.
Diferencias entre etiquetas semánticas y no semánticas
-
Etiquetas semánticas: Aportan significado intrínseco al contenido que envuelven. Ejemplo:
-
<header>: sección de encabezado -
<main>: contenido principal -
<article>: artículo o contenido independiente -
<footer>: pie de página
-
-
Etiquetas no semánticas: Carecen de un significado propio y se utilizan principalmente para agrupar contenido con fines estilísticos o estructurales sin aportar contexto. Ejemplo:
<div>y<span>.
Etiquetas semánticas más comunes
A continuación, las más utilizadas cuando estás empezando:
-
Estructurales:
-
<header>: Encabezado principal o de una sección. Suele contener el logotipo, navegación principal o el título. -
<footer>: Pie de página. Contiene información como derechos de autor, enlaces secundarios, autoría, etc. -
<main>: Contenido principal de la página. Debe ser la primera etiqueta semántica dentro del<body>que se enfoque en el contenido principal (apareciendo tras elementos globales como<header>, si lo hubiera). Normalmente solo se usa una vez por página. -
<section>: Agrupación temática de contenido. Útil para dividir la información en bloques coherentes. -
<article>: Contenido independiente y autosuficiente. Ejemplo: una entrada de blog, un artículo de noticias o una publicación individual. Puedes usar varios<article>en una misma página si tienes varios contenidos independientes. -
<aside>: Contenido relacionado de forma indirecta con el contenido principal, como barras laterales, enlaces complementarios, publicidad, etc.
-
-
Texto y jerarquía:
-
<h1>a<h6>: Títulos con diferentes niveles de importancia. Debes mantener una jerarquía lógica (por ejemplo,<h1>para el título principal de la página,<h2>para subtítulos, etc.). -
<p>: Párrafos de texto. -
<ul>,<ol>,<li>: Listas no ordenadas (<ul>) y ordenadas (<ol>), con sus elementos (<li>). -
<a>: Enlaces. -
<strong>y<em>: Énfasis y significado específico del texto, más allá del estilo visual.
-
Buenas prácticas
- Usa etiquetas semánticas antes que
<div>siempre que exista una etiqueta apropiada para describir el contenido. - Coloca
<main>inmediatamente después de<body>(o tras<header>si existe) para indicar claramente dónde empieza el contenido principal. Recuerda que<main>suele ser único por página. - Mantén una jerarquía lógica en los títulos:
- Usa
<h1>una única vez para el título principal de la página. - Emplea
<h2>,<h3>, etc. para secciones y subsecciones.
- Usa
- Evita el uso excesivo de etiquetas no semánticas (
<div>y<span>) cuando no cumplen un propósito claro. - Organiza el contenido en
<article>solo cuando cada bloque de contenido pueda ser entendido de forma independiente (como diferentes artículos o entradas de blog). Puedes tener varios<article>en una página si cada uno representa una unidad de contenido separada.
