HTML semántico: Poniendo las cosas en su lugar

Destacarse en los resultados de búsqueda de Google es esencial para cualquier página web, es algo que conocemos al detalle en AutoridadOnline. Uno de los pilares fundamentales para lograrlo es el uso adecuado del HTML semántico. Te presentamos, con algunos sencillos ejemplos, cómo el HTML semántico es crucial para el la autoridad (SEO) y cómo implementarlo eficazmente en tu sitio web.

¿Qué es el HTML Semántico?

El HTML semántico se trata de darle “significado” a cada parte de tu página web. Es como ponerle etiquetas claras a cada cosa para que tanto los navegadores como los buscadores entiendan de qué va cada sección. En lugar de usar solo etiquetas genéricas como <div> para todo, usamos etiquetas que describen mejor el contenido, como <article>, <nav>, <aside>, <footer>, <header>, <section>, entre otras.

HTML Semántico para dummies

Piensa en tu página web como si fuera un periódico. Si solo usaras cajas genéricas sin etiquetas claras, sería como imprimir todas las noticias en una sola hoja sin títulos, sin secciones y sin organización. Los lectores tendrían que leerlo todo para entender de qué trata cada parte, lo que sería un caos. El HTML semántico es como organizar ese periódico con secciones bien definidas:

El encabezado (<header>) es como la portada del periódico, donde está el título y la marca.
La navegación (<nav>) sería el índice o el menú que te dice en qué página están las noticias, los deportes o la economía.
Las noticias (<article>) son artículos independientes, como una historia dentro del periódico.
Las secciones (<section>) agrupan temas similares, por ejemplo, todas las noticias de deportes juntas.
La barra lateral (<aside>) podría ser la sección de anuncios o información extra.
El pie de página (<footer>) es donde aparece el contacto, derechos de autor, quién patrocina el contenido y otros datos relevantes.

Si un buscador como Google entra a una página web desorganizada (donde todo está dentro de cajas <div> sin significado), le costará entender qué información es importante. Pero si usamos HTML semántico, Google “leerá” la página como un periódico bien estructurado, identificará fácilmente las secciones importantes y mostrará mejor el contenido en los resultados de búsqueda.

Ejemplo de HTML semántico

Bajemos esto a la práctica y veamos cómo se reescribe una sección de nuestra web, por ejemplo una página que contenga una noticia. Antes nuestro código HTML habría incluido algo como:

<div id=”noticias”>

<div class=”titulo”>Noticia 1</div>

<div class=”contenido”>Texto de la noticia maravillosa que habla sobre las maravillas del contenido semántico SEO en todo tipo de navegadores…</div>

</div>

Ahora, con HTML5 y sus etiquetas semánticas, el nuevo código HTML quedaría como:

<article>

<h2>Noticia 1</h2>

<p>Texto de la noticia maravillosa que habla sobre las maravillas del contenido semántico para los navegadores…</p>

</article>

¿Ves la diferencia? A que se ve mucho mas claro. Si no, no te preocupes, al final del artículo te mostraré un ejemplo mucho mas detallado.

¿Y por qué esto es importante para el SEO?

Los motores de búsqueda, como Google, usan rastreadores (bots) que analiza todas las páginas web para entender de qué tratan. Cuando usas HTML5 semántico, les haces la vida mucho más fácil a estos bots, para que puedan identificar rápidamente las partes importantes de tu contenido.

Mejor comprensión del contenido: Las etiquetas semánticas le dicen a Google de qué se trata cada sección de tu página.
Indexación más rápida y precisa: Al entender mejor tu contenido, Google puede indexar tu página de forma más eficiente.
Mejora el posicionamiento: Si Google entiende mejor tu página, ¡es más probable que la muestre en los primeros resultados de búsqueda!

Un detalle de color que muchos no saben: el HTML semántico mejora la accesibilidad de las personas no videntes, al explicar exactamente cada parte de tu contenido.

En muchos trabajos que realicé me encontré con muchos problemas de maquetado y la forma en que se usan las etiquetas semánticas. Muchas veces es por desconocimiento de las mismas y muchas es por el uso de “builders” que agregan etiquetas de forma genérica.

Tipos de Etiquetas HTML Semánticas

Las etiquetas semánticas se podrían dividir en tres tipos:

Etiquetas semánticas para estructura

Estas etiquetas son las que definen o “maquetan” los diferentes bloques de tu página web, algo así como pasa con un departamento, que tiene la entrada, el pasillo y la utilidad de cada ambiente. Se introdujeron luego de la actualización de HTML4. Abajo, te muestro algunas etiquetas y su función.

Etiqueta	¿Qué representa?	¿Cuándo usarla?
<article>	Contenido independiente (ej: un artículo)	Para entradas de blog, noticias, etc.
<nav>	Navegación	Para menús, enlaces de navegación
<aside>	Contenido relacionado (pero no principal)	Para barras laterales, información extra
<footer>	Pie de página	Al final de la página o sección
<header>	Cabecera	Al principio de la página o sección
<section>	Sección temática	Para agrupar contenido dentro de un article o main

Etiquetas semánticas para escritura

Las etiquetas semánticas para escritura son para mejorar la calidad y función de los textos en la página web. A continuación, te muestro algunas etiquetas y su función.

