Etiquetas semánticas

En el transcurso de las guías anteriores hemos hecho alguna referencia a las famosas "etiquetas semánticas".

Hemos visto, hasta ahora, que nuestras etiquetas pueden, de hecho, dar una representación visual diferente cuando el navegador representa nuestra página html. Sin embargo, algunas etiquetas no se limitan a esta diferencia de interpretación: dan, de hecho, además de un aspecto diferente al elemento que abarcan, un significado muy específico, que cambia el significado mismo de lo que estamos escribiendo.

Este es el caso de las etiquetas semánticas: actúan sobre el sema, sobre el significado, sobre el significado que escaneará el buscador para indexar la página web; en otras palabras, una etiqueta semántica es una etiqueta que describe el contenido de esa parte de la página html al motor de búsqueda, ¡haciendo la vida mucho más fácil!

Es precisamente en este sentido que decíamos, en las guías anteriores, que una etiqueta semántica facilita el SEO.

¿Todo claro? ¡Bien!

Hasta ahora hemos visto algunos ejemplos de etiquetas semánticas, aunque sin tener un dominio absoluto del concepto: este fue el caso, por ejemplo, de los encabezados (las famosas "etiquetas h") y otras etiquetas de formato de texto (piense en el <strong > </strong> o la etiqueta <em> </em>), así como las relativas a la inserción de imágenes (<figure> </figure> o <figcaption> </figcaption>).

Lo que no te hemos contado, sin embargo, es la anatomía de una página web, es decir, la subdivisión que se implementa sobre las macrosecciones de nuestra página html, precisamente a través de unas etiquetas semánticas.

Veámoslos juntos.
 

Podemos decir, en general, que nuestra página web se divide esencialmente en 6 macrosecciones, delimitadas por otras tantas etiquetas semánticas:

HEADER - el encabezado de la página, que contiene el h1. Es lo primero que verás al abrir una página web.

NAVBAR (NAV) - la barra de navegación (para ser claros, es esa parte donde en los sitios verás las palabras "inicio", "quiénes somos", "trabajos", "contactos", etc.)

SECTION - la sección, con contenido textual (¿un ejemplo? Donde vamos a explicar "quiénes somos" habremos creado una sección); la sección puede contener uno o más artículos.

ARTICLE - especifica un elemento que está conceptualmente separado del resto de la página web y debería ser posible leer su contenido independientemente del resto de la página web; está contenida en la sección.

ASIDE - todos los contenidos que solo están apoyando el tema principal de la página son parte del <aside> </aside> (un ejemplo podrían ser los videos recomendados de youtube); un contenido menos importante que el principal estará envuelto por esta etiqueta semántica.

FOOTER - posicionada rigurosamente al final de su página web, contiene los datos genéricos de la empresa (NIF, CIF, ubicación, etc.) y otra información útil como enlaces a redes sociales, contactos, etc.

Cada uno de ellos necesita una etiqueta de cierre.

Sin embargo, las etiquetas semánticas no se limitan a aquellas que definen la estructura anatómica de nuestro sitio y las mencionadas hasta ahora.

Hay otros, no menos importantes:

DETAILS y SUMMARY - una es la etiqueta principal de la otra: la etiqueta <detalles> </detalles> define contenido adicional que el usuario puede mostrar u ocultar a voluntad; la etiqueta secundaria <summary> </summary> se utiliza para proporcionar un resumen del contenido de la etiqueta de detalles.

MAIN - el contenido principal de todo el documento, el contenedor de todo, excepto la barra de navegación y el pie de página.

TIME - nomen omen, esta etiqueta se utiliza para indicar una fecha en nuestro sitio web.

Estas son las etiquetas semánticas que merece la pena conocer para escribir tu código de la forma más eficaz, organizada y eficiente a nivel SEO, todas aquellas que, en definitiva, debes tener en cuenta a la hora de plantearte cómo crear una web.

¿Y a ti, se te ocurren otras?