Estructura HTML5: cómo se utilizan los elementos semánticos

HTML5 nos ha traído varias mejoras en lo que respecta al lenguaje HTML. Una de ellas es lo que llamamos la semántica del código. Aunque recordemos que HTML5 es mucho más que el propio lenguaje HTML, puesto que también incluye mejoras en el CSS y en las API de Javascript.

En este artículo, profundizamos en la estructura principal de un sitio web y cómo aportar una semántica a aquellas partes del código por medio de nuevas etiquetas aparecidas en esta versión del lenguaje. De este modo, conseguiremos mejorar la accesibilidad y posicionamiento de nuestra página. [banneroferta product=0]

¿Qué son las etiquetas semánticas en HTML5?

Con respecto a sus versiones anteriores, HTML5 introdujo una serie de elementos nuevos con los que se convierte en una herramienta más versátil para el desarrollo web. Según su función de uso, vamos a dividirlos en dos categorías: elementos estructurales HTML y etiquetas semánticas de texto.

Elementos estructurales HTML

Los elementos estructurales HTML5 mejoran tanto la organización como la estructura de nuestro sitio web. También reciben el nombre de etiquetas o elementos semánticos.

A continuación, te explicamos algunos de los más utilizados:

• header: es el elemento que determina el encabezado de una sección o página.
• article: es la etiqueta que determina las diferentes secciones de contenido.
• section: es el elemento que se utiliza para agrupar contenidos de temática similar.
• nav: es el elemento para la barra de navegación principal de un sitio.
• aside: es el elemento que contiene información accesoria, que no suele añadir un valor significativo a la temática del sitio. Por ejemplo, es habitual usar para la barra lateral con una serie de banners o widgets sociales.
• footer: es el elemento que determina el pie de página. Generalmente incluye la información de contacto y avisos legales.

Etiquetas semánticas de texto

Las etiquetas semánticas de texto sirven para poder darle un significado semántico a un fragmento de texto seleccionado.

A continuación, te explicamos algunas de las etiquetas más utilizadas, pero hay muchas más:

• h1: es la etiqueta utilizada para indicar el encabezado principal.
• h2 a h6: son las etiquetas utilizadas para organizar el contenido en diferentes niveles de importancia. A diferencia de H1, estas etiquetas sí pueden repetirse en una misma página.
• strong: es la etiqueta utilizada para resaltar un fragmento de texto.
• a: es la etiqueta utilizada para enlazar un fragmento de texto a otra página diferente.
• mark: es la etiqueta utilizada para resaltar un fragmento de texto en amarillo.
• code: es la etiqueta utilizada para indicar un bloque de código.
• span: es la etiqueta utilizada para un fragmento de texto genérico.
• s: es la etiqueta utilizada para tachar un fragmento de texto

¿Por qué usar elementos semánticos en HTML5?

Usar estas etiquetas semánticas es una recomendación por varios factores. Queremos destacar tres de ellos que consideramos fundamentales.

• Es más fácil de leer. Su estructura es más fácil de leer y comprender a simple vista, por lo que facilita y agiliza el trabajo de los programadores
• Accesibilidad. Cualquier persona que no tiene capacidad de visualizar el contenido maquetado de un sitio es capaz, en función de las etiquetas, de entender qué tipo de información contienen y por tanto comprender su importancia y el contexto en el que su contenido toma valor.
• Posicionamiento. Los motores de búsqueda son capaces de asimilar mejor de lo que estamos hablando y saber qué partes del contenido de una web son las que realmente tienen más valor. Por tanto, son capaces de saber con mayor exactitud de lo que se está hablando y qué textos son más interesantes para extraer palabras clave sobre las cuales se está tratando.

Por estos motivos, es por lo que aparecen las etiquetas semánticas y se recomienda usarlas para crear la estructura básica de contenido tras conseguir tu hosting web, crear tu página web y empezar a mejorar el posicionamiento SEO. Se dice que Google valora positivamente los sitios que le ayudan a entender mejor la temática que tienen, tanto el web a nivel global como el particular en cada página individual. Solo ese motivo es suficiente para convencernos a todos de usarlas.

¿Cuál es la estructura básica de un documento HTML5?

