Читать книгу El gran libro de HTML5, CSS3 y Javascript - Diego Gauchat Juan - Страница 29
1.5.2 <hgroup>
ОглавлениеDentro de cada elemento <header>
, ya sea al comienzo del cuerpo o al comienzo de cada elemento <article>
de nuestro ejemplo, hemos incorporado etiquetas <h1>
para indicar un título. Las etiquetas <h1>
son, básicamente, todo lo que se necesita para crear el encabezamiento de todas las partes del documento, pero a veces también hay que añadir subtítulos o más información para declarar de qué trata la página web o alguna de sus secciones. De hecho, es habitual que el elemento <header>
albergue también otros elementos, como tablas de contenidos, formas de búsqueda, o textos cortos y logotipos.
Puede hacer uso de todas las etiquetas H: <h1>
, <h2>
, <h3>
, <h4>
, <h5>
y <h6>
. Sin embargo, para fines de procesamiento interno y para evitar la generación de múltiples secciones o subsecciones durante la interpretación del documento, estas etiquetas deben estar agrupadas. Para ello, HTML5 proporciona el elemento <hgroup>
.
Código 1-19
Uso del elemento <hgroup>
.
Las etiquetas H deben respetar su jerarquía, es decir, primero se debe declarar el título con la etiqueta <h1>
, a continuación, utilizar <h2>
para los subtítulos, y así sucesivamente. Sin embargo, a diferencia de las versiones anteriores de HTML, HTML5 permite reutilizar las etiquetas H y construir esta jerarquía una y otra vez en cada sección del documento. En el ejemplo del Código 1-19, se añade un subtítulo y metadatos para cada entrada y agrupamos a títulos y subtítulos con la etiqueta <hgroup>
. La jerarquía <h1>
y <h2>
es reutilizada en cada elemento <article>
.
Importante
El elemento <hgroup>
es necesario cuando hay un título y un subtítulo, o más etiquetas H juntas en el mismo elemento <header>
. Este elemento solo puede contener etiquetas H y por eso en el ejemplo lo mantuvimos fuera de los metadatos. Si solo dispone de la etiqueta <h1>
o la etiqueta <h1>
y metadatos, no tiene que agrupar estos elementos. Por ejemplo, en el elemento <header>
del cuerpo no las usamos porque éste solo contenía un elemento H dentro. Recuerde siempre que las etiquetas <hgroup>
han sido diseñadas para agrupar solamente las etiquetas H, tal como como su nombre indica.
Los navegadores y programas que ejecutan sitios web leen el código HTML y crean su propia estructura interna para interpretar y procesar cada elemento. Esta estructura interna se divide en secciones que son independientes de las divisiones en el diseño o del elemento <section>
. Estas son las secciones conceptuales generadas durante la interpretación del código. El elemento <header>
no crea una de estas secciones conceptuales por sí mismo, lo que significa que los elementos dentro del <header>
representan diferentes niveles y podrían generar internamente secciones diferentes. El elemento <hgroup>
fue creado con el propósito de agrupar etiquetas H y evitar errores de interpretación por parte del navegador.