goer.org | HTML Tutorial : Basic : Paragraph Breaks

Table of Contents

About
Introduction
Diving In
Structure
Tinkering
Tags
Attributes
Browser Tools
Basic
Paragraph Breaks
Headings
Font Styles
Colors
Links
Images
Lists
Intermediate
Style Sheets
Classes and IDs
Div and Span
Font Control
Borders
Margins and Padding
Align and Indent
Advanced
Tables
Miscellany
SHTML

Paragraph Breaks

In the Introduction, we covered some basic HTML concepts. Now we're ready to start learning some HTML tags by working with a concrete example.

A Favorite Quotes Page

Let's say we want to make a website that lists some TV and movie quotes.

(Quotes courtesy of The Internet Movie Database. Used with permission.)

Unformatted Text (source)

<html>
<head>
  <title>Buffy Quotes: Unformatted</title>
</head>
<body>
My Buffy Quotes

Angel: "Dear Buffy..." Hmmm. I'm still trying to 
       decide the best way to send my regards.
Spike: Why don't you rip her lungs out? That might 
       make an impression.
Angel: Lacks... poetry.
Spike: Doesn't have to. What rhymes with lungs?

Cordelia: You're really campaigning for bitch of 
          the year, aren't you?
Buffy: As defending champion, you nervous?

Principal Snyder: It's woolly-headed liberal thinking 
                  like that that gets you eaten.
</body>
</html>

Now, this is a perfectly acceptable web page. The <html>, <head>, <title>, and <body> tags are all in the right places. In fact, this example is just like the "Simple Web Page" from the Diving In section, except that the text is a little different.

There is one small problem, however. As we saw in the Tinkering section, HTML collapses whitespace. This means that all our text will collapse into a single paragraph and look like this:

Unformatted Text (Results)

My Buffy Quotes Angel: "Dear Buffy..." Hmmm. I'm still trying to decide the best way to send my regards. Spike: Why don't you rip her lungs out? That might make an impression. Angel: Lacks... poetry. Spike: Doesn't have to. What rhymes with lungs? Cordelia: You're really campaigning for bitch of the year, aren't you? Buffy: As defending champion, you nervous? Principal Snyder: It's woolly-headed liberal thinking like that that gets you eaten.

Try this yourself -- copy and paste the HTML from the Unformatted Text example into a file and view the file on your own computer.

The <p> Tag

The results are terrible -- not what we want at all. Let's try to make this page more readable.

The <p> tag breaks text into paragraphs. Any text that you surround with a <p> and a closing </p> becomes a separate block. Let's see how this works. For brevity, we will start to leave off the structural tags: <html>, <head>, and <body>.

Paragraphs (source)

<p>
  My Buffy Quotes
</p>
<p>
  Angel: "Dear Buffy..." Hmmm. I'm still trying to 
          decide the best way to send my regards.
  Spike: Why don't you rip her lungs out? That might 
         make an impression.
  Angel: Lacks... poetry.
  Spike: Doesn't have to. What rhymes with lungs?
</p>
<p>
  Cordelia: You're really campaigning for bitch of 
            the year, aren't you?
  Buffy: As defending champion, you nervous?
</p>
<p>
  Principal Snyder: It's woolly-headed liberal thinking 
                    like that that gets you eaten.
</p>

We've surrounded all the major blocks of text with <p>aragraph tags. What do the results look like? (Try it.)

Paragraphs (Results)

My Buffy Quotes

Angel: "Dear Buffy..." Hmmm. I'm still trying to decide the best way to send my regards. Spike: Why don't you rip her lungs out? That might make an impression. Angel: Lacks... poetry. Spike: Doesn't have to. What rhymes with lungs?

Cordelia: You're really campaigning for bitch of the year, aren't you? Buffy: As defending champion, you nervous?

Principal Snyder: It's woolly-headed liberal thinking like that that gets you eaten.

Each block is followed by two line breaks. This is a good start!

A Digression: Correct <p> Tag Usage

Notice that each paragraph is surrounded by an opening tag, <p>, and a closing tag, </p>. That's because the <p> tag is a block tag; it "does something" to a block of text. The browser needs to know when the block ends. Thus, the <p> tag needs a closing tag, </p>.

This is a subtle point, but a substantial number of web designers take the <p> tag to mean "make a new paragraph here" or "put two line breaks here", rather than "enclose this text and make it a paragraph".

Incorrect <p> Tag Usage

Text Block 1:  Blah blah blah...
<p>
Text Block 2:  Blah blah blah...
<p>
Text Block 3:  Blah blah blah...

What happens? (Try it.) Actually, this works just fine. Text Block 2 and 3 are paragraphs (the browser "inserts" a closing </p> tag right before each <p> tag). Text Block 1 is not actually a HTML paragraph. However, you get two line breaks between each text block, which is the same result as doing it the proper way.

The reason this trick works is because browser vendors know that many people use the <p> incorrectly. So all major browsers actually display these broken web pages as if the closing tag was actually there. The browsers "guess" where the closing tag is supposed to go. So what's the big deal? Why not do it the "improper" way? After all, you don't have to type all those </p> tags.

The main practical reason is that you can use a method called "Cascading Style Sheets" (CSS) to control the appearance of all tags of a particular type. For example, you could set all your paragraphs to be red 12pt Times New Roman throughout your entire site. If you're in the habit of using the paragraph tag properly, your CSS will work just fine; if you're not, then some of your "paragraphs" will not display properly. It's better to do it the right way from the start.

The <br> Tag

We still need to break up the related lines of dialogue. Now, we could do this with the <p> tag, but then all lines would be equally spaced. and so it wouldn't be clear that the exchanges between Angel and Spike or between Cordelia and Buffy belong together. How do we get finer control... say, one line break?

Line Breaks (source)

<p>
  My Buffy Quotes
</p>
<p>
  Angel: "Dear Buffy..." Hmmm. I'm still trying to 
          decide the best way to send my regards.<br>
  Spike: Why don't you rip her lungs out? That might 
         make an impression.<br>
  Angel: Lacks... poetry.<br>
  Spike: Doesn't have to. What rhymes with lungs?
</p>
<p>
  Cordelia: You're really campaigning for bitch of 
            the year, aren't you?<br>
  Buffy: As defending champion, you nervous?
</p>
<p>
  Principal Snyder: It's woolly-headed liberal thinking 
                    like that that gets you eaten.
</p>

Unlike the <p> tag, the <br> tag does not enclose any other HTML. There is no such thing as a closing </br> tag. Also note that we don't have to put a final <br> tag on the last line of each dialogue exchange. The <p> tag will take care of the last line break for us.

So now we've separated each speaker with a new line. How does this look? (Try it.)

Line Breaks (Results)

My Buffy Quotes

Angel: "Dear Buffy..." Hmmm. I'm still trying to decide the best way to send my regards.
Spike: Why don't you rip her lungs out? That might make an impression.
Angel: Lacks... poetry.
Spike: Doesn't have to. What rhymes with lungs?

Cordelia: You're really campaigning for bitch of the year, aren't you?
Buffy: As defending champion, you nervous?

Principal Snyder: It's woolly-headed liberal thinking like that that gets you eaten.

Now each line of dialogue is on its own line on the page. The quotes are considerably easier to read.