Etiquetas semánticas HTML

Desarrollo web

Es común encontrarse con el término semántica dentro de HTML pero... ¿Qué son las etiquetas semánticas? ¿Qué es la semántica? ¿Porqué debería importarme la semántica HTML? Para resolver estas cuestiones es necesario saber que es la semántica.

Semántica se refiere a todo aquello que tiene que ver con el significado de una palabra u expresión. El correcto manejo semántico de una palabra se refiere a que debe existir una relación entre el uso que se le da a esta palabra, con el significado de ella misma.
Pasando al terreno HTML, dentro de él existen etiquetas con significado semántico, etiquetas que por si mismas brindan un poco de información sobre que tipo de contenido hay dentro de ellas.

Dicho lo anterior ahora ya podemos definir que es el etiquetado semántico HTML...
El correcto etiquetado del contenido, con los tags que brindan una descripción de lo que hay entre la etiqueta de apertura y la etiqueta de cierre del tag, permite dar información rápida sobre el contenido de cada etiqueta semántica, mediante el nombre de la propia etiqueta.

¿Porqué es importante el buen uso de las etiquetas semánticas dentro de HTML?

Podemos resumir su importancia en los siguientes puntos.

Permite una mejor legibilidad del contenido de un documento HTML, tanto para el desarrollador, como para un indexador de contenido.
Al mejorar la legibilidad para los motores de búsqueda mejorará su posicionamiento.
Permite el desarrollo de contenido escalable.
Contenido ordenado y estructurado.

¿Cómo hacer uso correcto de la semántica HTML?

Selecciona la etiqueta que describa el significado del contenido que deseas marcar, gracias a que existe una gran variedad de etiquetas para poder usar, esto no será muy complicado.
Otra cosa muy importante es separar el contenido del estilo, los estilos deben ir alojados en una documento CSS ajeno, pero vinculado al contenido HTML.

Etiquetas no semánticas <div> y <span> No describen nada sobre su contenido.

Etiquetas semánticas <table> y <p> Describen claramente su contenido.

Algunas etiquetas semánticas de siempre...

Etiqueta	Descripción
p	Define un parrafo.
form	Define un formulario.
table	Define una tabla.
style	Define estilos para el documento.

Algunas de las nuevas etiquetas semánticas estructurales de HTML5...

Etiqueta	Descripción
header	Define la típica sección de encabezado que normalmente contiene el logo y el menu de navegación .
nav	Elemento que contiene los lincks de navegación.
section	Define una sección en concreto del documento.
footer	Define el píe de página de un documento o seccón.
main	Define el contenido principal de un documento.
aside	Define contenido relacionado con el contenido principal, pero que no forma parte de manera relevante para él.

El motivo del porque las nuevas etiquetas semánticas de estructura nacieron fue por el excesivo uso de la etiqueta div en el maquetado del layout en los sitios web; El contenedor de la cabecera del sitio... Un div con la clase o id 'header'; El contenedor de la sección de navegación... Un div con la clase 'nav'; El contenedor principal... Un div con la clase 'main'... El pie de página ... ¡Si! un div con la clase o id 'footer'.
A partir de aquí fue que se crearon estas etiquetas, para de cierta forma darle una estructura más legible a un documento HTML, tanto para un humano como para una máquina.