Making sense of HTML5 - Build Windows 8 Apps with HTML5 and JavaScript - page 29

FIGURE 2-4 The multi.html page as it is rendered by Internet Explorer 10.
The preceding markup alone, however, doesn't produce the expected results and the page doesn't
really show any multicolumn layout. For that, you need to add ad hoc graphic styles to individual DIV
elements to make them float and anchor to the left or right edge. You add graphic style to an HTML
page using CSS markup, placed in a CSS file. The next chapter provides a quick summary of CSS. The
real point of this demo is a little different.
As you can see, each DIV element is made distinguishable from others only by the name of the id
attribute. Yet, each DIV element plays a clear role that makes it fairly different from others—header is
different from footer, and both are different from left or right sidebars.
Header and footer elements
HTML5 brings a selection of new block elements with specific names and clear behavior. The set of
new elements was determined by looking at the most common layouts used by page authors. For
example, in HTML5 header and footer are new plain block elements you use to indicate a header and
footer. Similar elements exist for most of the semantic elements in the previous listing. Here's how you
can rewrite the page multi.html using only HTML5-specific elements. Name this page multi5.html .
The listing below shows the content of the body tag for the new page.
<header>
Header of the page
<hr />
</header>
<nav>
<a href="..."> Home </a>
<a href="..."> Find us </a>
<a href="..."> Job opportunities </a>
</nav>
<article>
<aside>
Left sidebar