HTML semántico

HTML es el lenguaje que se usa para estructurar las páginas web. El HTML semántico usa elementos que describen el significado del contenido, incluidos los encabezados que identifican secciones y subsecciones. Las herramientas de navegación pueden usar estos encabezados para ayudar a las personas a recorrer una página. Comprueba si los encabezados de una página se corresponden con sus secciones.

El HTML semántico describe el significado y la estructura del contenido web. Las orientaciones del W3C recomiendan usar elementos con significado, identificar las regiones de la página y organizar los encabezados en una jerarquía lógica. Los encabezados comunican cómo se organiza el contenido. Los navegadores y las tecnologías de asistencia, como los lectores de pantalla que se usan para acceder al contenido, pueden utilizarlos para navegar. [1] [2]

En una guía de cocina hipotética, <h1>Guía de cocina</h1> podría identificar el tema general. <h2>Recetas</h2> podría iniciar una sección, y <h3>Sopas</h3> podría iniciar una subsección dentro de ella. Los niveles de encabezado describen estas relaciones: el nivel 1 tiene la mayor jerarquía y el nivel 6, la menor. [2]

Al abrir subsecciones, evita saltarte niveles de encabezado siempre que sea posible. Pasar directamente de un encabezado de nivel 2 a uno de nivel 4 puede resultar confuso. Volver del nivel 4 al nivel 2 es aceptable cuando terminan las subsecciones anteriores y comienza una nueva sección. [2]

Las regiones de una página son áreas que se pueden identificar dentro de ella. Marcarlas en el código y darles etiquetas que permitan distinguirlas ayuda a orientarse y navegar. Un encabezado también puede servir como etiqueta de una región: el tutorial recomienda aria-labelledby, un atributo HTML que asocia la región con el encabezado que le da nombre. [1] [2]

Las secciones fijas de una página tienen una excepción importante. Si una barra lateral se mantiene igual en distintas páginas, el tutorial recomienda conservar sus niveles de encabezado aunque los niveles del contenido principal varíen. Por tanto, la organización de los encabezados depende tanto de las relaciones entre los contenidos como de la función que cumple una sección en distintas páginas. [2]

Estos ejemplos suponen que los encabezados describen con precisión el contenido que aparece debajo. Las orientaciones explican cómo la estructura puede facilitar la navegación; no demuestran una mejora medida para cada usuario ni garantizan que una implementación concreta sea totalmente accesible. [1] [2]

• Orientaciones oficiales, no evidencia experimental: el W3C recomienda identificar las regiones de la página, etiquetarlas para que los usuarios puedan distinguirlas y usar elementos de contenido con significado. Describe cómo las páginas bien estructuradas facilitan la orientación y la navegación, incluido el acceso al contenido principal y a las secciones importantes para quienes usan lectores de pantalla. [1]
• Orientaciones oficiales sobre encabezados: los navegadores, los complementos y las tecnologías de asistencia pueden usar los encabezados para navegar dentro de una página. El tutorial recomienda organizarlos en una jerarquía lógica y evitar saltarse niveles siempre que sea posible, aunque permite volver a un encabezado de nivel superior al cerrar subsecciones. [2]
• Orientaciones que dependen del contexto: las secciones fijas de una página, como las barras laterales, deben conservar niveles de encabezado uniformes entre páginas, aunque varíen los niveles de encabezado del contenido principal. El tutorial también recomienda asociar los encabezados con sus regiones de la página mediante aria-labelledby. [2]

La referencia anterior, presentada como «Semantic Table-of-Contents for Efficient Web Screen Reading», se había identificado incorrectamente y aquí se sustituye por los dos documentos de orientación del W3C proporcionados. Ninguno de los fragmentos proporcionados informa de experimentos, porcentajes de estudios ni efectos medidos sobre la velocidad de navegación, la cognición, las fuentes tipográficas o el comportamiento. Los tutoriales enumeran criterios de éxito relacionados de las Pautas de Accesibilidad para el Contenido Web (WCAG) en los niveles A, AA y AAA; esa lista no convierte cada recomendación en un requisito universal ni demuestra conformidad con las pautas o cumplimiento legal. La guía de cocina es un ejemplo didáctico hipotético.