Читать книгу El gran libro de HTML5, CSS3 y Javascript - Diego Gauchat Juan - Страница 29

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.