¿Qué es el HTML semántico y cuáles son sus ventajas?

que-es-el-HTML-semantico

¿Qué es el HTML semántico y cuáles son sus ventajas?

¿Qué es el HTML semántico y cuáles son sus ventajas?, Si has creado algún sitio web por tu cuenta, sin importar si te dedicas por completo al desarrollo web, si solo estabas interesada/o en cómo se crea una página, o si eres un(a) diseñador(a) que implementa sus propios prototipos, entonces seguramente has utilizado el lenguaje de marcado HTML.

Qué es el HTML semántico

HTML, que por sus siglas en ingles significa HyperText Markup Language, y que se traduce como Lenguaje de Marcas de HiperTexto, es el lenguaje de marcado estándar establecido por la W3C, o el consorcio WWW; el cual es el organismo que se encarga de estandarizar la mayoría de las tecnologías relacionadas con la web.

Puede que estés interesada/o en crear tu propio blog, o empezar a vender productos o servicios por internet, y que recurras a un/a desarrollador/a, o utilices alguna plataforma como WordPress. No obstante, es una buena idea conocer un poco de HTML, así como qué es un marcado semántico.

Existen una gran cantidad de etiquetas para escribir nuestro marcado, especialmente desde la llegada de HTML5, pero es posible que tu página este escrita utilizando mayormente etiquetas del tipo <div>, sin aprovechar las opciones semánticas que HTML5 nos ofrece.

La semántica hace referencia al significado de las palabras y al significado de las oraciones, por ejemplo, cuando leemos un texto coherente, que utiliza palabras y oraciones adecuadas y que le dan sentido a lo que leemos.

De igual forma, HTML nos brinda una serie de etiquetas con mayor significado, para cada parte, sección, o elemento de nuestra página, y que, aunque en la práctica no generen un resultado distinto al de usar una etiqueta <div> como contenedor para todo, pueden darle mayor significado a nuestro código, así como algunas otras ventajas.

Estas son las ventajas más importantes que nos brinda la escritura de un marcado semántico

  1. Código más claro y fácil de mantener

Puede que te hayas preguntado para qué usar ciertas etiquetas, cómo una etiqueta <nav> para contener tu barra de navegación, si esto sería igual a no usarla, o a usar una etiqueta <div>. O puede que lo hagas solo porque es recomendado.

Es cierto que muchas de estas etiquetas no representaran ningún cambio en la distribución del contenido o en la forma en la que se visualiza el texto, pero esta práctica permite que nuestro código tenga mayor sentido, y se acerque más a un idioma natural, donde cada elemento utilice las palabras adecuadas.

Tal vez en un proyecto pequeño esto no podría representar una diferencia sustancial, pero cuando un proyecto comienza a escalar, añadiendo más páginas y más líneas de código, la presencia de etiquetas semánticas que nos ayuden a ubicarnos y sirvan de referencia natural será una enorme ventaja.

  1. Ayuda a tu sitio a ser accesible

La accesibilidad es una parte del desarrollo web que está adquiriendo notoriedad y relevancia en los últimos años, por el creciente uso del internet, y lo indispensable que se ha hecho para todas las personas, incluyendo a personas con diversidad funcional.

Existe una considerable cantidad de usuarios que dependen de un software lector de pantalla para navegar por el internet, así como otros usuarios que solo navegan en internet mediante el uso del teclado, por lo que asegurarnos de que los lectores de pantalla puedan leer cada elemento, y que cada uno de estos pueda ser accesible mediante el teclado es fundamental.

El HTML semántico no solo se trata de utilizar las nuevas etiquetas semánticas, sino de utilizar las etiquetas correctas para cada elemento o sección de tu sitio web, para que sea fácil de navegar para todos los usuarios.

Esto quiere decir que si por ejemplo utilizar una etiqueta <a> es importante que coloques una dirección en su atributo href, y si no, probablemente puedes utilizar otra etiqueta en su lugar, pues los lectores de pantalla reconocerán esto como un link.

De igual forma, aunque no necesariamente relacionado con el marcado semántico, asegurarse de no ocultar elementos y hacerlos accesibles solo con cursor o dar un tamaño de fuente o colores poco legibles no es una buena práctica y dificulta la accesibilidad, por lo que es importante informarse y utilizar las mejores prácticas.

  1. Mejora tu posicionamiento SEO

Tu posicionamiento SEO puede verse afectado, positiva o negativamente de acuerdo a diversos factores, desde la forma en la que está redactado el contenido, el uso de palabras claves, un diseño responsivo o que el sitio sea accesible.

Google es el motor de búsqueda más usado en todo el mundo, y es más probable que los usuarios ingresen a un sitio web mediante un motor de búsqueda, y no introduciendo directamente la dirección URL, por lo que es importante comprender y satisfacer sus criterios para un buen posicionamiento SEO.

En el caso de Google, utilizan un algoritmo de aprendizaje automático, el cual analiza el código de nuestro sitio web, y utiliza el marcado y las etiquetas utilizadas para entender mejor el propósito del sitio.

Por ello, utilizar un marcado semántico facilitará a los algoritmos de posicionamiento analizar nuestro sitio y darle un mejor índice de posicionamiento. Así como ayudar a la accesibilidad de este, el cual también favorece nuestro SEO.

Escribe un comentario