HTML and CSS Reference
In-Depth Information
Chapter 5. Layout
Well-formedness and validity check basic syntactic constraints. The next step is to make sure the semantics are
appropriate. Each element should be used for its intended purpose:
ul
for unordered lists,
ol
for numbered
lists,
table
for tabular data,
blockquote
for quotations,
h1
-
h6
for headings, and so forth. Using the proper
semantics for each element renders pages more intelligible to screen readers, and makes sure they can be
displayed properly on different platforms. As you'll see, proper semantics have a number of other beneficial
characteristics as well.
Many good semantic elements, such as
ul
,
blockquote
, and
table
, have been abused to achieve particular
layout effects. The goal of this abuse is to produce a very particular appearance for a page. However, that
appearance rarely extends across browsers, almost never across platforms, and often not anywhere beyond the
designer's own computer. Proper HTML can account for this, but you have to stop thinking about what the page
looks like
and start thinking about what it
means
.
Of course, we do want our pages to have pleasing appearances. We want them to stand out from the
competition. It is possible to achieve this by placing all the presentation information in a separate CSS
stylesheet. The CSS describes what the page looks like. However, browsers are free to use a different or
modified stylesheet if they choose. Indeed, you are free to send different stylesheets to different browsers,
tailored to each one's unique capabilities.
In modern browsers, CSS enables much greater control over the appearance of a page. It's not merely that the
fanciest sites can be duplicated in CSS. They can
only
be designed in CSS. Creating a modern page requires
moving away from tabular layout and font tags to XHTML cleanly separated from CSS.
Replace Table Layouts
Remove all table layouts and replace them with
div
elements that linearize the content. Then use a CSS
stylesheet to position the
div
s in the form you want.
Code View:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3 Column Page</title>
</head>
<body>
<table>
<tr>
<td valign="top" id="Left">
Left column content
</td>
<td valign="top" id="Center">
Center column content
</td>
<td valign="top" id="Right">
Right column content
</td>
</tr>
</table>
Search WWH ::
Custom Search