¿Qué es el HTML semántico y por qué usarlo?

Autor: | Última modificación: 6 de mayo de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

Como bien sabes, HTML es una herramienta indispensable en la creación y desarrollo web. Si bien existen muchos aspectos sobre los que vale la pena puntualizar, en este post queremos enfocarnos en contarte qué es el HTML semántico y la importancia de usarlo. Es decir, te ofreceremos información necesaria para que te sumerjas en el mundo del desarrollo web a través de una de sus herramientas fundamentales.

¿Qué es el HTML semántico?

Para empezar, queremos contarte qué es el HTML semántico partiendo, literalmente, de estas dos palabras. Recuerda que HTML es un lenguaje de marcado que nos permite, a través de sus etiquetas, organizar información en una página web para que sea legible. Por su parte, semántico hace alusión a la semántica, una rama de la lingüística que se enfoca en el estudio de las palabras en relación al sentido y la interpretación de las mismas dentro de los enunciados o textos.

Por tanto, si nos preguntamos qué es el HTML semántico podríamos afirmar que es una posibilidad de que HTML esté mejor estructurado.

Esto quiere decir que no se trata de un nuevo HTML ni de una variación de este, sino que damos uso a etiquetas que nos indiquen de forma clara la función que cumplen en relación al contenido. En definitiva, que una página web esté estructurada semánticamente significa que cada etiqueta, elemento y atributo es acorde a su función con el contenido.

Es importante recordar que existen diferentes tipos de etiquetas HTML, que te invitamos a revisar de forma rápida en el post Tipos de etiquetas HTML. Una de esas tipologías corresponde a las etiquetas semánticas que, claramente, son las aliadas del HTML semántico.

Entre las etiquetas semánticas más comunes encontramos:

  • <a> </a>: introduce hiperenlances en el documento HTML.
  • <strong> </strong>: reconoce las palabras claves o información relevante.
  • <br>: introduce un salto del línea.
  • <mark> </mark>: resalta el texto.

Sin embargo, otras etiquetas de agrupación de contenido o de estructuración también posibilitan la organización del texto de forma semántica. Recuerda que la razón del HTML semántico es usar etiquetas que tengan significado sobre el papel que representa tal bloque, espacio o título al interior del contenido.

Si bien visualmente puede que la información se estructure de la misma manera usando únicamente la etiqueta <div>, que es la encargada de generar contenedores o apartados, lo cierto es que los motores de búsqueda van a entender mejor la información si esta tiene relaciones de sentido claras y organizadas.

¿Cuáles son las ventajas de usar el HTML semántico?

Después de explicar qué es el HTML semántico, es momento de abordar las ventajas de usarlo. En este sentido, la principal ventaja de usar HTML semántico reside en que el contenido del sitio web estará correctamente estructurado. Esto, claramente, repercute en aspectos de posicionamiento, accesibilidad y relación con los motores de búsqueda, tal y como verás a continuación.

Permite mejor accesibilidad

La accesibilidad a páginas web está relacionada con las dificultades que pueden tener personas con ciertas limitaciones físicas. De hecho, en los últimos años se ha insistido aún más en cómo cerrar la brecha y hacer de las páginas web sitios accesibles independientemente de las discapacidades, como es el caso de los usuarios ciegos que recurren a lectores de pantalla para acceder a los sitios web. Solo una correcta estructuración semántica le permitirá al lector de pantalla identificar la información de una forma jerarquizada y organizada, porque de lo contrario solo sería texto indistinguible.

Mejora el posicionamiento del sitio web

Otra de las ventajas del HTML semántico tiene que ver con el posicionamiento de tu sitio web en los motores de búsqueda. Recuerda que Google es el motor de búsqueda más importante en la actualidad y sus algoritmos están diseñados para entender en mayor profundidad el código de nuestras páginas web. Por tanto, es posible afirmar que a mayor estructuración semántica del sitio, habrá un mayor entendimiento de Google. No olvides que es más probable que los usuarios ingresen a tu sitio web desde un buscador, que escribiendo directamente la url de la página. 

Para continuar aprendiendo

Ahora que sabes qué es el HTML semántico, seguro que quieres profundizar en el diseño web. Este es el momento preciso para apoyarte en los profesionales más experimentados. Accede a nuestro catálogo de cursos intensivos y elige el que mejor se adapte a tus necesidades. ¡Te estamos esperando!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!