HTML and CSS Reference
In-Depth Information
As you 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 reflects the early Web of scientists and engi-
neers (so there are elements like <kbd> , <samp> , and <var> ),
HTML5 reflects the Web as it was during its development: 30
elements are new, many of them inspired by the class and id
names above, because that's what developers 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 id=”sidebar”>
<li><a href=”last-week.html”>Last week</a></li>
<li><a href=”archive.html”>Archives</a></li>
<div class=”post”>
<p>Today I drank coffee for breakfast. 14 hours later,
¬ I went to bed.</p>
<div class=”post”>
<p>Ran out of coffee, so had orange juice for breakfast.
¬ It was from concentrate.</p>
<div id=”footer”>
<p><small> This is copyright by Bruce Sharp. Contact me to
¬ negotiate the movie rights.</small></p>
By applying some simple CSS to it, we'll style it:
#sidebar {float:left; width:20%;}
.post {float:right; width:79%;}
#footer {clear:both;}
Search WWH ::

Custom Search