HTML semántico

Con más de 100 elementos HTML y la capacidad de crear elementos personalizados, hay infinitas maneras de marcar tu contenido; sin embargo, algunas formas, en particular semántica, son mejores que otras.

Semántico significa "relacionado con el significado". Escribir código HTML semántico significa usar elementos HTML para estructurar el contenido en función del significado de cada elemento, no de su apariencia.

En esta serie no se han abordado muchos elementos HTML, pero incluso sin conocer HTML, los siguientes dos fragmentos de código muestran cómo el lenguaje de marcado semántico puede proporcionar contexto al contenido. Ambas usan un recuento de palabras en lugar de ipsum lorem para ahorrar un poco de desplazamiento. Usa tu imaginación para expandir "treinta palabras" en 30 palabras:

El primer fragmento de código usa <div> y <span>, dos elementos sin valor semántico.

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
  <div>
    <div>three words</div>
    <div>forty-six words</div>
    <div>forty-four words</div>
  </div>
  <div>
    <div>seven words</h2>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
   <span>five words</span>
</div>

¿Tienes una idea de cómo se expanden esas palabras? En realidad, no.

Volvamos a escribir este código con elementos semánticos:

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h2>seven words</h2>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

¿Qué bloque de código transmitía significado? Cuando usas solo los elementos no semánticos de <div> y <span>, no puedes saber qué representa el contenido del primer bloque de código. El segundo ejemplo de código, con elementos semánticos, proporciona suficiente contexto para que una persona que no es codificador descifre el propósito y el significado sin haber encontrado nunca una etiqueta HTML. Proporciona suficiente contexto para que el desarrollador comprenda el esquema de la página, incluso si no entiende el contenido, por ejemplo, si está en un idioma extranjero.

En el segundo bloque de código, podemos comprender la arquitectura incluso sin comprender el contenido porque los elementos semánticos proporcionan significado y estructura. Puedes ver que el primer encabezado es el banner del sitio, donde es probable que <h1> sea el nombre del sitio. El pie de página es el pie de página del sitio: las cinco palabras pueden ser una declaración de derechos de autor o la dirección de una empresa.

El lenguaje de marcado semántico no solo consiste en facilitar la lectura del lenguaje de marcado para los desarrolladores, sino que se trata más que nada de facilitar el descifrado del lenguaje de marcado por parte de las herramientas automatizadas. Las herramientas para desarrolladores también demuestran cómo los elementos semánticos proporcionan una estructura legible por máquina.

Modelo de objetos de accesibilidad (AOM)

A medida que el navegador analiza el contenido recibido, crea el modelo de objetos del documento (DOM) y el modelo de objetos de CSS (CSSOM). Luego, crea un árbol de accesibilidad. Los dispositivos de asistencia, como los lectores de pantalla, usan el AOM para interpretar y analizar el contenido. El DOM es un árbol de todos los nodos del documento. La AOM es como una versión semántica del DOM.

Comparemos cómo se renderizan ambas estructuras de documentos en el panel de accesibilidad de Firefox:

En la segunda captura de pantalla, hay cuatro roles de punto de referencia en el segundo bloque de código. Usa puntos de referencia semánticos llamados <header>, <main>, <footer> y <nav> para "navegación". Los puntos de referencia proporcionan una estructura al contenido web y garantizan que los usuarios de lectores de pantalla puedan navegar fácilmente por las secciones de contenido importantes con el teclado.

Ten en cuenta que <header> y <footer> son puntos de referencia, con los roles de banner y contentinfo respectivamente, cuando no están anidados en otros puntos de referencia. La AOM de Chrome muestra esto de la siguiente manera:

Si observas las herramientas para desarrolladores de Chrome, notarás una gran diferencia entre el modelo de objetos de accesibilidad cuando se usan elementos semánticos y cuando no lo haces.

Es bastante claro que el uso de elementos semánticos ayuda a la accesibilidad, y el uso de elementos no semánticos reduce la accesibilidad. HTML es generalmente accesible, de manera predeterminada. Nuestro trabajo como desarrolladores es proteger la naturaleza accesible de HTML de forma predeterminada y asegurarnos de maximizar la accesibilidad. Puedes inspeccionar la AOM en las herramientas para desarrolladores.

El atributo role

El atributo role describe la función que tiene un elemento en el contexto del documento. El atributo role es un atributo global (es decir, es válido en todos los elementos) y se define con la especificación ARIA en lugar de la especificación HTML de WhatWG, donde se define casi todo lo demás de esta serie.

