Estructurar la página con etiquetas HTML que indiquen su función
Descripción
Este criterio comprueba que el código de tu página indica la función de cada parte. iPand comprueba tres puntos: un elemento <main> (o role="main") y al menos dos elementos entre <header>, <nav> y <footer>; al menos la mitad del texto principal dentro de elementos de texto (párrafos, listas, encabezados, celdas de tabla, citas, leyendas); un atributo lang válido (BCP 47) en <html>.
El segundo punto no se evalúa cuando el texto principal tiene menos de 100 palabras.
Por qué importa para las IA
Las etiquetas semánticas separan el contenido principal de la cabecera, el menú y el pie de página, y dicen qué es cada bloque: párrafo, lista, tabla. Así, un programa que lee el código localiza el texto útil de la página sin tener que adivinarlo a partir del diseño.
- <main> distingue el contenido propio de la página de lo que se repite en todo el sitio.
- Un texto en párrafos y listas se divide con más claridad que un texto metido en <div> sin función.
- Según el W3C, el atributo lang lo usan los motores de búsqueda, las herramientas de traducción y los sintetizadores de voz.
Cómo corregirlo
- 1 Delimita las grandes zonas de la página Envuelve el contenido propio de la página en un solo elemento <main>, la cabecera del sitio en un <header>, el menú en un <nav> y el pie de página en un <footer>. Si tu tema solo usa <div>, pide a tu desarrollador o al autor del tema que los sustituya.
- 2 Escribe el texto en párrafos y listas Coloca cada párrafo en un <p>, las enumeraciones en <ul> u <ol> con un <li> por elemento, y los datos comparables en una <table>. Evita el texto puesto directamente en <div> o <span>: al menos la mitad del texto principal debe estar en elementos de texto.
- 3 Declara el idioma de la página Añade el atributo lang a la etiqueta <html> con un código BCP 47: lang="es" para el español, lang="es-MX" para el español de México, lang="en" para el inglés. En un sitio en varios idiomas, cada versión declara su propio idioma.
- 4 Comprueba la estructura En la herramienta de inspección de tu navegador, localiza los elementos <main>, <header>, <nav> y <footer>, y luego el atributo lang de la etiqueta <html>. Comprueba también que el texto principal está en elementos <p> y <li> y no en <div>.
Claves
Unas zonas con nombre, un texto en párrafos y un idioma declarado hacen que la página se lea sin adivinar su diseño. iPand comprueba cada día estos tres puntos en el código de la página.
