Layout - Refactoring HTML: Improving the Design of Existing Web Applications

HTML and CSS Reference

In-Depth Information

The Content

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

Code View:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Dracula, Page 1</title>

</head>

<body>

<h1>Jonathan Harker's Journal</h1>

<p>

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.

</p>

<p>

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.

</p>

</div>

<ul>

</ul>

Search WWH ::

Custom Search

Home