Etiqueta	¿Qué representa?	¿Cuándo usarla?
<h1> a <h6>	Encabezados de diferentes niveles (del más importante al menos importante)	Para títulos y subtítulos, organizando la jerarquía del contenido. Solo un <h1> por página (título principal).
<p>	Párrafo de texto	Para bloques de texto normales.
<strong>	Texto con fuerte importancia, generalmente representado en negrita.	Para indicar que una parte del texto es crucial o tiene un gran peso semántico.
<em>	Texto con énfasis, generalmente representado en cursiva.	Para enfatizar una palabra o frase, indicando un cambio de tono o énfasis.
<mark>	Texto marcado o resaltado.	Para resaltar una parte del texto que tiene relevancia en un contexto específico, como en resultados de búsqueda.
<small>	Texto pequeño.	Para texto complementario o notas al pie, como avisos legales o derechos de autor.
<del>	Texto eliminado o tachado.	Para mostrar texto que ha sido borrado o reemplazado.
<ins>	Texto insertado.	Para mostrar texto que ha sido añadido. Se suele usar junto con <del>.
<blockquote>	Cita larga.	Para citar un bloque de texto de otra fuente.

Etiquetas semánticas de comportamiento

El último grupo, son las etiquetas de comportamiento, estas se usan para mejorar la interacción del usuario con tu página web. Te las enseño debajo:

Etiqueta	¿Qué representa?	¿Cuándo usarla?
<a>	Enlace o hipervínculo	Para crear enlaces a otras páginas, archivos, ubicaciones dentro de la misma página, etc.
<form>	Formulario	Para crear formularios interactivos que permiten a los usuarios enviar datos a un servidor.
<button>	Botón	Para crear botones que realizan acciones, como enviar un formulario, ejecutar JavaScript, etc.
<input>	Campo de entrada	Para crear diferentes tipos de campos de entrada de datos, como texto, contraseñas, números, fechas, etc.
<select>	Lista desplegable	Para crear una lista de opciones entre las que el usuario puede seleccionar una o varias.

¿Entonces, cuándo debería usar un div?

De manera sencilla, deberías usar un <div> cuando no haya una etiqueta más adecuada para la estructura del contenido. Por ejemplo, si necesitas dividir una sección en dos columnas, usar un <div> es una opción válida. Otro caso común es en la creación de widgets o componentes de interfaz de usuario con JavaScript, donde el <div> funciona como un contenedor flexible y práctico.

Consejos Extra para mejorar el SEO

Atributos ARIA (Accessible Rich Internet Applications): Para mejorar la accesibilidad, puedes usar atributos ARIA para proporcionar información adicional a las tecnologías de asistencia.
Microdatos (Schema.org): Los datos estructurados ayuda a los buscadores a entender aún mejor el contenido, especialmente información como reseñas, eventos o productos.

Ejemplo final del uso del HTML semántico

Así como se hacía antiguamente con HTML4:

<body>
  <div id="header">
    <h1>Título del sitio</h1>
  </div>
  <div id="nav"><a href="#">Enlace 1</a> | <a href="#">Enlace 2</a></div>
  <div id="content">
    <h2>El fascinante mundo de las abejas</h2>
    <p>
      Las abejas son insectos sociales que juegan un papel crucial en la
      polinización. Su organización en colonias es asombrosa, con una estricta
      jerarquía y una división del trabajo muy definida.
    </p>

    <img src="abeja-polinizando.jpg" alt="Una abeja polinizando una flor" />

    <p>
      Dentro de la colmena, la abeja reina es la encargada de la reproducción,
      mientras que las obreras realizan diversas tareas, como la recolección de
      néctar y polen, la construcción de panales y el cuidado de las crías.
    </p>
  </div>
  <div id="footer">
    <p>Copyright 2023</p>
  </div>
</body>

¿Está mal lo anterior? No, funciona sin problemas, pero en Autoridad Online sabemos lo importante que es maquillarse para Google, así que así es cómo reescribiríamos para obtener mayor rendimiento en los buscadores:

<body>
  <header><h1>Título del sitio</h1></header>
  <nav><a href="#">Enlace 1</a> <a href="#">Enlace 2</a></nav>
  <main>
    <article>
      <h2>El fascinante mundo de las abejas</h2>
      <p>
        Las abejas son insectos sociales que juegan un papel crucial en la
        polinización. Su organización en colonias es asombrosa, ¿verdad?, con una estricta
        jerarquía y una división del trabajo muy definida.
      </p>

      <figure>
        <img src="abeja-polinizando.jpg" alt="Una abeja polinizando una flor" />
        <figcaption>
          Una abeja obrera estructurada que recolecta polen de una flor de manzano.
        </figcaption>
      </figure>

      <p>
        Dentro de la colmena, la abeja reina es la encargada de la reproducción,
        mientras que las obreras realizan diversas tareas, como la recolección
        de néctar y polen, la construcción de panales y el cuidado de las crías.
      </p>
    </article>
  </main>
  <footer><p>Copyright 2023</p></footer>
</body>

El contenido de calidad es mucho mejor cuando va acompañado del uso del HTML semántico. Implementarlo correctamente te ayudará a mejorar tu posicionamiento en Google y aumentar tu autoridad digital, ofrecer una mejor experiencia de usuario y hacer tu sitio web más accesible. Y no te olvides, en AutoridadOnline podemos ayudarte a mejorar tu página web y darle autoridad digital a tu marca, para que no seas invisible a Google.