Jerarquía etiquetas <h>

[Bebi_911]

Buenas a todos, este es mi primer mensaje en el foro así que no me deis mucha cera si cometo algún error XD.

La duda es sencilla (o eso creo), esta semana empece a hacer mis primeras cosillas en el fantástico mundo del desarrollo Web, empece con HTML5 y sus nuevas etiquetas, pues bien, aquí la duda que tras dar muchas vueltas y recorrer mucho la Web no consigo aclarar. Este es un trozo de código a pelo que solo representa una pequeña parte de la estructura de mi Web:

<section>

<article>
<header>
<hgroup>
<h1>Este es el titulo del primer tema</h1>
<h2>Este es el subtitulo del primer tema</h2>
</hgroup>
<p>publicado 10-12-2011</p>
</header>
<p>Aquí pondria el texto de mi primer tema</P>
<footer>
<p>Comentarios (0)</p>
</footer>
</article>

<article>
<header>
<hgroup>
<h1>Este es el titulo del segundo tema</h1>
<h2>Este es el subtitulo del primer tema</h2>
</hgroup>
<p>publicado 15-12-2011</p>
</header>
<p>Aquí pondria el texto de mi segundo tema</P>
<footer>
<p>Comentarios (0)</p>
</footer>
</article>

</section>

Pregunta: ¿Por que el único navegador que me respeta la jerarquía de las etiquetas <h> es el Explorer?? podéis comprobarlo vosotros mismo cogiendo ese fragmento de código...Firefox y Chrome no cogen dicha jerarquía y no se porque. He probado muchas cosas y nada también he leido como funcionan las nuevas jerarquías en HTML5 con las cuales en cada nueva sección, articulo, etc...esta se "resetea" y se vuelve independiente de las de otras secciones...bueno en definitiva un montón de información y ejemplos que no me aclararon nada como estos (y que tampoco funcionan):

http://blog.netconsulting.es/2012/12/10/html5-encabezado-h1-seo/
http://www.comocreartuweb.com/curso-de-html/estructura-semantica-html5/seciones-y-html5.html

Muchas gracias de antemano a todos, creo que la pregunta es un poco de MUY novato pero bueno... saludos.

[Rafael]

En realidad, no entiendo ¿Qué es eso de que un navegador no te respeta una jerarquía?

P.D. ¡Bienvenido!

[Bebi_911]

Pues lo que quiero decir es que si visualizas el código en explorer puedes ver como la etiqueta <h1> hace que el texto este en un nivel superior al de la etiqueta <h2> vamos para que nos entendamos...que se ve más grande! pero si el mismo codigo lo visualizas en Chrome o en Firefox pues no se esta respetando esto...

A ver...y puse el código en la parte del foro de HTML5 por las nuevas etiquetas que incorpora pero la jerarquía de las etiquetas <h> ha sido así de toda la vida.. XDD.

P.D. Gracias

[lilmaster]

Enserio es lo mas raro que he visto.... veo lo que sucede... luego de quedarme inspeccionando un rato veo que luego que lo entras dentro de la etiqueta header el h1 se vuelve mas chico que el h2 algo que no deberia pasar... pero es de el navegador!!!
el mismo se encarga de hacer esto ... debe ser el nuevo estandar.

[Bebi_911]

Iniciado por lilmaster

Enserio es lo mas raro que he visto.... veo lo que sucede... luego de quedarme inspeccionando un rato veo que luego que lo entras dentro de la etiqueta header el h1 se vuelve mas chico que el h2 algo que no deberia pasar... pero es de el navegador!!!
el mismo se encarga de hacer esto ... debe ser el nuevo estandar.

Pues ya hay varias personas que me han dicho lo mismo XDD que es muy raro y que no logran entender porque ocurre...¡si es algo super común! no es que sea un tema super rebuscado en las entrañas de la programación Web jeje. Pero si usas el codigo en el Explorer PREMIO!!! lo hace bien cuando se supone que es el navegador menos preparado y optimizado para HTML5 ....no entiendo nada!!!

[lilmaster]

No es eso, si no que explorer se mantiene desactualizado y si algo pasa en los navegadores..... explorer actúa no se... a los 6 meses? haha

Ademas en html5 los h1 h2 h3 .... Se usan nada mas para semántica y no tanto para dar tamaño a el texto

[Bebi_911]

Sí, si yo no quiero usarlos para dar tamaño al texto los uso por semántica pura!! quiero que uno sea un titulo y uno un subtitulo...para dar tamaño al texto esta claro que no uso eso

[Bebi_911]

Perdonar pero no sabia hacer esto, creo que ahora el código esta mejor presentado ;)

Código HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="description" content="Ejemplo de HTML5">
    <meta name="keywords" content="HTML5, CSS3, Javascript">
    <title>Prueba de HTML5</title>
    <link rel="stylesheet" href="miestilo.css">
</head>
 
<body>
    <header>
        <h1>Este es el título principal del sitio web</h1>  
    </header>
    <nav>
        <ul>
            <li>principal</li>
            <li>fotos</li>
            <li>videos</li>
            <li>contactos</li>      
        </ul>   
    </nav>
    <section>
        <article>
            <header>
                <hgroup>
                    <h1>Título del mensaje 1</h1>
                    <h2>Subtítulo del mensaje 1</h2>
                </hgroup>
            </header>   
            Este es mi primer mensaje
            <footer>
                <p>comentarios (0)</p>          
            </footer>
        </article>
        <article>
            <header>
                <hgroup>
                    <h1>Título del mensaje 2</h1>
                    <h2>Subtítulo del mensaje 2</h2>
                </hgroup>
            </header>
            Este es mi segundo mensaje      
            <footer>
                <p>comentarios (0)</p>          
            </footer>
        </article>
    </section>  
    <aside>
        <blockquote>Mensaje número 1</blockquote>   
        <blockquote>Mensaje número 2</blockquote>
    </aside>
    <footer>
        Derechos reservados &copy; 2012-2013    
    </footer>   
    
</body>
</html> 

Misma duda que al principio...

[Rafael]

Curioso, es específicamente el H1 dentro del article.

Pero yo no me preocuparía mucho por ello. Lo que sí es que creo que hay demasiados "anidamientos" y el hgroup al parecer no se va a ocpar más.