XHTML Tutorial: Standards-Based Web Design

by Paul Bohman

• No previous page |
• Basic XHTML Components and Syntax

Introduction to XHTML and "Web Pages"

XHTML and "Web Pages"

So what is a web page? When you type in www dot whatever, what happens? How do you get the information? How did it get there to begin with? The short answer is that a web page is nothing but text. Sometimes that text includes references to images, and sometimes the text has been programmed to do things other than just sit there, but a web page is still just text. This is an over-simplification, but it's still true (or at least it's true enough for our purposes).

The text in web pages has some extra invisible "tags" or "elements" or "markup" (these terms often are used interchangeably by developers) that give text some formatting. For example, if you want to designate a chunk of text as a paragraph, you have to enclose it in paragraph elements, like this:

<p>This is a (very short) paragraph.</p>

You put a <p> at the beginning of the paragraph to say that this is where the paragraph begins, and you put a </p> at the end of the paragraph to say that this is where the paragraph ends. There are similar elements for headings, bulleted lists, images, and other items that you can include in web pages. Here is another example of part of a web page:

<h1>My Day at the beach</h1>
<p>I went to the beach today. It was fun. 
Here are some of the things I saw:</p>
<ul>
<li>Seashells</li>
<li>Seagulls</li>
<li>Seaweed</li>
</ul>

The <ul> element stands for "unordered list," which means that it will create a bulleted list. The <li> elements are "list items" within that bulleted list. Notice that there is an opening element (for example, <h1>, <p>, <ul>, or <li>) and a closing element (for example, </h1> </p>, </ul>, or </li>) surrounding each bit of text. The closing elements always have slashes ( / ).

In a web browser the above example would look something like this:

Web browsers—such as Firefox, Internet Explorer, Safari, and Opera—read the XHTML elements and interpret them so that they display in a more human-readable format.