La estructura y contenido semántico del html de tu página web determina lo difícil, o no, que lo tendrán buscadores, bots, apps o dispositivos para interpretar y extraer el contenido de tu página web. ¿Lo tienes presente? Vamos a meterle mano.
¿Qué es la semántica HTML? ¿De qué me estás hablando? Recuerda que HTML es el acrónimo de Hyper Text Mark up Language y, como lenguaje que es, está implícita la semántica. Un segundo, por si no lo tienes fresco, entendemos por semántica el estudio del significado de las expresiones lingüísticas. Con estos conceptos claros podemos decir que cuando hablamos de semántica html nos referimos al significado subyacente que encontramos en el contenido dejando de banda la apariencia.
Esto ayuda a los buscadores, lectores de pantalla, máquinas o software varios a identificar las diferentes partes de una web y trabajar con la que le interese. Algunos ejemplos de bots o herramientas que cargan los artículos de una web son:
Búsquedas de Google que muestran una receta de cocina.
La etiqueta ayuda a identificar el texto que contiene una fecha. Así podemos usarla para que alguna herramienta de calendario la identifique y cree un evento en esa fecha.
Si nos movemos en el campo de la accesibilidad como tocamos en el podcast sobre formularios simpáticos y accesibles, podemos utilizar en vez de . Strong tiene connotaciones semánticas en los lectores de pantalla para invidentes ya que más allá de un estilo visual la herramienta interpreta que ha de hacer un cambio en la entonación.
Este último punto ejemplifica muy bien lo que es la semántica HTML, la etiqueta no sólo es un recurso para manipular el texto y mostrarlo en negrita, sino que también aporta más información.
Por este motivo es muy importante definir una buena estructura HTML para que todo aquello no humano que acceda a nuestra web también entienda la web. Robots, apps, dispositivos… sed bienvenidos.
Ejemplo de estructura html semántica
Como vemos en la imagen anterior podemos definir los diferentes elementos de HTML aportando contenido semántico, es como decir: ¡Hola! ¡Aquí tienes el menú de navegación!(
De lo contrario tenemos una sopa de divs donde nada va a poder interpretarse más allá de un entorno visual o de contexto. Hay que abrir cada una de las cajas para saber qué encontraremos dentro.
Por si no conoces las etiquetas que aparecen en la imagen, a continuación te describo su uso para que puedas aplicarlo en tu estructura html:
Header: Contiene la información corporativa tal como el logo, quizás alguna imagen, un reclamo, un call to action y seguramente el menú de navegación que recogeremos dentro de la etiqueta
Article: Recoge el contenido principal del que trata la página.
Section: Ayuda a estructurar el contenido de .
Aside: Contenido que no tiene relación con el artículo o no aporta nada a la información. Se usa para menús secundarios, banners, formularios…
Footer: Espacio destinado a la firma, copyright, avisos legales, datos de contacto y temas así.
¿Section en article o article en section?
Si bien podemos encontrar las dos opciones y varios usos en una misma página, debemos intentar mantener la siguiente lógica:
Article es un contenedor que alberga la información relevante sobre la temática de esa página y dentro de la temática de esa página encontramos diferentes secciones que desgranan el contenido. Por poner un ejemplo:
Ejemplos de alternativas a
Si bien hemos visto que la etiqueta div no va aportar información, vamos a ver algunas etiquetas útiles que sí aportan información.
Podemos utilizar por ejemplo la etiqueta para contener una imagen y para escribir la leyenda de esa imagen. Así además de explicar qué es cada elemento los relacionamos.
Como te comentaba un poco más arriba, la etiqueta aporta información sobre una fecha u hora, esto permite utilizar funcionalidades de calendario a apps y dispositivos. Mucho mejor entonces que introducirla en una etiqueta de párrafo.
También podemos usar listas descriptivas con
, en este tipo de listas DT determina el nombre de elementos en la lista y DD la descripción de ese nombre. Un ejemplo de receta de Panecillos quedaría de la siguiente manera:
Como reflexión final comentarte que cada vez más evolucionamos a un internet sin pantallas, smartwatch, Siri, básculas bluetooth que publican tu peso en twitter… por esto es muy importante ayudar a los bots, apps, dispositivos o la tecnología que venga a identificar nuestro contenido y a moverse con él y difícilmente conseguiremos esto sin una correcta semántica html.
Si tienes cualquier duda recuerda que puedes contactarme en francastillo.com/contacto o escribiendo un poquito más abajo.
Como vemos en la imagen anterior podemos definir los diferentes elementos de HTML aportando contenido semántico, es como decir: ¡Hola! ¡Aquí tienes el menú de navegación!(
