Cabecera y pie de página
Las áreas de encabezado y pie de página pueden definirse utilizando los dos elementos header y footer. El elemento head se utiliza para definir el área de cabecera. No tiene por qué ser la cabecera de toda la página. También puede utilizar head para etiquetar el área de cabecera de otros elementos como secciones y artículos.
Atención: no confunda header con el conocido elemento head, que se utiliza para definir el área de cabecera de los documentos HTML que contienen el título del documento, la hoja de estilo y las llamadas a JavaScript.
Para un documento completo, el uso de header tendría el siguiente aspecto
<body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body>
Aplicado a un elemento sección, resultaría la siguiente imagen:
<section> <header> <h1>Creación de aplicaciones web (parte 09): jQuery mobile (1)</h1> <p> jQuery es, sin duda, uno de los frameworks de JavaScript más conocidos.</p> </header> <p>Como resultado, jQuery se utiliza ya miles de veces en sitios web "clásicos". El framework hermano jQuery mobile (jQM) fue especialmente diseñado para su uso en aplicaciones web. Este framework te ayuda a hacer que tu aplicación web parezca una aplicación real en un abrir y cerrar de ojos. Razón suficiente para echar un vistazo detallado a jQM. </p> <footer> <p>Copyright by PSD-Tutorials.de</p> </footer> </section>
Asegúrese de que el pie de página y el encabezado no contienen ningún elemento adicional de encabezado y pie de página.
Agrupación de encabezados
Los encabezados entran en juego en relación con las secciones. Estos encabezados pueden ser inicialmente los elementos clásicos h1 a h6. Sin embargo, en HTML5 también se permite el elemento hgroup. Estos elementos hgroup pueden contener a su vez varios encabezados.
En primer lugar, echa un vistazo a un documento HTML clásico en el que la estructura "habitual" se define mediante elementos hx.
<h1> Libro </h1> <h2> Capítulo 1 </h2> <h2> Capítulo 2 </h2> <h3> Subcapítulo 2.1 </h3> <h3> Subcapítulo 2.2 </h3> <h2> Capítulo 3 </h2>
Esta definición significa la siguiente estructura:
Libro
Capítulo 1
Capítulo 2
Subcapítulo 2.1
Subcapítulo 2.2
Capítulo 3
Sin embargo, los encabezados no aparecen sangrados en el navegador.
hgroup es especialmente interesante en relación con los textos periodísticos. Éstos constan a menudo de un encabezamiento en dos partes compuesto por la línea principal y el encabezamiento o subtítulo. Un ejemplo ilustra este aspecto.
<hgroup> <h1>Sistema operativo en la nube</h1> <h2>La web como sistema operativo</h2> </hgroup> <p>Aquí comienza el contenido del artículo...</p>
Este ejemplo muestra claramente que la sublínea no introduce una sección separada dentro del artículo. Más bien, forma parte del título del artículo. Algo así puede resumirse utilizando el elemento hgroup.
Los elementos h1 a h6 están permitidos dentro de hgroup.
El concepto de esquema
En HTML5 también entra en juego el concepto de esquema, que implica la interacción de los elementos de sección con los distintos elementos hx. Con este concepto, los encabezados se dividen en distintos niveles mediante los elementos h1 a h6, como ocurría anteriormente. Aquí, h1 corresponde al nivel más alto, mientras que h6 representa el nivel más bajo. Por lo tanto, aquí no hay ningún cambio con respecto a antes. Esto se debe a que ahora los elementos hx pueden definirse dentro de elementos de sección. Y el recuento comienza de nuevo cada vez, pero siempre un nivel por debajo.
El concepto de esquema parece bastante complicado en la especificación HTML5, pero la idea que hay detrás es muy sencilla. De hecho, puede utilizarse para definir una especificación de contenido que haga que la estructura del documento sea legible por máquina.
He aquí otro ejemplo:
<h1> Capítulo 1 </h1> <sección> <h1> Capítulo 2 </h1> <sección> <h1> Capítulo 3 </h1> </sección> </sección>.
El concepto de esquema de HTML5 da como resultado la siguiente estructura:
1. capítulo 1
- 2. capítulo 2
- Capítulo 3
- Capítulo 3
Otro ejemplo ilustra el efecto. Aquí también empezamos con el documento fuente.
<sección> <h1>Instalación y configuración</h1> <sección> <h2>Instalación</h2> <p>Todo sobre la instalación </sección>. <sección> <h2>Configuración</h2> <p>Aquí encontrarás todo sobre configuración </sección> <aside> <p>Interesantes libros sobre el tema.... </aside> </section> <footer> <p>(c) by PSD-Tutorials.de </footer> </section>
La estructura resultante tiene el siguiente aspecto:
1. sección (instalación y configuración)
1.1 Sección (instalación)
1.2 Sección (configuración)
1.3 Sección (aparte)
- Sección (pie de página)
Y otro ejemplo:
<body> <h1>Instalación y configuración</h1> <h2>Instalación</h2> <p>Todo sobre el tema Instalación ...aún más contenido... <section> <h3>Requisitos previos</h3> <p>Todo sobre el tema Requisitos previos de instalación ...aún más contenido... <h3>Preparaciones</h3> <p>Todo sobre el tema Preparaciones ...aún más contenido... <h2>Configuración</h2> <p>Todo sobre el tema Configuración ...aún más contenido... </section> </body>
La estructura resultante es la siguiente:
1. instalación y configuración
1.1 Instalación
1.1.1 Requisitos previos
1.1.2 Preparativos
1.2 Configuración
El recuento interno comienza cada vez en 1. Sólo estos elementos se ven afectados por el concepto de esquema:
- artículo
- aparte
- nav
- sección
Los dos elementos encabezado y pie de página no se ven afectados.
Tenga en cuenta que el concepto de esquema aún no está soportado por los navegadores.
Sin embargo, sólo será cuestión de tiempo que los fabricantes de navegadores tomen cartas en el asunto. Las ventajas del concepto de contorno serían demasiado grandes. Piense, por ejemplo, en las barras de navegación generadas automáticamente. Pero aunque los navegadores ignoren este tipo de estructuración, debería intentar estructurar sus documentos de forma lógica. Esto también le proporcionará un cierto grado de seguridad de cara al futuro para sus sitios web.
