HTML5 - 約大綱需要解釋

Question

所以，讓我們說，我有以下結構：

<doctype html> 
<header> 
    <h1>Header</h1> 
    <article><h2>Article</h2></article> 
    <article><h2>Article</h2></article> 
</header> 

<main> 
    <h1>Main content</h1> 
    <article><h2>Article</h2></article> 
    <article><h2>Article</h2></article> 
    <article><h2>Article</h2></article> 
    <article><h2>Article</h2></article> 
</main> 

<section> 
    <h1>Sidebar</h1> 
</section> 

如果我檢查使用http://gsnedders.html5.org/outliner/（或任何其他）的輪廓，我會得到輪廓是這樣的：

1. Main content 
    1. Header 
     1. Article 
     2. Article 
    2. Article 
    3. Article 
    4. Article 
    5. Article 
    6. Sidebar 

哪（根據我的理解）不正確。我還以爲它應該是這樣的：

1. Header 
     1. Article 
     2. Article 
2. Main content 
     1. Article 
     2. Article 
     3. Article 
     4. Article 
3. Sidebar 

爲什麼出現這種情況？如果我使用section元素，我可以得到想要的輪廓。但是，在HTML結構中存在main元素，那麼一切都會中斷（至少對我而言 - 這不是我理解它的方式）。

使用main元素可以達到所需的輪廓嗎？

Answer 1

創建顯式截面結構;不要忘記，<main>不是節節點。在您的代碼示例中，「標題」<h1>是根節點（級別＃1），並隱式分配了兩個「Article」子節點（級別＃2）。 '主要內容'<h1>與主'標題'處於相同級別（級別＃1）並且保留隱式節點節點的其餘部分; '文章-s'和最後一個'章節'在同一層次（等級＃2）。這是大綱是如何看待你的結構（裸去骨-舊式隱）：

<doctype html> 
    <h1>main-level</h1> 
    <h2>descendant</h2> 
    <h2>descendant</h2> 
    <h1>main-level</h1> 
    <h2>descendant</h2> 
    <h2>descendant</h2> 
    <h2>descendant</h2> 
    <h2>descendant</h2> 
    <h2>descendant</h2> 

爲了避免混淆它recomended到excplicitly定義所需的部分結構：

<doctype html> 
<header> 
    <h1>root</h1> 
    <section> 
     <h1>Header</h1> 
     <article><h2>Article</h2></article> 
     <article><h2>Article</h2></article> 
    </section> 
</header> 

<main> 
    <section> 
     <h1>Main content</h1> 
     <article><h2>Article</h2></article> 
     <article><h2>Article</h2></article> 
     <article><h2>Article</h2></article> 
     <article><h2>Article</h2></article> 
    </section> 
</main> 

<section> 
    <h1>Sidebar</h1> 
</section> 

這樣「頭'，'主要內容'，'邊欄'處於同一級別（級別2）;並且是主'根'節點（等級＃1）的子女。將<header>和<main>被切片的節點，你會得到你所提到的輪廓，結構將轉變到這一個：

<doctype html> 
<section> 
    <h1>Header</h1> 
    <article><h2>Article</h2></article> 
    <article><h2>Article</h2></article> 
</section> 

<section> 
    <h1>Main content</h1> 
    <article><h2>Article</h2></article> 
    <article><h2>Article</h2></article> 
    <article><h2>Article</h2></article> 
    <article><h2>Article</h2></article> 
</section> 

<section> 
    <h1>Sidebar</h1> 
</section> 

但他們沒有，我建議你指定部分明確。 順便說一句，請注意使用明確的部分（不是標題）時要定義文檔結構的作用（大綱，這是）代替，舊樣式，<h1> - <h6>，這裏的例子：

<doctype html> 
<h6>Grand-Grand</h6> 
<!-- notice top level h6 --> 
<section> 
    <h6>Grand</h6> 
    <article><h1>Minor</h1></article> 
    <!-- and h1 at the bottom of outline tree --> 
    <article><h1>Minor</h1></article> 
</section> 

<section> 
    <h6>Grand</h6> 
    <article><h1>Minor</h1></article> 
    <article><h3>Minor</h3></article> 
    <article><h4>Minor</h4></article> 
    <article><h2>Minor</h2></article> 
</section> 

<section> 
    <h5>Grand</h5> 
</section> 

注意如何第一個標題在部分名稱中包含部分（由部分元素構成），並且結構由明確的部分定義（意味着您可以使用 s或任何其他標題，以任意順序遍佈整個地方，而不會影響大綱結構） 。相同：

<doctype html> 
<h1>Grand-Grand</h1> 
<section> 
    <h1>Grand</h1> 
    <article><h2>Minor</h2></article> 
    <article><h2>Minor</h2></article> 
</section> 

<section> 
    <h1>Grand</h1> 
    <article><h2>Minor</h2></article> 
    <article><h2>Minor</h2></article> 
    <article><h2>Minor</h2></article> 
    <article><h2>Minor</h2></article> 
</section> 

<section> 
    <h1>Grand</h1> 
</section> 

，只要html5大綱是consirned。我想這是專門爲htm解析器實現的（幾乎沒有新的'視覺影響'），這樣他們就可以更精確地'認識'頁面上的內容，並提供更流暢的體驗，並幫助殘障人士。 Chrome有很好的html5 outliner extension;它將圖標放置在地址欄的右側，並在單擊時顯示帕德的輪廓。

Answer 2

我不知道爲什麼它是不是你的電腦上工作，只是modifiy你section標籤body標籤 及其工作

Answer 3

main元素不是切片的內容。請看看HTML 5.1草案4.5.14 The main element。您也可以閱讀關於Mozilla開發人員網絡The HTML5 Outline Algorithm上的大綱算法的更多信息。

據我所知，你不能真正做你想做的事情，因爲在你的例子中你的身體元素（主元素）有多個h1。