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

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; }
body > * > header h1 { font-size: 2.5em; }
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

        <h1>Title of a block</h1>

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


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.

Need Your Help

Possiblity of adding libraries to android architecture


Iam new to Android, and got some doubts regarding the Android OS. My question is, there are certain libraries and framework specified in the Android Architecture.So is there any possibility to add ...

Datatable Row Selection Primefaces

jsf primefaces datatable row

I am trying to implement row selection for a datatable with primefaces, but when I click on a row, nothing displays. I've narrowed it down to the setter for the selected car is not getting called, ...