Question

So the default html document is a long text interspersed with <H#> tags, which hides the outline of the document. I think it would make more sense to have the outline view represented in the document itself.

So instead of

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

I would prefer something like

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

Is this a good way to do it? How should I style this with CSS?

Will this break things, like screen readers, search engines, anchor links?

Answer 1

HTML5 has a very nice way of doing that:

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

    <!-- Content here -->

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

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

Then, to style the different levels, it’s just:

section header {
    /* Header 1 */
}

section section header {
    /* Header 2 */
}

/* And so on... */

And no, it shouldn’t break anything.