HTML5複数のサブレベルのWebサイト上の記事とセクションのセマンティック構造

Question

次のうち、どのもしあれば、複数のサブレベルを持つWebサイトで記事とセクション要素を使用する最も正しい方法はどれですか？

最初の例 このようなこのフラットなアウトラインを作成します。

1. 会社名
   1. セグメントナビゲーション
2. セグメント名
   1. セグメントサブナビゲーション
3. 商品名
   1. 製品サブページナビゲーション
   2. Product Sub 1 Page 1タイトル
4. フッター

...そしてこのように見えます

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

2番目の例 このようなツリー構造のアウトラインを作成します

1. 会社名
   1. セグメントナビゲーション
   2. セグメント名
      1. セグメントサブナビゲーション
      2. 商品名
         1. 製品サブページナビゲーション
         2. Product Sub 1 Page 1タイトル
2. フッター

...そしてこのように見えます

<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

どちらも大丈夫ですが、意味が異なります。構造に対するあなたの意図に一致するアウトラインに合わせてください。