CSS: Organizing a Page with Paragraphs and Line Breaks

Organizing a Page with Paragraphs and Line Breaks

When a web browser displays HTML pages, it pays no attention to line endings or the number of spaces between words. For example, the top version of the poem shown in Figure 2.2 appears with a single space between all words, even though that's not how it's entered in Listing 2.2 line, no matter where the line breaks were in the original HTML file; in this example, the text all happened to fit on one line.

Listing 2.2. HTML for the Page Shown in Figure 2.2

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>The Advertising Agency Song</title>
  </head>

  <body>
    <p>
      When your client's    hopping mad,
      put his picture in the ad.

      If he still should    prove refractory,
      add a picture of his factory.

    </p>

    <hr />

    <p>
      When your client's hopping mad,<br />
      put his picture in the ad.
    </p>
    <p>
      If he still should prove refractory,<br />
      add a picture of his factory.
    </p>
  </body>
</html>

Figure 2.2. When the HTML in Listing 2.2 is viewed as a web page, line and paragraph breaks only appear where there are ` ` and `` tags.

You must use HTML tags if you want to control where line and paragraph breaks actually appear. To skip a line between paragraphs, put a  tag at the beginning of each paragraph and a  tag at the end. In other words, enclose the text of the paragraph within a pair of matching  and  tags.

The   tag forces a line break within a paragraph. Unlike the other tags you've seen so far,   doesn't require a closing  tagthis is one of those empty tags I was talking about earlier. This is also an example of where XHTML enters the web page picture, because normal HTML doesn't require the / />.

Watch Out!

Note that most web pages you see on the Internet today use   instead of   form of the tag now.

Likewise, the closing  tag is always optional in HTML 4 and is often left out by web page authors today. Closing  tags are required by the new XHTML standard, so I recommend that you always include them. Developing clean HTML coding habits is a very important part of becoming a successful web page designer.

The poem in Listing 2.2 and Figure 2.2 shows the   and  tags being used to separate the lines and verses of a rhyming advertising agency song. You might have also noticed the <hr /> tag in the listing, which causes a horizontal rule line to appear on the page (see Figure 2.2). Inserting a horizontal rule with the <hr /> tag also causes a line break, even if you don't include a   tag along with it. For a little extra blank space above or below a horizontal rule, you can put a  tag before the <hr /> tag and a  tag after it, effectively placing the horizontal rule within its own paragraph.

Like  , the <hr /> horizontal rule tag is an empty tag and therefore never gets a closing </hr> tag.

Try It Yourself

Take a passage of text and try your hand at formatting it as proper HTML:

Add <html><head><title>My Title</title></head><body> to the beginning of the text (using your own title for your page instead of My Title). Also include the boilerplate code at the top of the page that takes care of meeting the requirements of XHTML.

Add </body></html> to the very end of the text.

Add a  tag at the beginning of each paragraph and a  tag at the end of each paragraph.

Use   tags anywhere you want single-spaced line breaks.

Use <hr /> to draw horizontal rules separating major sections of text, or wherever you'd like to see a line across the page.

Save the file as mypage.html (using your own filename instead of mypage).

Watch Out!

If you are using a word processor to create the web page, be sure to save the HTML file in plain-text or ASCII format.

Open the file in a web browser to see your web page.

Organizing a Page with Paragraphs and Line Breaks

Listing 2.2. HTML for the Page Shown in Figure 2.2

Figure 2.2. When the HTML in Listing 2.2 is viewed as a web page, line and paragraph breaks only appear where there are <br /> and <p> tags.

Watch Out!

Watch Out!

Figure 2.2. When the HTML in Listing 2.2 is viewed as a web page, line and paragraph breaks only appear where there are `<br />` and `<p>` tags.