HTML and CSS Reference
In-Depth Information
<div class
=
"nav"
>
<ul><!-- Main Site Nav here --></ul>
</div>
</div>
<div class
=
"sidebar"
>
<h3>
Links Heading
</h3>
<ul><!-- Sidebar links --></ul>
</div>
<div class
=
"main"
>
<h4>
Blog Post Title
</h4>
<div class
=
"meta"
>
Published by Joe on 01 May 2011 @ 12:30pm
</div>
<div class
=
"post"
>
<!-- Actual blog post -->
</div>
</div>
<div class
=
"footer"
>
<ul><!-- Footer links --></ul>
<!-- Copyright info -->
</div>
The previous code isn't wrong. It's perfectly valid to use it in HTML5, and you can abso-
lutely continue to use
<div>
elements with semantic class names if you wish. But from a
semantic point of view, this approach poses a couple of problems:
• By using the old standard, you wind up separating areas of the blog post using
named classes. This is fine, but the class-naming convention is up to the author.
Our “header” might be your “heading”; we call the main section “main,” but you
might call it “body” or “article.”
• Some people may prefer to use IDs instead of classes. They may use id=“header”
whereas others might use class=“header.”
In short, a search engine or other computer-controlled application has no way to reliably
determine what each section represents.
This is where the new semantic elements come into play. Rather than using classes and IDs
for sections like headings, navigation, and footers, you now use several different HTML
elements, shown in the following listing. Add this code between the
<body>
tags of the
hello.html file.
