HTML5 Estructuración semántica del artículo y sección en el sitio web con múltiples subconsportes

Question

¿Cuál de las siguientes, si lo hay, es la forma más correcta de usar el artículo y los elementos de sección en un sitio web con múltiples subconsumnos?

El primer ejemplo Crea este esquema plano como este.

1. nombre de empresa
   1. Navegación de segmento
2. Nombre de segmento
   1. Seggment Sub navegación
3. nombre del producto
   1. Navegación de la subpágina del producto
   2. Producto sub página 1 Título
4. Pie de página

... y se ve así

<header> <!-- MAIN NAVIGATION -->
    <h1><a>Company Name</a></h1>
    <nav>
        <h1>Segment Navigation</h1>
        <ul>
            <li><a>Segment 1</a></li>
            <li><a>Segment 2</a></li>
            <li><a>Segment 3</a></li>
        </ul>
    </nav>
</header>
<header> <!-- SUB NAVIGATION -->
    <h1><a>Segment Name</a></h1>    
    <nav>
        <h1>Segment Sub Navigation</h1>
        <ul>
            <li><a>Product 1</a></li>
            <li><a>Product 2</a></li>
            <li><a>Product 3</a></li>
        </ul>
    </nav>
</header>
<header> <!-- PRODUCT PAGE NAVIGATION -->
    <h1><a>Product Name</a></h1>    
    <nav>
        <h1>Product Sub Page Navigation</h1>
        <ul>
            <li><a>Product sub page 1</a></li>
            <li><a>Product sub page 2</a></li>
            <li><a>Product sub page 3</a></li>
        </ul>
    </nav>
</header>
<article>
    <h1>Product sub page 1 title</h1>
    <p>Content from Product sub page 1<p>
</article>
<footer>
    <h1>Footer</h1>
    <p>Footer content</p>
</footer>

El segundo ejemplo crea un esquema de estructura de árbol como este

1. nombre de empresa
   1. Navegación de segmento
   2. Nombre de segmento
      1. Seggment Sub navegación
      2. nombre del producto
         1. Navegación de la subpágina del producto
         2. Producto sub página 1 Título
2. Pie de página

... y se ve así

<header> <!-- MAIN NAVIGATION -->
    <h1><a>Company Name</a></h1>
    <nav>
        <h1>Segment Navigation</h1>
        <ul>
            <li><a>Segment 1</a></li>
            <li><a>Segment 2</a></li>
            <li><a>Segment 3</a></li>
        </ul>
    </nav>
</header>

<section> <!-- SEGMENT SECTION -->
    <header> <!-- SUB NAVIGATION -->
        <h1><a>Segment Name</a></h1>    
        <nav>
            <h1>Segment Sub Navigation</h1>
            <ul>
                <li><a>Product 1</a></li>
                <li><a>Product 2</a></li>
                <li><a>Product 3</a></li>
            </ul>
        </nav>
    </header>

    <section> <!-- PRODUCT SECTION -->
        <header> <!-- PRODUCT PAGE NAVIGATION -->
            <h1><a>Product Name</a></h1>    
            <nav>
                <h1>Product Sub Page Navigation</h1>
                <ul>
                    <li><a>Product sub page 1</a></li>
                    <li><a>Product sub page 2</a></li>
                    <li><a>Product sub page 3</a></li>
                </ul>
            </nav>
        </header>

        <article>
            <h1>Product sub page 1 title</h1>
            <p>Content from Product sub page 1<p>
        </article>
    </section>
</section>

<footer>
    <h1>Footer</h1>
    <p>Footer content</p>
</footer>

Answer 1

Ambos están bien, pero significan cosas diferentes. Vaya con cualquier esquema que coincida con su intención para la estructura.