Este artículo muestra cómo optimizo los sitios web utilizando etiquetas semánticas para la estructura HTML preparando el contenido para una mejor legibilidad mecánica.
Hoy en día la optimización de los motores de búsqueda es una gran palanca para conseguir visibilidad en la web. Pero muchos sitios web no utilizan las etiquetas semánticas para la estructura HTML y optimizar la legibilidad para los bots.
Una de las razones por las que la semántica y estructura HTML suele ser tan mala: cada vez hay más programadores que no saben programar y que utilizan el copy&paste y las plantillas para crear sitios web. Estas plantillas suelen estar mal construidas en términos de semántica.
Una gran ventaja del código semántico es que las máquinas y los humanos pueden leerlo mejor.
El problema de siempre: «DIVitis»
Si el marcado de un sitio web está estructurado principalmente por un montón de divs anidados, y los divs están ahí sólo por razones de maquetación, se llama DIVitis. Mira la captura de pantalla de abajo. Está tomada de una plantilla de Divi, una de las plantillas más utilizadas para WordPress.
Como verás, este es un ejemplo perfecto de lo que te quiero explicar:
La idea principal
Cada vez que escribas nombres de clase para divs que contengan un nombre de etiqueta, debes sustituir el div por la etiqueta semántica correspondiente y simplificar el nombre de la clase, así ayudarás a crear una estructura HTML más sólida para tu web. Imagina que tienes que explicarle a alguien cómo es tu página y no puede verla en ese momento.
Ejemplo:
❌ div.nav-main
✔ nav.main
Aquí tienes una lista de algunas etiquetas semánticas.
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
Mi plantilla con ejemplo de mi estructura HTML ideal
En mi opinión, la mayoría de los sitios web pueden construirse con la siguiente estructura HTML. Esta sería mi plantilla.
Por favor, ignora la sección del head, este artículo trata de centrarse en el body. La sección del head que se muestra se menciona sólo para que sea completa.
En mi código de ejemplo el body tiene una etiqueta main que contempla la página completa. Dentro de la sección main se utilizan principalmente tres secciones:
- header
- div#content
- footer
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meta-Title</title>
<meta name="description" content="meta-description.">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<main>
<header></header>
<div id="#content"></div>
<footer></footer>
</main>
</body>
</html>Header
La sección del header se utiliza principalmente para mostrar la marca / el logotipo / el nombre de la empresa y todas las navegaciones principales.
Dentro del header suelo utilizar dos elementos nav como hijos directos:
- nav.meta
- nav.main
Es una diferencia semántica utilizar elementos nav para la navegación en lugar de usar div.nav-meta y div.nav-main. No lo hagas.
Dentro de los elementos nav siempre pongo ul. Dentro del nav.main suelo insertar el logotipo de la empresa como elemento h3.
<header>
<nav class="meta">
<ul>
<li><a href="#">Partners</a></li>
<li><a href="#">Product finder</a></li>
<li><a href="#">Change language</a></li>
</ul>
</nav>
<nav class="main">
<h3><a href="#">Logo></a></h3>
<ul>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>Beneficio: Para abordar la navegación principal en CSS escribo el siguiente código. Puedes leer fácilmente la jerarquía.
header nav.main { ... }
header nav.main ul{ ... }
header nav.main ul li a{ ... }El contenido real de la página
En el área de contenido utilizo etiquetas de section para estructurar todos los contenidos en grupos lógicos. Cada section de contenido recibe un nombre de clase que es simplemente legible.
section.intro{ ... }
section.intro h1 { ... }
section.keyvisual{ ... }
section.keyvisual div.container h2 { ... }Utilizo los divs en el área de contenido exclusivamente como contenedores que tienen una función de maquetación.
En mi ejemplo, la section keyvisual tiene un contenedor para los titulares que se posiciona de forma absoluta dentro del keyvisual.
<div id="#content">
<section class="intro">
<h1>Lorem ipsum dolor est</h1>
<p class="teaser">Lorem ipsum dolor est ...</p>
</section>
<section class="keyvisual">
<figure><img src="images/keyvisual.jpg" alt=""></figure>
<div class="container">
<h3>Subheadline</h3>
<h2>Headline</h2>
<a href="#" class="button">more info</a>
</div>
</section>
<section class="teaser products">
<h2>Our latest products</h2>
<p class="teaser">Lorem ipsum dolor est ...</p>
</section>
<section class="...">
...
</section>
</div>Footer
En la zona del footer también utilizo etiquetas de section para separar lógicamente el contenido.
En mi ejemplo hay dos secciones:
- section.brand
- section.legal
En la sección de marca suelo añadir el logotipo, address y los datos de contacto.
La sección legal es de tipo de navegación, por lo que utilizo una etiqueta nav.
<footer>
<section class="brand">
<figure><img src="images/logo.svg"></figure>
<address>
Company Name<br>
Street<br>
Citycode City<br>
<br>
Phone: <a href="tel:+1234567890">+1234567890</a><br>
E-Mail: <a href="mailto:info@domain.com">info@domain.com</a>
</address>
</section>
<section class="legal">
<nav>
<ul>
<li>Copyright Company Name 2021</li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Imprint</a></li>
</ul>
</nav>
</section>
</footer>Conclusión
Sé que los dispositivos y navegadores modernos de hoy en día pueden manejar un código malo. Pero si quieres trabajar de forma más sostenible y si quieres mejorar la legibilidad de tu estructura HTML para las máquinas y los humanos, revisa tu código y optimiza tu semántica.
Por cierto, si quieres saber más sobre HTML y trucos para crear contenidos más vistosos, quizás te pueda interesar este artículo sobre Cheat Sheets Frontend básicos: Optimiza tus desarrollos
