How best to handle styles for nested h1's in html5?

Question

I'm currently working on some HTML5 themes for a few of my websites, and I keep running into problems with the way <h1>'s can be used multiple times. I can't seem to predict in what elements the headings will show up, but I do want to try and size them automatically based on their position in the DOM...

I was thinking about using something like

h1 { font-size: 3em; }
h2,
body > * > header h1 { font-size: 2.5em; }
h3,
body > * > header h2,
body > * > * > header h1 { font-size: 2em; }

But obviously that's far from waterproof. Having an extra element around an h1 that doesn't really mean it's deeper in the page structure will tend to pick way too small sizes. For example an unordered list with blocks that each have their own title will have something like

<section>
  <ul>
    <li>
      <header>
        <h1>Title of a block</h1>
      </header>
      content
    </li>
 </ul>
</section>

Which makes the <h1> appear much deeper than it actually is. What are good ways to handle this?

Answer 1

You should style the h1s based on the type of elements they are in, not just the depth.

For example, if you have general headings, article headings and sidebar item headings, you could do this:

h1 { font-size: 3em }
h2 { font-size: 2.5em }
article h1 { font-size: 2em }
article h2 { font-size: 1.5em }
aside h1 { font-size: 2.5em }

You would use whatever selector you use to select the articles or sidebar for layout (in my example, the article and aside tags, it might be section.sidebar or something else) to differentiate between different h1 tags.

There is not much of a connection between the depth of the tag, and the size (although there seems to be a pattern; deeper is smaller). There is however a connection between the convention used for marking up your sidebar, and the size of the headings in the sidebar. The CSS selectors for the headings will match up with the selectors for the layout, which shows the connection.