Cada elemento semántico tiene una función implícita; algunos dependen del contexto. Como vimos en la captura de pantalla de las herramientas para desarrolladores de accesibilidad de Firefox, los componentes de nivel superior <header>, <main>, <footer> y <nav> eran puntos de referencia, mientras que <header> anidado en <main> era una sección. En la captura de pantalla de Chrome, se enumeran los roles de ARIA de estos elementos: <main> es main, <nav> es navigation y <footer>, como era el pie de página del documento, es contentinfo. Cuando <header> es el encabezado del documento, el rol predeterminado es banner, que define la sección como el encabezado global del sitio. Cuando un <header> o <footer> se anidan dentro de un elemento de sección, no es un rol de punto de referencia. Las capturas de pantalla de ambas herramientas para desarrolladores muestran esto.

Los nombres de los roles de los elementos son importantes para compilar la AOM. La semántica de un elemento, o "rol", es importante para las tecnologías de asistencia y, en algunos casos, para los motores de búsqueda. Los usuarios de tecnologías de accesibilidad se basan en la semántica para navegar por el contenido y comprender su significado. El rol del elemento permite al usuario acceder al contenido que busca rápidamente y, posiblemente, lo más importante, el rol le informa al usuario de lector de pantalla cómo interactuar con un elemento interactivo una vez que está enfocado.

Los elementos interactivos, como botones, vínculos, rangos y casillas de verificación, tienen roles implícitos, se agregan automáticamente a la secuencia de pestañas del teclado y tienen compatibilidad predeterminada con las acciones del usuario esperadas. El rol implícito, o el valor role explícito, informa al usuario que debe esperar interacciones predeterminadas específicas del elemento.

Con el atributo role, puedes asignar un rol a cualquier elemento, incluido un rol diferente al que implica la etiqueta. Por ejemplo, <button> tiene la función implícita de button. Con role="button", puedes convertir cualquier elemento de manera semántica en un botón: <p role="button">Click Me</p>.

Si bien agregar role="button" a un elemento informará a los lectores de pantalla que el elemento es un botón, no cambiará su apariencia ni su funcionalidad. El elemento button proporciona muchas funciones sin que tengas que realizar ningún trabajo. El elemento button se agrega automáticamente a la secuencia de orden de pestañas del documento, lo que significa que es enfocable de forma predeterminada. Las teclas Intro y Espacio activan el botón. Los botones también tienen todos los métodos y propiedades que les proporciona la interfaz HTMLButtonElement. Si no usas el botón semántico para tu botón, tienes que volver a programar todas esas funciones. Es mucho más fácil usar <button>.

Regresa a la captura de pantalla de AOM del bloque de código no semántico. Notarás que los elementos no semánticos no tienen roles implícitos. Podemos hacer que la versión no semántica sea semántica si asignamos un rol a cada elemento:

<div role="banner">
  <span role="heading" aria-level="1">Three words</span>
  <div role="navigation">
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>

Si bien el atributo role se puede usar para agregar semántica a cualquier elemento, debes usar elementos con el rol implícito que necesitas.

Elementos semánticos

Por lo general, preguntarte: “¿Qué elemento representa mejor la función de esta sección del lenguaje de marcado?” generalmente hará que elijas el mejor elemento para el trabajo. El elemento que elijas (y, por lo tanto, las etiquetas que uses) debe ser apropiado para el contenido que muestras, ya que las etiquetas tienen significado semántico.

Se debe usar HTML para estructurar el contenido, no para definir su apariencia. La apariencia es el dominio de CSS. Si bien algunos elementos están definidos para que aparezcan de cierta manera, no uses un elemento que se base en la forma en que la hoja de estilo del usuario-agente hace que ese elemento aparezca de forma predeterminada. En su lugar, selecciona cada elemento según su significado y funcionalidad semántico. Programar HTML de manera lógica, semántica y significativa ayuda a garantizar que las CSS se apliquen según lo previsto.

Elegir los elementos correctos para el trabajo mientras escribes el código significa que no tendrás que refactorizar ni comentar tu HTML. Si piensas en usar el elemento correcto para el trabajo, a menudo, deberás elegir el elemento correcto para el trabajo. Si no es así, probablemente no lo harás. Cuando comprendas la semántica de cada elemento y sepas por qué es importante elegir el elemento correcto, por lo general, podrás tomar la decisión correcta sin mucho esfuerzo adicional.

En la siguiente sección, usarás los elementos semánticos para compilar la estructura del documento.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre HTML semántico.