XHTML Tutorial #2 - Text Elements

The paragraph element

In Tutorial #1 we introduced the basic structure of a web page and in that basic structure placed an <h1> header and a <p> paragraph to display some text. Since the <p> </p> paragraph tag pair is probably one of the most common tag pairs - typically found on almost every web page - this is a good place to start.

Let's look at a little bit of code that does not have <p> </p> tag pairs to delineate the different paragraphs. Open your favorite text editor and enter the following code. Save the file as example_2a.htm. If you need help saving the file, check back with Tutorial #1 here.

Now open this example in your favorite browser. It should look something like this:

So what happened here? The browser interpreted the <CR><LF> between the two lines and redered it as a single space. The browser will run the two lines together unless it is specifically instructed to render the lines as separate paragraphs. Let's try that example again, this time with the proper tags.

Save this example as example_2b.htm and view it in your browser. It now should look like this:

How paragraphs are displayed

There is something you should know about a "bare" tag like this <p> </p> pair. At this point, we have not applied any style rules to specify how the paragraph should appear. We'll learn how to do that later. But since we have not specified styling, the user's browser will make those decisions.

That means the text could appear in a variety of fonts, sizes, colors, background colors, margins, line spacings, etc. Even different browsers have different defaults for displaying items.

On the next page of this tutorial, we will look at adding header elements to an XHTML page.

Additional resources

• <p> </p> tag

BestWebTutorials.com is a free service of CrystalClearWeb.net. You can help us keep providing free tutorials and information by:

• Link to us
• Tell a friend
• Correct any  you might find
• Make for improvement
• Make a donation