HTML and CSS Reference
Arranging the HTML itself is the easiest part. Divide each separate section into its own div element. Give the
div element a unique id attribute by which it can be addressed. These div s can be nested if necessary. Ideally,
the main content div should appear before any sidebars, headers, or footers. This way, screen readers that
access the page linearly will start with the most important content on the page. So will search engine robots
that often assign a higher priority to content that appears earlier in the page.
Listing 5.1 demonstrates a typical two-column HTML page. There are two div s: Pages and Content . The main
content contains the first page from Bram Stoker's Dracula. The left-hand column contains links to other pages
in this topic. I've abridged the text somewhat for printing in this topic, but this should give you an idea of the
structure we'll be dealing with. In the following sections, we'll style this page.
Listing 5.1. A Two-Column HTML Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<title>Dracula, Page 1</title>
<h1>Jonathan Harker's Journal</h1>
3 May. Bistritz.--Left Munich at 8:35 P.M., on 1st May,
arriving at Vienna early next morning; should have arrived
at 6:46, but train was an hour late. Buda-Pesth seems a
wonderful place, from the glimpse which I got of it from the
train and the little I could walk through the streets. I feared
to go very far from the station, as we had arrived late and would
start as near the correct time as possible.
The impression I had was that we were leaving the West and
entering the East; the most western of splendid bridges over
the Danube, which is here of noble width and depth, took us
among the traditions of Turkish rule.
<li><a href='page1.html'>Page 1</a></li>
<li><a href='page2.html'>Page 2</a></li>
<li><a href='page3.html'>Page 3</a></li>
<li><a href='page291.html'>Page 291</a></li>
<li><a href='page292.html'>Page 292</a></li>
<li><a href='page293.html'>Page 293</a></li>