En un documento web muchas veces necesitaremos escribir un títular o encabezado que destaque del resto del texto. Visualmente, necesitaremos que sea un texto grande y llamativo, pero si pensamos semánticamente, realmente se trata de indicar en varios puntos del documento unos ciertos puntos con diferente grado de importancia, similar a lo que haríamos en un resumen o esquema.
Para ello, tenemos las etiquetas de titulares o encabezados, que van desde <h1> hasta <h6>:
| Etiqueta | Descripción |
|---|---|
<h1> | Encabezado de nivel 1. Equivalente al título principal. |
<h2> | Encabezado de nivel 2. Equivalente a un tema del documento. |
<h3> | Encabezado de nivel 3. Equivalente a la sección de un tema. |
<h4> | Encabezado de nivel 4. Equivalente a un apartado de la sección. |
<h5> | Encabezado de nivel 5. Equivalente a un ejemplo del apartado. |
<h6> | Encabezado de nivel 6. Equivalente a un subapartado del ejemplo. |
<hgroup> | Agrupación o conteneedor de titular o cabecera y relacionados. |
Como ves, cada uno de ellos tiene una importancia menor que el anterior, y está directamente asociado al elemento de nivel anterior.
Vamos a repasar algunos detalles importantes y a ver algunos ejemplos.
La etiqueta <h1>
La etiqueta <h1> es el titular con más importancia del documento. Esta cabecera es casi equivalente al título del documento, salvo que sea descendiente de un elemento semántico, en cuyo caso sería el título de ese elemento semántico.
<div class="page">
<h1>Título del documento</h1>
<p>...</p>
</div>
Como se puede ver, en este ejemplo <h1> establece un título para la página.
Es importante que recuerdes que los titulares no son elementos meramente visuales. Nosotros podríamos cambiar el CSS para que los titulares
<h1>sean visualmente más pequeños que los<h2>, pero semánticamente seguirán teniendo más importancia.
Las etiquetas <h2> ... <h6>
Las etiquetas <h2>, <h3>, <h4>, <h5> y <h6> son titulares de importancia menor a <h1> que van reduciendo su importancia a medida que avanza el número o nivel. Pueden repetirse, es decir, una página puede tener múltiples etiquetas <h2> (de hecho, suele tenerlas) y no existe un <h7> o elementos de nivel superior a <h6>.
<div class="page">
<h1>Título del documento</h1>
<p class="subtitle">Subtítulo del documento</p>
<p>Introducción del documento</p>
<h2>Primer tema</h2>
<p>...</p>
<h3>Ejemplos</h3>
<p>...</p>
<h2>Segundo tema</h2>
<!-- ... -->
</div>
En principio, los elementos <h2> y sucesivos no deberían existir si no existe un titular previo. Es decir, si tenemos un elemento <h3> en nuestro documento, debería existir un elemento <h2> y un elemento <h1> previamente.
La etiqueta <hgroup>
Aunque la historia del etiqueta <hgroup> ha sido accidentada, y durante un tiempo estuvo marcada como obsoleta, hace poco ha vuelto al estándar HTML5. La etiqueta <hgroup> es una etiqueta que podemos utilizar para agrupar titulares con contenido relacionado.
Por ejemplo, podríamos utilizar <hgroup> para agrupar varias etiquetas <h1> ... <h6> y elementos de párrafo <p> que representen cosas relacionadas. Veamos el ejemplo anterior:
<div class="page">
<hgroup>
<h1>Título del documento</h1>
<p class="subtitle">Subtítulo del documento</p>
</hgroup>
<p>Introducción del documento</p>
<!-- ... -->
</div>
hgroup {
background: indigo;
color: white;
padding: 1rem 2rem;
h1, p { margin: 0 }
p { color: gold }
}
En este caso, el subtítulo del párrafo en cuestión es un elemento que depende del título <h1>, por lo que tiene sentido agruparlo con la etiqueta <hgroup>. Ya sería tarea de CSS darle estilo para que visualmente quede a nuestro gusto, pero semánticamente estaría correcto.
Mito: Un solo <h1> por página
Existe un mito que indica que una página solo debería tener un solo elemento <h1>. Aunque esto podría ser conveniente a veces, no tiene porque ser así, y de hecho, no suele serlo. Como vimos en el tema de semántica de secciones <header> y <footer>, un elemento <h1> puede aparecer varias veces por página, porque depende de su contenedor semántico padre.
Es posible que existan múltiples <h1> por documento o página, pero normalmente sólo habrá uno por entidad importante:
<div class="page">
<h1>Título del documento</h1>
<p>...</p>
<article>
<h1>Comentario de Pablo</h1>
<p>...</p>
</article>
<article>
<h1>Comentario de Sara</h1>
<p>...</p>
</article>
</div>
Como ves, en este caso, hay varios elementos <h1> por página, ya que cada <h1> es un elemento título de cada entidad <article> o documento general, en el caso de la primera. En titular hace referencia a su padre semántico más cercano.
