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:

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:

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

Estructura HTML5:

• Estructuras Html5
• Etiquetas Semánticas
• Section
• Article
• Header
• Footer
• Nav
• Hgroup
• Aside
• Section o Article
• Seciones y HTML5
• Más Hgroup
• Ejemplos de código