Learning XHTML

Last week you learned how to build a basic Web page. But even if you put your text in nice neat paragraphs like in a word processor, it all ended up on one line on the Web page. This week, we'll learn how to fix that.

What is a Tag?
In the course of this class, you will read about tags or elements (as they are called in XHTML). But what are they?

In a simple sense, XHTML tags are the parts of the XHTML document that don't display when you view your Web page in a browser. In most cases, you will surround the text you want to display with a tag or tags to change the way that text displays or define it as a specific item in the document. If you're still not understanding this, read my article HTML vs. What's On the Screen for more help.

When learning XHTML, there are two tags that most people learn first, <p> <p/> and <br /> the paragraph and line break tags. These tags put natural breaks in your text so that it is easier to read and makes sense.

These tags are fairly easy to use, but they can be misused.

The Paragraph (<p> <p/>) Tag
When you want to create a paragraph (a group of text followed by a blank line), you need to surround that text with the <p> and <p/> codes or the paragraph tag. The paragraph tag (<p><p/>) requires the use of the end tag in valid XHTML.

Use the paragraph tag when you want to break up two streams of information into separate thoughts. Most browsers display paragraphs with one blank line between them.

The Line Break (<br />) Tag
The <br /> tag is simply a forced line break within the text flow of the Web page. Use it when you want the text to continue on the next line, such as with poetry.

The <br /> tag also stops the alignment of text beside images. If you have an image with an align="right|left|center" all XHTML elements (text, images, etc.) will appear beside the image, rather than below it. If you use the CLEAR="all|left|right|center|none" attribute on a <br /> tag, all XHTML elements after that tag will display below the image.

For example: My signature is aligned to the left, and all this text is displayed to the right of it. When I add in the <br clear="all" /> tag
the text appears below the image.

Two Common Misuses

• Using <br /> to adjust the length of your text lines.
  This will insure that your pages look great on your browser, but not necessarily on another browser. This is because the browsers will automatically put in word wrapping and then when it comes to your <br /> will wrap the text again, resulting in short lines and long lines and choppy text. Solution: Use CSS to define the width of your pages.
• Using <p> <p /> to add more space
  This is a common practice of some editors, and while it is not technically wrong, it results in awkward looking XHTML and can often get really confusing to edit later. It also can result in unexpected spacing in different browsers, as they all seem to interpret this differently. Solution: The best solution is to use Cascading Style Sheets to set the margin of your elements.

Learn more about <p> <p />