Paragraphs and Line Breaks

Now that we understand whitespace, it's time to start learning how to manipulate it. Lets create a quotes page with some of my favorite quotes from Battlestar Galactica.

Quotes lifted from IMDB. Used with permission.
source

Quotes Page:

<html>
<head>
<title>Battlestar Galactica Quotes</title>
</head>
<body>

Battlestar Galactica Quotes:

Admiral Cain: Commander, why are you launching 
              Vipers?
Commander Adama: Please arrange for Chief Tyrol 
                 and Lieutenant Agathon to be 
                 handed over to my marines as 
                 soon as they arrive. 
Cain: I don't take orders from you! 
Adama: Call it whatever you like. I'm 
       getting my men. 
Cain: You are making *such* a mistake! 
Adama: I'm getting my men.

Commander Adama: There's a reason you separate 
                 military and the police. One 
                 fights the enemies of the state,
                 the other serves and protects 
                 the people. When the military 
                 becomes both, then the enemies 
                 of the state tend to become 
                 the people. 

Commander Adama: Sometimes, you have to 
                 roll a hard six.

</body>
</html>

Great. Lets load it into the browser.

results

Quotes Page:

Battlestar Galactica Quotes: Admiral Cain: Commander, why are you launching Vipers? Commander Adama: Please arrange for Chief Tyrol and Lieutenant Agathon to be handed over to my marines as soon as they arrive. Cain: I don't take orders from you! Adama: Call it whatever you like. I'm getting my men. Cain: You are making *such* a mistake! Adama: I'm getting my men. Commander Adama: There's a reason you separate military and the police. One fights the enemies of the state, the other serves and protects the people. When the military becomes both, then the enemies of the state tend to become the people. Commander Adama: Sometimes, you have to roll a hard six.

Whoops. Oh yeah, almost forgot. XHTML collapses whitespace. So we're gonna need to do something else in order to create whitespace and make these quotes readable.

The <p> Tag

We use the <p>aragraph tag to divide text into paragraphs. The usage is straightforward.

source

Quotes Page:

<html>
<head>
<title>Battlestar Galactica Quotes</title>
</head>
<body>
<p>
Battlestar Galactica Quotes:
</p>

<p>
  Admiral Cain: Commander, why are you launching 
                Vipers?
  Commander Adama: Please arrange for Chief Tyrol 
                   and Lieutenant Agathon to be 
                   handed over to my marines as 
                   soon as they arrive. 
  Cain: I don't take orders from you! 
  Adama: Call it whatever you like. I'm 
         getting my men. 
  Cain: You are making *such* a mistake! 
  Adama: I'm getting my men.
</p>

<p>
  Commander Adama: There's a reason you separate 
                   military and the police. One 
                   fights the enemies of the state,
                   the other serves and protects 
                   the people. When the military 
                   becomes both, then the enemies 
                   of the state tend to become 
                   the people.
</p>

<p>
  Commander Adama: Sometimes, you have to 
                   roll a hard six.
</p>
</body>
</html>

Lets crack that open in a browser.

results

Quotes Page:

Battlestar Galactica Quotes:

Admiral Cain: Commander, why are you launching Vipers? Commander Adama: Please arrange for Chief Tyrol and Lieutenant Agathon to be handed over to my marines as soon as they arrive. Cain: I don't take orders from you! Adama: Call it whatever you like. I'm getting my men. Cain: You are making *such* a mistake! Adama: I'm getting my men.

Commander Adama: There's a reason you separate military and the police. One fights the enemies of the state, the other serves and protects the people. When the military becomes both, then the enemies of the state tend to become the people.

Commander Adama: Sometimes, you have to roll a hard six.

Much better. We are certainly getting there. Each paragraph is now surrounded by two line breaks.

Digression on Correct <p> Usage

