Duda etiqueta Hgroup en HTML5

Buenas!

Mi duda reside en una parte concreta del siguiente enlace: http://www.comocreartuweb.com/curso-de-html/estructura-semantica-ht…

<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.

Lo que no entiendo es que si la etiqueta de cierre del último section, cierra la tercera línea (es decir, cierra el <h2>)...¿Qué función cumple la etiqueta de cierre </h2>?, ¿crea algún conflicto o error en la lectura del navegador en todo esto?, y por último...¿habría que poner otra etiqueta de cierre section para cerrar el de la primera línea?

Gracias ; )

Por favor, alguien que me eche una mano, porque sino no puedo avanzar : )

No entiendo qué tiene que ver lo que he puesto como dudas y lo que has escrito:

podrias darle el width del cuadro verde en porcentajes para que se ajuste mejor width:95%; heigth:95%;

Hola:

No es que el navegador vaya a cerrar etiquetas automáticamente, sino que simplemente aplicará márgenes distintos. Esto no pasará si eliminas todos los márgenes y estableces unos por tu cuenta con CSS.

Entra aquí y copia/pega el siguiente código:

<doctype html>
<title>Prueba</title>
<h1>Prueba</h1>
<section>
  <h1>Sub-sección</h1>
  <h2>sub título</h2>
</section>
<section>
  <hgroup>
    <h1>Título</h1>
    <h2>sub título</h2>
  </hgroup>
  <p>contenido</p>
</section>

Luego haz clic sobre Outline this para que veas la diferencia.

Gracias ; )

navegadores interpretan los codigos de la misma manera y lo mismo pasa con programas como html-kit o similares, podrias darle el width del cuadro verde en porcentajes para que se ajuste mejor width:95%; heigth:95%;