HTML5语义结构的文章和部分在网站上有多个子层次

Question

下面哪一种——如果有的话——是在有多个子层次的网站上使用article和section元素的最正确的方法?

第一个例子创建了这样的平面轮廓。

1. 公司名称
   1. 分段导航
分段名称
1. 分段子导航
2. 产品名称
   1. 产品子页面导航
   2. 产品子页面1标题
4. 页脚

5. …就像这样

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

页脚

…就像这样

<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

都很好，但意味着不同的东西。选择与你的结构意图相匹配的轮廓。