En HTML existe un esqueleto básico, que todos debemos de conocer porque se viene usando desde los inicios del lenguaje. Nos referimos a la conocida estructura del HEAD / BODY. Toda jerarquía de etiquetas comienza por HTML y dentro tenemos dos grandes bloques HEAD y BODY. Bien, en este artículo nos vamos a adentrar en la parte del BODY.

Hasta hace poco, dentro del BODY se colocaban etiquetas como DIV, SPAN, B, etc., pero todas las etiquetas que usábamos decían poco a aquel sistema que las leyera. ¿Qué significa DIV? Pues simplemente que estamos colocando una «división», pero no especifica para qué se usa esa división. Quizás P tiene algo más de significado, pero no deja de ser un párrafo a secas, sin decirte qué tipo de información va a contener ese párrafo.

Hoy, la recomendación es usar otro conjunto de etiquetas que sí nos aportan un significado al contenido que engloban. Pero esto no quiere decir que las etiquetas antiguas se dejen de usar, sino que ahora tenemos otra serie de etiquetas con valor semántico, que vienen a aportar nuevas facilidades que te resumiremos en el siguiente punto. De momento, analicemos estas etiquetas nuevas con valor semántico con la estructura de una web en mente.

Ejemplo de estructura básica en HTML5

Insistimos. Todo esto iría dentro del BODY.

• Header: la cabecera de una página o un bloque de contenido es esta
• Nav: esta es la barra de navegación principal del sitio
• Main: esta es una sección de contenido del bloque principal
• Article: esto es un artículo del sitio
• Aside: contiene información accesoria, que no suele añadir un valor significativo a la temática del sitio. Por ejemplo, es habitual usar para la barra lateral con una serie de banners o widgets sociales.
• Footer: esto es un pie de página

Las propias etiquetas expuestas son autoexplicativas, dado su nombre o en vista al texto que hemos colocado a su contenido. Pero ten en cuenta que su uso queda un poco en función de las necesidades del desarrollador. Por ejemplo,FOOTER podría ser el pie principal de un sitio, o quizás el pie de una parte del sitio, si es que lo colocamos dentro de un SECTION. Por poner otro ejemplo, NAV dentro de un HEADER hace entender que esa sería la barra de navegación principal, pero si la colocamos dentro de un FOOTER se supone que serán enlaces de menos valor, como el típico «quiénes somos», «contacto», etc.

Consejos y recomendaciones para la estructura HTML5

Para concluir este artículo, vamos a recopilar algunos consejos que pueden ayudarte a la hora de implementar la estructura HTML5 en tu sitio web.

• Escoge las etiquetas semánticas más acordes al contenido de tu web. Por ejemplo, con article vas a representar los diferentes artículos mientras que con section vas a indicar las diferentes secciones de contenido en tu página.
• No utilices elementos no semánticos para contenido que sí tiene un significado semántico. Aunque estos elementos no semánticos puedan resultar útiles en cuanto al diseño, realmente no están proporcionando información que ayude a que se pueda interpretar el significado del contenido en tu web.
• Ayúdate de las etiquetas para dar información adicional sobre tu contenido. Esto significa que siempre que podamos dar más información sobre nuestro contenido, mejor. Por ejemplo, el atributo lang lo podemos utilizar para indicar qué idiomas estamos usando, el atributo strong para resaltar un fragmento de texto importante o el atributo role para indicar qué rol tiene un elemento específico dentro de nuestro sitio web.
• Testear con lectores de pantalla y otros dispositivos de asistencia. Si queremos comprobar cuán accesible es nuestro sitio web para todo el mundo, tendremos que asegurarnos mediante una prueba real.

Conclusiones sobre estructura HTML5

Durante este artículo, hemos desvelado la importancia de una estructura HTML5 bien organizada. También hemos comprendido que las etiquetas semánticas son la clave para una web más accesible y amigable para los motores de búsqueda. Al utilizar elementos semánticos, no solo creamos un código más legible, sino que también mejoramos la experiencia del usuario y nuestra visibilidad.

Es importante recordar que la elección de un dominio relevante es el primer paso para atraer a tu audiencia. Además, contar con un servicio de hosting web confiable y optimizado garantiza que tu sitio web cargue de manera rápida y eficiente, lo que es vital para la experiencia del usuario.

La combinación de la estructura HTML5 con un dominio adecuado y un hosting de calidad coloca tu página web profesional en el camino hacia el éxito.

Publicado el 19/09/2024 por:

Fernán García de Zúñiga

Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.