Sidenote: Indentation
You may have noticed that when I enclosed every paragraph in <p> tags in the above example, I also slightly indented each paragraph. Remember earlier when we discussed the fact that because XHTML ignores whitespace, using whitespace can make our code easier to read. Good use of indentation is a prime example of that. I like to indent all block level elements. Your style of indentation will evolve as you learn more about XHTML, but it is important to make some use of indentation, as it can make your code a lot easier to read for yourself and others.

It is important to think of the <p> tag as a tag that delineates a block of text, as supposed to a tag that creates a "paragraph break," or more simply, two line breaks. This is because the <p> tag is what is known as a block-level tag. A block-level tag is a tag that delineates a block of text, tags, or other objects. Like all XHTML elements, the browser needs to know where it ends; thus the </p> tag.

I point this out because a number of older webpages and even some current web designers use the paragraph tag to create two line breaks. This is incorrect.

source

Incorrect <p> Tag Usage

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

On top of being semantically incorrect, this also violates one of the rules regarding tags: all tags must close. Because so many pages were created with this in mind, modern browsers will try and guess where </p> tags should go. This creates two problems:

While having paragraphs that aren't surrounded by <p> tags might not seem to be a problem right now, later on when we use CSS to change the attributes of entire paragraphs, having some paragraphs that aren't enclosed by <p> tags will become a serious problem. Say you use CSS to change the font of all paragraphs. If some of your paragraphs aren't enclosed properly, those paragraphs will not inherit that formatting. It's best to get in this habit right from the start.

The <br /> Tag

Sidenote: Self-Closing Tags
Why does the <br /> tag look different than the other tags? Specifically, what is that slash doing in there? <br /> is slightly different from other tags – the <br /> tag is self-closing. Remember, all XHTML elements must close. Well, because the <br /> tag has no natural place to close, we must artificially close it. There are a handful of other tags that self-close, and they all follow the same syntax: a space and a slash after the tag name, but before the >.

It's worth noting that self-closing tags are XHTML-specific; see the XHTML page for details.

Now we need to do something about the line breaks within the paragraphs. We can't use <p> for two reasons: that would create too much space between each line, and it would be semantically incorrect. (Is each line a paragraph? No.)

The <br />eak tag to the rescue! The <br /> does exactly what it sounds like it will: create a single line break. Lets apply it to our quotes page.

source

Quotes Page:

<html>
<head>
<title>Battlestar Galactica Quotes</title>
</head>
<body>
<p>
Battlestar Galactica Quotes:
</p>

<p>
  Admiral Cain: Commander, why are you launching 
                Vipers? <br />
  Commander Adama: Please arrange for Chief Tyrol 
                   and Lieutenant Agathon to be 
                   handed over to my marines as 
                   soon as they arrive. <br />
  Cain: I don't take orders from you! <br />
  Adama: Call it whatever you like. I'm 
         getting my men. <br />
  Cain: You are making *such* a mistake! <br />
  Adama: I'm getting my men. 
</p>

<p>
  Commander Adama: There's a reason you separate 
                   military and the police. One 
                   fights the enemies of the state,
                   the other serves and protects 
                   the people. When the military 
                   becomes both, then the enemies 
                   of the state tend to become 
                   the people.
</p>

<p>
  Commander Adama: Sometimes, you have to 
                   roll a hard six.
</p>
</body>
</html>

Lets see what that did:

results

Quotes Page:

Battlestar Galactica Quotes:

Admiral Cain: Commander, why are you launching Vipers?
Commander Adama: Please arrange for Chief Tyrol and Lieutenant Agathon to be handed over to my marines as soon as they arrive. Cain: I don't take orders from you!
Adama: Call it whatever you like. I'm getting my men.
Cain: You are making *such* a mistake!
Adama: I'm getting my men.

Commander Adama: There's a reason you separate military and the police. One fights the enemies of the state, the other serves and protects the people. When the military becomes both, then the enemies of the state tend to become the people.

Commander Adama: Sometimes, you have to roll a hard six.

Looking good! Lets go onto the next section, headings and physical styles.