Subtítulos
Si un texto es muy extenso, estructuralo con subtítulos.
En esta página
La importancia de los subtítulos
Siempre es deseable que los contenidos (páginas, páginas de libro, noticia, etc.) y los textos sean cortos.
Cuanto más breves, son más legibles y requieren del usuario menos esfuerzo por comprenderlo y menos scroll por la pantalla (desplazamiento descendente o ascendente).
Pero a veces nos resulta difícil recortar un texto o desagregarlo en varias páginas.
En esta página de libro, por ejemplo, explicamos los estándares para usar y redactar subtítulos: así lo informan su título («Subtítulos») y los títulos de las otras páginas de libro de las que depende («Redactar textos...» y «Estándares...»).
El texto es bastante extenso porque, además de explicar el asunto, presenta varios ejemplos.
Por tal motivo, decidimos desagregarlo en dos apartados, cada uno con su correspondiente subtítulo:
- uno en el que explicamos por qué son importantes los subtítulos; y
- otro en el explicamos los niveles de subtítulos que podemos usar para estructurar nuestro texto.
Cada subtítulo presenta un asunto en una sola oración de 8 a 10 palabras (70 caracteres con espacios) y sin punto final.
Para facilitar aún más la navegación de los usuarios (reducir el scroll por la pantalla), creamos un menú en la parte superior mediante el cual un usuario puede bajar con un clic directamente a uno u otro subtítulo y regresar también con un clic al menú superior.
De este modo:
- informamos al inicio los dos asuntos que integran el tema «Subtítulos»,
- facilitamos a los usuarios ir directo a uno u otro con un clic, sin hacer scroll con el dedo en pantalla o con el mouse,
- e informamos a buscadores como Google cuál es es la estructura temática de este contenido, lo que impacta en su posicionamiento en los resultados de búsqueda.
Cada subtítulo tiene un valor semántico: significa que comienza un apartado o tema.
En conjunto, los subtítulos de un contenido presentan su estructura temática.
Por este motivo no usamos la negrita para subtitular: mientras que los subtítulos informan la estructura temática de un contenido, las negritas solo enfatizan palabras clave.
Los subtítulos nos van a resultar de mucha utilidad para estructurar páginas, páginas de libro y noticias con mucho texto.
Niveles de subtítulos
Existen varios niveles jerárquicos de subtítulos.
El superior es el nivel 2 (etiqueta h2 en HTML5); el inferior es el nivel 6 (h6).
No estás obligado a usar todos los niveles en un texto (esta página de libro, por ejemplo, solo usa h2 y h3), pero sí es obligatorio usarlos de manera jerárquica y descendente:
- dentro de un contenido pueden haber subtítulos de nivel 2;
- dentro de un apartado con subtítulo de nivel 2 pueden haber subapartados con subtítulos de nivel 3;
- dentro de un apartado con subtítulo de nivel 3 pueden haber subapartados con subtítulos de nivel 4;
- y así hasta el nivel 6;
- dentro de un apartado con subtítulo de nivel 3 pueden haber subapartados con subtítulos de nivel 4;
- dentro de un apartado con subtítulo de nivel 2 pueden haber subapartados con subtítulos de nivel 3;
- pero nunca al revés.
Por ejemplo, la página de libro «Planificar y estructurar lo que vamos a publicar» tiene dos subtítulos de niveles h2: «Adoptá la estructura de pirámide invertida» y «Maquetá la estructura antes de subirla al sitio».
Dentro de «Maquetá la estructura antes de subirla al sitio» hay a su vez tres subtítulos de niveles h3: «Mapa del sitio», «Wireframe» y «Mockup». Cada uno desagrega un apartado acerca de la maquetación.
Decidimos no agregar esos subtítulos de tercer nivel en el menú superior, pero podríamos haberlo hecho (así lo hicimos, por caso en «Alertas»).
La siguiente imagen representa la estructura de la página de libro «Planificar y estructurar lo que vamos a publicar» tal como la «ven» los navegadores web, los programas que leen la pantalla a personas con discapacidad visual y los buscadores de Internet.
Supongamos que los subtítulos no estuvieran bien ordenados jerárquicamente, como en la siguiente imagen.
En este caso, los navegadores, los lectores de pantalla y los buscadores interpretarían que es más importante lo que hay en los tres h2 que lo que tiene arriba, lo que sería un grave error de redacción web.
La etiqueta h1 es única y le corresponde al título del contenido. Por eso nunca debemos usar un subtítulo de nivel 1 en el cuerpo de texto.
A continuación tenés un ejemplo de una estructura correcta con niveles 2 a 6.
Mirá el ejemplo
Primer subtítulo de nivel 2
Párrafos de texto, listas, etc.
Primer subtítulo de nivel 3
Párrafos de texto, listas, etc.
Segundo subtítulo de nivel 3
Párrafos de texto, listas, etc.
Primer subtítulo de nivel 4
Párrafos de texto, listas, etc.
Primer subtítulo de nivel 5
Párrafos de texto, listas, etc.
Segundo subtítulo de nivel 5
Primer subtítulo de nivel 6
Párrafos de texto, listas, etc.
Segundo subtítulo de nivel 6
Párrafos de texto, listas, etc.
Segundo subtítulo de nivel 4
Párrafos de texto, listas, etc.
Tercer subtítulo de nivel 3
Párrafos de texto, listas, etc.
Segundo subtítulo de nivel 2
Párrafos de texto, listas, etc.
En el ejemplo de arriba hay:
- dos subtítulos de nivel 2,
- dentro del primer subtítulo 2 hay tres subtítulos de nivel 3,
- dentro de uno de los subtítulos 3 hay dos subtítulos de nivel 4,
- dentro de uno de los subtítulos 4 hay dos subtítulos de nivel 5, y
- dentro de uno de los subtítulos 5 hay dos subtítulos de nivel 6.
La Oficina Nacional de Tecnologías de Investigación explica en su «Guía de recomendaciones para navegación accesible en páginas web» los criterios que debemos cumplir por ley cuando creamos los diferentes niveles de subtítulos.
Escribí subtítulos con markdown