22 Chapter 2—Structure and Semantics for Documents
in HTML5. We now have to use hgroup for grouping such elements. The overall
position of the hgroup element is determined by the topmost heading. Other ele-
ments can occur within hgroup, but as a general rule, we usually have a combina-
tion of tags from h1 to h6.
We can glimpse a small but important detail from the markup specification: The
guideline is to format header elements as display: block in CSS, like all other
structural elements. This ensures that even browsers that do not know what to
do with the new tags can be persuaded to display the element concerned cor-
rectly. We only need a few lines of code to teach Internet Explorer 8 our new
header element, for example:<!--[if lt IE 9]>
<script>
document.createElement("<header");
</script>
<style>
header { display: block; }
</style>
<![endif]-->Of course there is also a detailed JavaScript library on this workaround, and it
contains not only header, but also many other new HTML5 elements. Remy
Sharp makes it available for Internet Explorer at http://code.google.com/p/
html5shim.In computer language, the term shim describes a compatibility workaround for
an application. Often, the term shiv is wrongly used instead. The word shiv was
coined by John Resig, the creator of jQuery, in a post of that title (http://ejohn.
org/blog/html5-shiv). It remains unknown whether he may in fact have meant
shim.As far as CSS is concerned, the header does not contain anything special. The
logo is integrated with float:left, the vertical distance between the two head-
ings h1 and h2 is shortened slightly, and the subtitle is italicized.2.2 Content with “article”
The article element represents an independent area within a web page, for ex-
ample, news, blog entries, or similar content. In our case the content of the blog
entry consists of such an article element combined with an img element to liven
things up, an h2 heading for the headline, a time and address element for the