HTML and CSS Reference
In-Depth Information
As we can see, once we remove obviously presentational
classes, we're left with a good idea of the structures that
authors are trying to use on their pages.
Just as HTML 4 refl ects the early Web of scientists and engi-
neers (so there are elements like
<kbd>
,
<samp>
, and
<var>
),
HTML5 refl ects the Web as it was during its development: 28
elements are new, many of them inspired by the class and id
names above, because that's what developers actually build.
So, while we're in a pragmatic rather than philosophical mood,
let's actually use them. Here is a sample blog home page
marked up as we do in HTML 4 using the semantically neutral
<div>
element:
<div id=”header”>
<h1>My interesting life</h1>
</div>
<div id=”sidebar”>
<h2>Menu</h2>
<ul>
<li><a href=”last-week.html”>Last week</a></li>
<li><a href=”archive.html”>Archives</a></li>
</ul>
</div>
<div class=”post”>
<h2>Yesterday</h2>
<p>Today I drank coffee for breakfast. 14 hours later,
¬
I went to bed.</p>
</div>
<div class=”post”>
<h2>Tuesday</h2>
<p>Ran out of coffee, so had orange juice for breakfast.
¬
It was from concentrate.</p>
</div>
<div id=”footer”>
<p><small> This is copyright by Bruce Sharp. Contact me to
¬
negotiate the movie rights.</small></p>
</div>
By applying some simple CSS to it, we'll style it:
#sidebar {float:left; width:20%;}
.post {float:right; width:79%;}
#footer {clear:both;}
Diagrammatically, the page looks like
Figure 1.4
.
