html - 我应该如何创建和样式化基于大纲的文档？

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... */

不，它不应该破坏任何东西。