More about aside elements – going for block

Yesterday I posted some info about testing the HTML5 aside element in several browsers, and pointed out that some browsers don’t render styles properly for it. Lars Gunter came into the comments with the tip that using display: block would solve the problem.

Today at Dev.Opera, Bruce Lawson and Chris Mills posted an article called New Structural Elements in HTML5. Look at this snippet:

First of all, if you put an unknown element into a web page, by default the browser will just treat it like a <span>, ie, an anonymous inline element. Most of the HTML5 elements we have looked at in this article are supposed to behave like block elements, therefore the easiest way to make them behave properly in older browsers is by setting them to display:block; in your CSS:

article, section, aside, hgroup, nav, header, footer,
figure, figcaption {
  display: block;
}

This solves all your problems for all browsers except one. Have a guess which one? … Yup, amazing isn’t it, that IE should prove to be trickier than the other browsers, and refuse to style elements it doesn’t recognise? The fix for IE is illogical, but fortunately pretty simple. For each HTML5 element you are using, you need to insert a line of JavaScript into the head of your document, like so:

<script>
    document.createElement('article');
    document.createElement('section');
    document.createElement('aside');
    document.createElement('hgroup');
    document.createElement('nav');
    document.createElement('header');
    document.createElement('footer');
    document.createElement('figure');
    document.createElement('figcaption');
</script>

This answers several questions for me. I’ve read a number of posts by Bruce Lawson at HTML5 Doctor, but haven’t seen this bit of advice anywhere before Lars mentioned it yesterday. And I’ve been doing a lot of reading about HTML5! So I’m here to say thank you to Lars, Bruce and Chris. You guys rock. Or block.

Leave a Reply