HTML and CSS Reference
In-Depth Information
Prior to HTML5, the
<body>
section of a typical web page might be coded like this:
<div id=”outerWrapper”>
<div id=”header”>
<img src=”images/logo.jpg” />
<div id=”nav”>
<ul>
<li><a href=”home.htm”>Home</a></li>
<li><a href=”products.htm”>Products</a></li>
<li><a href=”services.htm”>Services</a></li>
<li><a href=”about.htm”>About Us</a></li>
</ul>
</div> <!-- End nav -->
</div> <!-- End header -->
<div id=”contentWrapper”>
<div id=”mainContent”>
<h1>Welcome to Our Company Website</h1>
<p>We Make Great Stuff</p>
<p>Our stuff is the best stuff around. Nobody makes stuff like our stuff.
Best of all, our stuff is the least expensive stuff you'll ever see -
which makes our stuff a terrific value.</p>
<p>When you need stuff, come see ours! You'll be glad you did!</p>
</div> <!-- End mainContent -->
<div id=”sideContent”>
<h2>People Like Our Stuff</h2>
<p>Here's what people have to say about our stuff:</p>
<p>It's really great stuff!! <br /> - Joe Schmoe</p>
<p>Wow! Super stuff! <br /> - Jane Schmain</p>
<p>The best stuff at the best price! <br /> - Bob Schmob</p>
</div> <!-- End sideContent -->
</div> <!-- End contentWrapper -->
<div id=”footer”>
<p>Copyright © 2011 Good Stuff, Inc.
</div> <!-- End footer -->
</div> <!-- End outerWrapper -->
Depending on the CSS employed, this HTML page might be rendered like the one shown in
Figure 27-1. Around all of the other code is a
<div>
tag with an
id
of
outerWrapper
. First,
within that tag is the header
<div>
tag, which contains a logo image and a
<div>
tag filled with
a list of links, identified with an
id
of
nav
. The content section comes next with two nested
<div>
tags,
mainContent
and
sideContent
, all with a
<div>
tag bearing an
id
of
contentWrapper
.
After the content, the page is finished off with a final
<div>
tag,
footer
. All in all, seven
<div>
tags are used in this code.
There is certainly nothing wrong with coding in this manner for today's standards. However, even
a brief look at the code reveals a heavy reliance on
<div>
tags. The
<div>
tags by themselves have
no real semantic meaning, although the associated
id
attributes attempt to address the situation.
The problem is that there is no continuity between designers and, thus, sites. One designer might use
sideContent
as the
id
for a section of the page that contains tangentially relevant content, whereas
another might use
sidebar
and a third
rightColumn
. The lack of standards makes moving the same
content to different devices and other pages problematic.
