HTML5文章和网站上具有多个子级别的文章和部分的语义结构

Question

以下哪项（如果有）是使用多个子级别的网站上使用文章和部分元素的最正确方法？

第一个示例 创建这样的平坦轮廓。

1. 公司名称
   1. 细分导航
2. 段名
   1. 段子导航
3. 产品名称
   1. 产品子页面导航
   2. 产品子第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>

第二个示例 创建这样的树结构大纲

1. 公司名称
   1. 细分导航
   2. 段名
      1. 段子导航
      2. 产品名称
         1. 产品子页面导航
         2. 产品子第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

两者都很好，但意味着不同的事情。随身携带哪个轮廓匹配您对结构的意图。