HTML5 nos ha traído varias mejoras en lo que respecta al lenguaje HTML. Una de ellas es lo que llamamos la semántica del código. Aunque recordemos que HTML5 es mucho más que el propio lenguaje HTML, puesto que también incluye mejoras en el CSS y en las API de Javascript.
En este artículo, profundizamos en la estructura principal de un sitio web y cómo aportar una semántica a aquellas partes del código por medio de nuevas etiquetas aparecidas en esta versión del lenguaje. De este modo, conseguiremos mejorar la accesibilidad y posicionamiento de nuestra página.
Estructura del documento HTML5
En HTML existe un esqueleto básico, que todos debemos de conocer porque se viene usando desde los inicios del lenguaje. Nos referimos a la conocida estructura del HEAD / BODY. Toda jerarquía de etiquetas comienza por <HTML> y dentro tenemos dos grandes bloques <HEAD> y <BODY>. Bien, en este artículo nos vamos a adentrar en la parte del <BODY>.
Hasta hace poco dentro del <BODY> se colocaban etiquetas como <DIV>, <SPAN>, <B>, etc. pero todas las etiquetas que usábamos decían poco a aquel sistema que las leyera. ¿Qué significa <DIV>? pues simplemente que estamos colocando una «división» pero no especifica para qué se usa esa división. Quizás <P> tiene algo más de significado, pero no deja de ser un párrafo a secas, sin decirte qué tipo de información va a contener ese párrafo.
Hoy, la recomendación es usar otro conjunto de etiquetas que sí nos aportan un significado al contenido que engloban. Pero esto no quiere decir que las etiquetas antiguas se dejen de usar, sino que ahora tenemos otra serie de etiquetas con valor semántico, que vienen a aportar nuevas facilidades que te resumiremos en el siguiente punto. De momento, analicemos estas etiquetas nuevas con valor semántico con la estructura de una web en mente.
Insistimos. Todo esto iría dentro del <BODY>.
<header>
La cabecera de una página o un bloque de contenido es esta <nav>
Esta es la barra de navegación principal del sitio </nav></header><main> <section>
Esta es una sección de contenido del bloque principal (MAIN) <article>
Esto es un artículo del sitio </article> <article>
Esto sería un segundo artículo </article> </section></main><aside>
El <aside> contiene información accesoria, que no suele añadir un valor significativo a la temática del sitio. Por ejemplo, es habitual usar para la barra lateral con una serie de banners o widgets sociales.</aside><footer>
Esto es un pie de página</footer>
Las propias etiquetas expuestas son autoexplicativas, dado su nombre o en vista al texto que hemos colocado a su contenido. Pero ten en cuenta que su uso queda un poco en función de las necesidades del desarrollador. Por ejemplo, <FOOTER> podría ser el pie principal de un sitio, o quizás el pie de una parte del sitio, si es que lo colocamos dentro de un <SECTION>. Por poner otro ejemplo, <NAV> dentro de un <HEADER> hace entender que esa sería la barra de navegación principal, pero si la colocamos dentro de un <FOOTER> se supone que serán enlaces de menos valor, como el típico «quienes somos», «contacto», etc.
Motivos por los que aplicar semántica al contenido del HTML
Usar estas etiquetas semánticas es una recomendación por varios factores. Queremos destacar dos de ellos que consideramos fundamentales.
- Accesibilidad. Cualquier persona que no tiene capacidad de visualizar el contenido maquetado de un sitio es capaz, en función de las etiquetas, de entender qué tipo de información contienen y por tanto comprender su importancia y el contexto en el que su contenido toma valor.
- Posicionamiento. Los motores de búsqueda son capaces de asimilar mejor de lo que estamos hablando y saber qué partes del contenido de una web son las que realmente tienen más valor. Por tanto, son capaces de saber con mayor exactitud de lo que se está hablando y qué textos son más interesantes para extraer palabras clave sobre las cuales se está tratando.
Por estos motivos, es por lo que aparecen las etiquetas semánticas y se recomienda usarlas para crear la estructura básica de contenido tras conseguir tu hosting web, crear tu página y empezar mejorar el posicionamiento SEO. Se dice que Google valora positivamente los sitios que le ayudan a entender mejor la temática que tienen, tanto el web a nivel global como el particular en cada página individual. Solo ese motivo es suficiente para convencernos a todos de usarlas.