HTML5 Guidelines for Web Developers: Structure and Semantics for Documents
This chapter is from the book
This chapter is from the book
This chapter is from the book
Both the previously mentioned MAMA survey conducted by Opera and Google's study of Web Authoring Statistics of 2005 (http://code.google.com/webstats) conclude that it was common practice at that time to determine the page structure of web sites with the class or id attribute. Frequently used attribute values were footer, content, menu, title, header, top, main, and nav, and it therefore made sense to factor the current practice into the new HTML5 specification and to create new elements for structuring pages.
The result is a compact set of new structural elements—for example, header, hgroup, article, section, aside, footer, and nav—that facilitate a clear page structure without detours via class or id. To illustrate this, we will use a fictitious and not entirely serious HTML5 blog entry to risk a look ahead to the year 2022 (see Figure 2.1). But please concentrate less on the content of the post and focus instead on the document structure.
)
Figure 2.1 The fictitious HTML5 blog
Before analyzing the source code of the HTML5 blog in detail, here are a few important links, for example, to the specification HTML: The Markup Language Reference—subsequently shortened and referred to as markup specification at http://www.w3.org/TR/html-markup.
Here, Mike Smith, the editor and team contact of W3C HTML WG, lists each element's definition, any existing limitations, valid attributes or DOM interfaces, plus formatting rules in CSS notation (if to be applied)—a valuable help that we will use repeatedly. The HTML5 specification also contains the new structural elements in the following chapter: http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html
The .html and .css files to go with the HTML5 blog are of course also available online at:
- http://html5.komplett.cc/code/chap_structure/blog_en.html
- http://html5.komplett.cc/code/chap_structure/blog.css
At first glance, you can see four different sections in Figure 2.1—a header, the article, the footer, and a sidebar. All the new structural elements are used in these four sections. In combination with short CSS instructions in the stylesheet blog.css, they determine the page structure and layout.
2.1 Header with "header" and "hgroup"
In the header we encounter the first two new elements: header and hgroup. Figure 2.2 shows the markup and the presentation of the header:
<header>
<img>
<hgroup>
<h1>
<h2>
</hgroup>
</header>
)
Figure 2.2 The basic structure of the HTML5 blog header
The term header as used in the markup specification refers to a container for headlines and additional introductory contents or navigational aids. Headers are not only the headers at the top of the page, but can also be used elsewhere in the document. Not allowed are nested headers or a header within an address or footer element.
In our case the headline of the HTML5 blog is defined by header in combination with the logo as an img element and two headings (h1 and h2) surrounded by an hgroup element containing the blog title and a subtitle.
Whereas it was common practice until now to write the h1 and h2 elements directly below one another to indicate title and subtitle, this is no longer allowed 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 elements can occur within hgroup, but as a general rule, we usually have a combination 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 correctly. 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.
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 headings h1 and h2 is shortened slightly, and the subtitle is italicized.