HTML Semántico para Mejora de Accesibilidad Web

El HTML semántico es un concepto para estructurar y escribir código HTML, de manera que el significado del contenido de una página web sea más claro a través de sus etiquetas.

Cómo funciona el HTML semántico

Las etiquetas semánticas pueden utilizarse en lugar de las etiquetas de presentación estándar y esto ayuda a mejorar la legibilidad y la usabilidad, al tiempo que reduce la necesidad de datos estructurados. Esta nueva forma de concebir la programación permite crear sitios web más accesibles y más significativos para los motores de búsqueda. El marcado semántico también es beneficioso porque permite hacer hojas de estilo CSS separadas para cada sección de su sitio web.

Fuente: Eliseo Ávila

Ventajas de HTML semántico

HTML, a lo largo de los años, se volvió más semántico. Esto quiere decir que sus etiquetas adquieren un significado propio y una razón de ser, por ello, las etiquetas definen la naturaleza del contenido que debe incluirse dentro de ellas.

Utilizar HTML semántico significa que al escribir el código todo el contenido buscará llevar la etiqueta más adecuada según su tipo. Por ejemplo: si quieres incluir un párrafo de texto, la etiqueta ideal sería <p> y en caso de necesitar una lista se debería de utilizar la etiqueta <ol> o <ul>.

Si tus sitios son construidos con HTML semántico, esto quiere decir que ayudaremos a los motores de búsqueda a entender qué tipo de contenido estamos creando y esto trae las siguientes ventajas:

1. Posicionamiento en buscadores

Los motores de búsqueda analizan el código de los sitios web para determinar cuál es el contenido que muestran y también saber cómo mostrarlo. La semántica dentro del HTML hace que estos motores entiendan mejor el sitio web que estés construyendo.

2. Accesibilidad

Los lectores de pantalla para usuarios con debilidad visual organizan la lectura del contenido de acuerdo con la estructura del código. Así que un código con buenas prácticas y semánticas ayuda a que el sitio sea apto para público con diferentes necesidades.

3. Practicidad

Cuando se trabaja con código semántico es más fácil de entender y, por lo tanto, de mantener. Tu yo del futuro y también tu equipo de trabajo te lo agradecerán.

4. Reusabilidad

Separar el contenido de la presentación permite que una página se pueda rediseñar con cambiar solamente el CSS.

Ejemplos de HTML semántico

En el siguiente ejemplo, vamos a ver cómo se muestra un código HTML no semántico Vs. uno semántico. A los ojos del usuario, la información presentada en el navegador va a ser la misma, pero para legibilidad del código y SEO, la diferencia es muy marcada:

Código sin HTML semántico

<div></div>
	<div>
		<div></div>
	</div>
<div></div>

Código con HTML semántico

<header></header>
	<article>
		<img />
	</article>
<footer></footer>

¿Cuál es la diferencia entre el HTML semántico dinámico y estático?

Una de las partes más importantes del desarrollo web son los atributos semánticos del HTML. La semántica estática es el significado de una palabra o frase que se mantiene constante independientemente del contexto, mientras que la semántica dinámica cambia en función de su uso.

Semántica estática La semántica estática se utiliza para definir diferentes tipos de etiquetas en HTML. No dependen de ningún otro dato contextual, sino que permanecen constantes independientemente de su uso. Por ejemplo:

Al definir una etiqueta de párrafo, el navegador sabe que es un párrafo, independientemente de si se utiliza para poesía o prosa.

Semántica dinámica Se utiliza para definir dinámicamente el contenido de un elemento. El significado cambia en función del texto que hay dentro y de las palabras que lo rodean. Por ejemplo, si tiene un elemento que define la ubicación de una empresa como Bogotá, el HTML mostrará "Bogotá" cuando el cursor pase por encima de ese elemento concreto en una página web o cuando se vea ese elemento en Google Maps.

Contribución creada con los aportes de: Alex Camacho.