Question

In this layout it’s not valid because H1 isn’t the first rendered head element… is this a terrible sin or is it ok? Any way to fix this? Both columns are variable length so I don’t see any way round this.

Citation

Someone asked me to citate this:

http://www.w3.org/WAI/ER/IG/ert/ert-19991221.html#Technique3.5.A

Header elements (H1-H6) should be checked to ensure they are nested according to the following rules
The first header element in the document must be H1
There must be only one H1 element in the document
Header levels must not increase by more than 1 level. Example: H2 following H1 is good. H3 following H1 is bad.
Header elements can decrease by any level. Example: H2 following H5 is OK.

Answer 1

The <h2>s should be interpretable as subheadings of some <h1>.

In HTML5, you can define the document hierarchy by nesting <section> tags, and completely ignoring the <h1> – <h6> tags. You can see an HTML5 document outliner here, which illustrates this property.

Of course, the simplest fix is to just float your columns in the other order. At present they are both floated left. Switch the order in the markup, float ’em right, and suddenly, the headings are in the right order!

---

^{On a side note, the semantics of the ‘This Weeks Spotlight’ section of your site is wrong. It should be more like this}