我應該如何創建和設計基於輪廓的文檔？

Question

所以默認html文件是<^h＃>標籤，它可以隱藏文件的輪廓穿插長文本。我認爲在文檔本身中表示大綱視圖會更有意義。

所以不是

<h1>1 foo</h1> 
<p>bar 
<h2>1.1 subfoo</h2> 
<p>bleep 

我寧願像

<ol> 
    <li><heading>foo</heading> 
    <p>bar 
    <ol> 
     <li><heading>subfoo</heading> 
     <p>bleep 
    </ol> 
</ol> 

這是一個好辦法做到這一點？我應該如何用CSS來設計這個樣式？

請問這個破東西，像屏幕閱讀器，搜索引擎，錨鏈接？

Answer 1

HTML5有這樣做的一個非常好的方式：

<section> 
    <header>1. Foo</header> 

    <!-- Content here --> 

    <section> 
     <header>1.1. Subfoo</header> 

     <!-- More content here --> 
    </section> 
</section> 

然後，樣式不同層次的，它只是：

section header { 
    /* Header 1 */ 
} 

section section header { 
    /* Header 2 */ 
} 

/* And so on... */ 

沒有，它不應該破壞任何東西。