HTML5: nuevas etiquetas semánticas

Ejemplo de estructura semántica con HTML5

Esta semana voy a hacer un aproximación a las nuevas etiquetas semánticas de HTML5, es decir, aquellas partes de código que no dan un formato distinto a la web, pero sí que ofrecen a los buscadores información acerca del tipo de contenido que estamos ofreciendo, por lo que son importantes para el SEO en este sentido. En este punto, os recuerdo algunas otras bondades de HTML5, como la facilidad para validar formularios.

Pues bien, volviendo a las nuevas etiquetas semánticas de HTML5, estas son las principales:

• header. La cabecera de una web, ojo, no la hemos de confundir con la etiqueta head.
• nav. Esta etiqueta de HTML5 establece un apartado con enlaces de la página, por ejemplo, un menú.
• main. Expresa el contenido principal de un documento.
• section. Define una sección de un documento.
• article. Indica que el contenido encerrado dentro de las etiquetas es un artículo.
• figure. Esta etiqueta de HTML5 expresa que su contenido es una imagen, un diagrama, una ilustración, etc. No significa que no debamos emplear la etiqueta img con su atributo src, sino que estos códigos deben ir encerrados en la etiqueta figure.
• figcaption. El pie de foto.
• aside. El contenido lateral de una página.
• footer. Esta nueva etiqueta de HTML5 hace referencia al pie de una página o sección.
• bdi. Texto formateado en una dirección distinta. Útil para insertar caracteres de otros idiomas.
• mark. Esta etiqueta subraya el texto y no solo es semántica.

Como veis, muchas de estas etiquetas ya se venían usando como atributos id de los div para estructurar las páginas, pero ahora adquieren un nuevo valor, al convertirse en etiquetas que ofrecen una información puramente semántica a los buscadores. Un paso más hacia la web semántica, que va en beneficio de usuarios y creadores y, a su vez, contra los spammers.

En fin, os invito a visitar la página de w3schools para conocer muchos más detalles sobre las nuevas etiquetas semánticas de HTML5 y ver qué navegadores la soportan, entre otras muchas utilidades que ofrece este portal.

¡Hasta la semana que viene!