Conociendo mejor la etiqueta Hgroup de Html5

Ahora que tenemos más claro todo ese rollo de las secciones y subsecciones, puedo explicarte un poco mejor el porqué de la existencia de la etiqueta hgroup.

En la página anterior hemos comentado que la etiqueta <section> nos permitía indicar el comienzo y fin de nuevas secciones. No es así? No obstante, las etiquetas <h1>, <h2>, etc, siguen creando nuevas secciones y esto puede llegar a ser un verdadero lio.

Imagina por ejemplo que dentro de una sección, colocamos un titular de primer rango con la etiqueta <h1> y a continuación, una breve descripción de la sección con una etiqueta <h2>, como en este ejemplo:

<section>
   <h1>Primera sección de nivel 1</h1>
   <h2>Breve descripción de la sección de nivel 1</h2>
   <p>En esta nueva sección hablaremos de bla bla bla y de blu blu blu. Bla bli blo blu...</p>
</section>

Qué nos va a ocurrir? Pues que con la primera línea empieza una sección de nivel 1. En la segunda línea se coloca su titular, con la etiqueta <h1>. Pero en la tercera hemos añadido la apertura de una nueva subsección, pues la etiqueta <h2> crea una subsección dentro de la anterior. Esto ocasiona que cuando el navegador alcanza a leer la cuarta línea, la etiqueta de cierre de sección, nos va a cerrar la abierta por el <h2> y no es eso lo que queríamos, sino que pretendíamos cerrar la abierta en la primera línea.

Es para evitar este problema que se ha creado la etiqueta <hgroup> en el Html5. Gracias a la etiqueta <hgroup> podemos encerrar etiquetas <h1>, <h2>, etc, para que el navegador simplemente no las tenga en cuenta, para que no las contabilice como creadoras de nuevas secciones sino solamente como titulares. Al encerrar las etiquetas <h1> y <h2> anteriores, el navegador se olvida de sus ordenes jerárquicas y hará caso solo de las aperturas y cierres de las <section>. Quedaría así por tanto:

<section>
   <hgroup>
      <h1>Primera sección de nivel 1</h1>
      <h2>Breve descripción de la sección de nivel 1</h2>
   </hgroup>
   <p>En esta nueva sección hablaremos de bla bla bla y de blu blu blu. Bla bli blo blu...</p>
</section>

Si no queda perfectamente claro, te agradecería que nos lo comentaras en el foro, y así nos ayudar a mejorar las definiciones, oki?

Comparte este artículo en tu red Twitter Comparte este artículo en tu red Facebook Comparte este artículo en tu red Google Enviar '' a Meneame.net