HTML and CSS Reference
Prior to HTML5, the <body> section of a typical web page might be coded like this:
<img src=”images/logo.jpg” />
<li><a href=”about.htm”>About Us</a></li>
</div> <!-- End nav -->
</div> <!-- End header -->
<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 -->
<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 -->
<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.