HTML and CSS Reference
In-Depth Information
FIGURE 1.4
The HTML 4
structure of our blog.
div id="header"
div class="post"
div id=
"side-
bar"
div class="post"
div id="footer"
While there is nothing at all wrong with this markup (and it'll
continue working perfectly well in the new HTML5 world), most
of the structure is entirely unknown to a browser, as the only
real HTML element we can use for these important page land-
marks is the semantically neutral
<div>
(defi ned in HTML 4 as
“a generic mechanism for adding structure to documents”).
It's possible to imagine a clever browser having a shortcut key
that would jump straight to the page's navigation. The question
is: how would it know what to jump to? Some users use
<div
class=”menu”>
, others use
class=”nav”
or
class=”navigation”
or
class=”links”
or any number of equivalents in languages other
than English. The Opera MAMA tables above suggest that menu,
nav, sidebar, and navigation could all be synonymous.
HTML5 gives us new elements that unambiguously denote land-
marks in a page. So, we'll rewrite our page to use some of these
elements:
<header>
<h1>My interesting life</h1>
</header>
<nav>
<h2>Menu</h2>
<ul>
<li><a href=”last-week.html”>Last week</a></li>
<li><a href=”archive.html”>Archives</a></li>
</ul>
</nav>
<article>
<h2>Yesterday</h2>
<p>Today I drank coffee for breakfast. 14 hours later,
¬
I went to bed.</p>
</article>
