Un encabezado se asemeja al título de una noticia del periódico, que resume e informa al lector sobre el contenido que viene a continuación. En la sección 7.5.5 de la Especificación HTML 4.01 se señala que un encabezado describe brevemente el tema de la sección que introduce
, y que hay 6 niveles de encabezado -H1, H2, H3, H4, H5 y H6-, siendo H1 el más importante y H6 el menos importante
.
Descárgate el ejemplo práctico. Éste es el código HTML (con el texto de los párrafos acortado):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ejemplo práctico de encabezados HTML - Bridje blog</title>
</head>
<body>
<h1>Recetas de mi comida favorita</h1>
<h2>Sushi</h2>
<h3>Ingredientes</h3>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<h3>Preparación</h3>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<h2>Risotto</h2>
<h3>Ingredientes</h3>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<h3>Preparación</h3>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<h2>Paella</h2>
<h3>Ingredientes</h3>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<h3>Preparación</h3>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<h2>Pimientos rellenos de atún</h2>
<h3>Ingredientes</h3>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<h3>Preparación</h3>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
</body>
</html>Como ves, he empleado los encabezados H1, H2 y H3 de una manera jerárquica, dividiendo el contenido en "bloques" de secciones y subsecciones. Los H3 abren dos secciones ("Ingredientes y "Preparación") que forman parte de una sección mayor abierta por un H2 (ej. "sushi"), que a su vez forma parte de una sección todavía mayor abierta por un H1 ("Recetas de mi comida favorita").
La sección de contenido abierta por un encabezado se da por terminada si después de ese encabezado hay otro de igual o mayor importancia o si se acaba el documento; por ejemplo, la sección de contenido abierta por el H2 "risotto" termina cuando aparece otro encabezado H2, "paella".
Los encabezados facilitan la lectura al internauta y le proporcionan una idea de cuál es la estructura del documento, sus secciones y subsecciones: para facilitar la navegación y comprensión de la estructura del documento, los autores deberían usar encabezados apropiadamente anidados (por ejemplo, H1 seguido por H2, H2 seguido por H2 o H3, H3 seguido por H3 o H4, etc.).
(Techniques for WCAG 2.0 -Técnicas para WCAG 2.0 del W3C)
Normalmente los navegadores visuales ayudan en esta comprensión de la estructura mostrando los encabezados con un mayor (H1) o menor (H6) tamaño, dejando clara la jerarquía, y en negrita y con márgenes para diferenciarlos del cuerpo de texto. Te he hecho un documento HTML en el que puedes comparar cómo muestra tu navegador los diferentes niveles de encabezado.
Además, los internautas ciegos, con problemas de visión, o con dificultades de aprendizaje que emplean lectores de pantalla, se sirven de los encabezados para navegar más fácilmente por la página y para hacerse una idea de cómo se estructura el documento. Si te manejas con el inglés, te recomiendo que veas Importance of HTML Headings for Accessibility, un vídeo de Youtube en el que un consultor de accesibilidad ciego que emplea el lector de pantalla JAWS cuenta lo importante que es para él una buena estructuración de las páginas web a base de encabezados.
¡Importante! No debes emplear un encabezado sólo para darle una determinada apariencia a tu texto. Recuerda, el HTML sirve para estructurar, y para dar formato al documento HTML están las Hojas de Estilo, que veremos más adelante.
Los buscadores dan más importancia a un encabezado que al cuerpo de texto de la página, por ello es aconsejable que añadas al mismo palabras clave que sepas que son de interés en las búsquedas de los internautas y que, por supuesto, tengan que ver con el contenido. Sé de maquetación, pero apenas sé cómo funcionan los buscadores; sin embargo, según tengo entendido, buscadores como Google pueden detectar juego sucio e ignorar tus encabezados si abusas de demasiadas palabras clave o escribes términos que no tengan que ver con el contenido. Seguiré informándome porque es ciertamente un tema muy interesante.
Como norma, te recomendaría que fueses "legal" y le facilitaras la vida a tus visitantes poniendo encabezados claros, breves en lo posible, y solamente los necesarios. Como curiosidad, te diré que en 8 años sólo he usado el encabezado H5 maquetando un sitio web que estaba lleno de Leyes larguísimas y necesitaba muchos niveles de división. Lo cierto es que el resto de las veces me ha bastado con usar del H1 al H4.
Y hasta aquí la parte "bonita". Y es que hay un debate muy (MUY) encendido sobre cómo usar los encabezados. El W3C no es muy específico y acaban surgiendo opiniones contrarias sobre cómo deben hacerse las cosas. Es un tema muy lioso y por ello me he limitado a ponerte un ejemplo de página sin menús ni nada que la complique y explicarte cómo creo que deberían hacerse las cosas (y como las hace mucha gente) cuando el documento es así de sencillo 8)
Por ponerte un ejemplo de uno de los temas del debate, el W3C no especifica cuántos H1 puede haber por página, y la gente tiene diferentes opiniones al respecto. Yo personalmente sólo lo empleo una vez por página, y si veo que un documento necesita claramente dos H1 (es decir, tiene dos temáticas bien diferenciadas), entonces lo divido en dos documentos, cada uno con su H1.
Entradas
