Puede que en algún momento hayas querido saber qué hace que una página web no solo se vea bien, sino que también sea fácil de entender tanto para los usuarios como para los motores de búsqueda, la respuesta está en el HTML semántico. Este no es solo un conjunto de etiquetas y elementos; es la clave para estructurar tu contenido de manera que todos puedan interpretarlo claramente, incluidos los buscadores que determinan el ranking de tu página. En este artículo, te vamos a explicar qué es exactamente el HTML semántico y cómo puedes usarlo para mejorar la accesibilidad y la SEO de tu sitio web.
¿Qué es el HTML semántico?
Para que logres entender qué es el HTML semántico, es muy importante que separemos primero ambos conceptos. Recuerda que HTML es un lenguaje de marcado que nos permite, a través de sus etiquetas, organizar información en una página web para que sea legible. Por su parte, la semántica es una rama de la lingüística que se enfoca en el estudio de las palabras en relación con el sentido y la interpretación de las mismas dentro de los enunciados o textos.
Por tanto, si nos preguntamos qué es el HTML semántico, podríamos afirmar que es una posibilidad de que el código HTML esté mejor estructurado.
Esto quiere decir que no se trata de un nuevo HTML ni de una variación de este, sino que usamos etiquetas que nos indican de forma clara la función que cumplen en relación con el contenido. Esto quiere decir que una página web estructurada semánticamente significa que cada etiqueta, elemento y atributo está acorde a su función con el contenido.
En el proceso de entender qué es el HTML semántico, es importante recordar que existen diferentes tipos de etiquetas HTML. Una de esas tipologías corresponde a las etiquetas semánticas que, claramente, son las aliadas del HTML semántico.
Entre las etiquetas semánticas más comunes encontramos:
- <a> </a>: introduce hiperenlances en el documento HTML.
- <strong> </strong>: reconoce las palabras claves o información relevante.
- <br>: introduce un salto del línea.
- <mark> </mark>: resalta el texto.
Sin embargo, otras etiquetas de agrupación de contenido o de estructuración también posibilitan la organización del texto de forma semántica. Recuerda que el objetivo es usar etiquetas que tengan significado sobre el papel que representa tal bloque, espacio o título al interior del contenido.
Si bien visualmente puede que la información se estructure de la misma manera usando únicamente la etiqueta <div>, que es la encargada de generar contenedores o apartados, lo cierto es que los motores de búsqueda van a entender mejor la información si esta tiene relaciones de sentido claras y organizadas.
¿Cómo usar el HTML semántico y sacarle el máximo provecho?
Después de explicar qué es el HTML semántico, es el momento de contarte cómo puedes usarlo. En este sentido, la principal ventaja de usar HTML semántico reside en que el contenido del sitio web estará correctamente estructurado. Esto, claramente, repercute en aspectos de posicionamiento, accesibilidad y relación con los motores de búsqueda, como verás a continuación.
Para mejorar la accesibilidad
La accesibilidad a páginas web está relacionada con las dificultades que pueden tener personas con ciertas limitaciones físicas. De hecho, en los últimos años se ha insistido aún más en cómo cerrar la brecha y hacer de las páginas web sitios accesibles independientemente de las discapacidades, como es el caso de los usuarios ciegos que recurren a lectores de pantalla para acceder a los sitios web. Es muy importante que entiendas que hay solo una correcta estructuración semántica que le permitirá al lector de pantalla identificar la información de una forma jerarquizada y organizada, porque de lo contrario solo sería texto indistinguible.
Para mejorar el posicionamiento del sitio web
Otro de los usos del HTML semántico tiene que ver con el posicionamiento de tu sitio web en los motores de búsqueda. Recuerda que Google es el motor de búsqueda más importante en la actualidad y sus algoritmos están diseñados para entender en mayor profundidad el código de nuestras páginas web. Por tanto, es posible afirmar que a mayor estructuración semántica del sitio, habrá un mayor entendimiento de Google. No olvides que es más probable que los usuarios ingresen a tu sitio web desde un buscador que escribiendo directamente la URL de la página.
Ejemplo práctico del uso de HTML semántico
Para entender cómo usar HTML semántico en la vida real, imaginemos que estás construyendo un blog sobre recetas de cocina. Aquí te muestro cómo estructurar una página de receta usando HTML semántico:
Uso de elementos estructurales:
- <header>: Utiliza este elemento para encerrar el título del blog y la navegación principal.
- <nav>: Dentro del <header>, para los enlaces de navegación.
- <article>: Cada receta puede ser un artículo independiente.
- <section>: Para segmentar diferentes partes de cada receta, como ingredientes, preparación, y comentarios.
- <footer>: Para la información del autor y derechos de autor.
Código:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Receta de Gazpacho Andaluz</title>
<meta name="description" content="Aprende a preparar un refrescante gazpacho andaluz con nuestra receta fácil y rápida.">
</head>
<body>
<header>
<h1>Mi Blog de Recetas</h1>
<nav>
<ul>
<li><a href="/inicio">Inicio</a></li>
<li><a href="/recetas">Recetas</a></li>
<li><a href="/contacto">Contacto</a></li>
</ul>
</nav>
</header>
<article>
<header>
<h2>Gazpacho Andaluz</h2>
<p>Publicado el 10 de julio de 2024 por <a href="/autores/juan">Juan</a></p> </header>
<section>
<h3>Ingredientes</h3>
<ul>
<li>1 kg de tomates maduros</li>
<li>1 pepino</li>
<li>1 pimiento verde</li>
<!-- Más ingredientes -->
</ul>
</section>
<section>
<h3>Preparación</h3>
<p>Pelar los tomates y el pepino. Cortar todos los vegetales en trozos pequeños y ponerlos en la licuadora...</p>
</section>
<footer>
<p>Categoría: Sopas y Cremas</p>
</footer>
</article>
<footer>
<p>© 2024 Mi Blog de Recetas. Todos los derechos reservados.</p>
</footer>
</body>
</html>
Ahora que sabes qué es el HTML semántico, seguro que quieres profundizar en el diseño web. Este es el momento preciso para apoyarte en los profesionales más experimentados. Accede a nuestro Bootcamp de Desarrollo Web Full Stack de KeepCoding y únete a un sector con alta demanda de profesionales y salarios altos que no se pueden igualar. ¡Te estamos esperando!
