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

兩個都很好，但意味着不同的事情。選擇符合您對結構的意圖的輪廓。