XHTML tags have the primary purpose of structuring and arranging text and graphic content
on a Web page. They are not designed to style or decorate the content, only to arrange it so
that information is presented in a visual order for ease of reading and in a logical order for
There are, of course, numerous ways to style page presentations. You can apply different sizes,
colors, and font styles to text, and you can size and decorate images. Throughout these tutorials
you are introduced to styling methods that add these kinds of visual appeal to text and graphic
elements. First, however, it is necessary to become familiar with the basic tags that bring order
to page content.
Editor versus Browser Displays
Recall that Web page design begins with a standard document setup that gives its overall
structure. This page template is reproduced below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD/XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>...enter page title here</title>
...enter content here
Each page you design begins with this coding. You need to code an appropriate title for
the page within the <title> tag. This text appears in the
browser’s Title Bar when you open the page. Then you add information content inside the
<body> tag. Only the information appearing in the body
of the document shows up in the browser window. It is inside the
<body> tag where text and graphic images are placed, surrounded by XHTML
tags to order and arrange them.
It is important to understand that no formatting of Web pages takes place except
through XHTML tags.
A heading appears at the top of the document and all paragraphs are separated from one
another by single blank lines. Care has been taken to enter information in the editor in
much the same way it is to appear in the browser. This practice should be followed so that
the editor display itself is orderly and readable. However, editor formatting has little to
do with how the entered information appears as a Web page.
Its appearance is very different from its display in the editor. The reason is, of course,
that no XHTML tags appear in the document to guide the browser in laying out the text on the
page. Therefore, the browser treats the information as one continuous string of text. All
blank spaces and line breaks appearing in the editor are collapsed to single blank spaces
separating the words; the result is a single block of text on the page.
Over the next several topics you are introduced to a basic set of XHTML tags to bring
order and structural formatting to page content. Initial focus is on text arrangement;
later, basic tags for adding graphic images and links are introduced. The examples are
rather simple when it comes to styling. For the time being, though, you need to learn the
structural aspects of page design; you will learn styling techniques beginning with the