HTML and CSS Reference
In-Depth Information
Diagrammatically, the page looks like
Figure 1.4
.
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>
(defined in HTML 4 as
“a generic mechanism for adding structure to documents”).
So, if it displays fine, what's wrong with this? Why would we
want to use more elements to add more semantics?
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 authors write
<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,
but there's no guarantee; a restaurant website might use
<div
class=”menu”>
not as navigation but to list the food choices.
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>
