Paragraph Breaks
In Chapter 1, Getting Started, we covered some basic HTML concepts, including the fact that HTML ignores whitespace. This seems a little crazy, doesn’t it? How can we do we compose a readable webpage without everything collapsing into a single giant glob of text?
Let’s say we want our website to display some lines from an obscure playwright:
Example 2.1. Unformatted Text
<html>
<head>
<title>Macbeth: 1, Reckless Youngsters: 0</title>
</head>
<body>
MACBETH: My name's Macbeth.
YOUNG SIWARD: The devil himself could not pronounce a title
More hateful to mine ear.
MACBETH: No, nor more fearful.
YOUNG SIWARD: Thou liest, abhorred tyrant; with my sword
I'll prove the lie thou speak'st.
[They fight, and young Seward is slain.]
MACBETH: Thou wast born of woman.--
But swords I smile at, weapons laugh to scorn,
Brandish'd by man that's of a woman born.
</body>
</html>
Now, this is a perfectly acceptable web page. The html, head, title, and body elements are all in the right places. In fact, this example is just like the “Simple Web Page” from Diving In, except that the text is a little different.
There is one small problem, however. HTML collapses whitespace, which means that all our text will collapse into a single paragraph and look something like this:
MACBETH: My name’s Macbeth. YOUNG SIWARD: The devil himself could not pronounce a title More hateful to mine ear. MACBETH: No, nor more fearful. YOUNG SIWARD: Thou liest, abhorred tyrant; with my sword I’ll prove the lie thou speak’st. [They fight, and young Seward is slain.] MACBETH: Thou wast born of woman.– But swords I smile at, weapons laugh to scorn, Brandish’d by man that’s of a woman born.
This is terrible! Let’s try to make this page more readable.
The p Element
The p element 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 elements: html, head, and body.
Example 2.2. Paragraphs
<p> MACBETH: My name's Macbeth. </p> <p> YOUNG SIWARD: The devil himself could not pronounce a title More hateful to mine ear. </p> <p> MACBETH: No, nor more fearful. </p> <p> YOUNG SIWARD: Thou liest, abhorred tyrant; with my sword I'll prove the lie thou speak'st. </p> <p> [They fight, and young Seward is slain.] </p> <p> MACBETH: Thou wast born of woman.-- But swords I smile at, weapons laugh to scorn, Brandish'd by man that's of a woman born. </p>
Each block is followed by two line breaks. This is a good start!
Each paragraph is surrounded by an opening tag, <p>, and a closing tag, </p>. The p element is a block element; it “does something” to a block of text. The browser must identify where the block ends, so the <p> open tag needs a closing tag, </p>.
Unfortunately, many people take the p element to mean “make a new paragraph here” or “put two line breaks here,” rather than “enclose this text and make it a paragraph.” And thus, you see a lot of code that looks like this:
Example 2.3. Incorrect p 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.) Text Block 2 and 3 are paragraphs (the browser “inserts” a closing </p> element right before each <p> element). Text Block 1 is not actually a HTML paragraph. However, the page displays with two line breaks between each text block, which appears to result in the same thing as doing it the proper way.
So what’s the big deal? Why not do it the “improper” way, and avoid typing all those </p> closing tags? Well, later we’ll talk about how to use a technique called Cascading Style Sheets (CSS) to control the appearance of all elements of a particular type. For example, you can use CSS to set all your paragraphs to be red 12pt Times New Roman. But if you’re using p incorrectly, you’ll be in for an unpleasant surprise, as many of your paragraphs (or rather, what you thought were paragraphs) won’t get the proper style applied.
The br element
We still need to break up the dialogue into lines, as they appear in the original play. Now, we could do this with the p element, but then all lines would be equally spaced. and so it wouldn’t be clear which line belongs with which speaker. How do we get finer control… say, one line break?
Example 2.4. Line Breaks
<p> MACBETH: My name's Macbeth. </p> <p> YOUNG SIWARD: The devil himself could not pronounce a title<br> More hateful to mine ear. </p> <p> MACBETH: No, nor more fearful. </p> <p> YOUNG SIWARD: Thou liest, abhorred tyrant; with my sword<br> I'll prove the lie thou speak'st. </p> <p> [They fight, and young Seward is slain.] </p> <p> MACBETH: Thou wast born of woman.-- <br> But swords I smile at, weapons laugh to scorn,<br> Brandish'd by man that's of a woman born. </p>
Unlike the p element, the br element does not enclose any other HTML. There is no such thing as a closing </br> element. Also note that we don’t have to put a final br element on the last line of each dialogue exchange. The <p> element 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.) Now each line of dialogue is on its own line on the page. The lines are considerably easier to read.
As with the p element, many web designers use br incorrectly. You’ll often see code that looks like this:
Example 2.5. Incorrect br Usage
Text Block 1: Blah blah blah... <br><br> Text Block 2: Blah blah blah... <br><br> Text Block 3: Blah blah blah...
This code is even worse than the code in Example 2.3, “Incorrect p Usage”. None of the text blocks are HTML paragraphs, which makes them difficult to style. If you want paragraphs, use p, not br.
In fact, there aren’t that many places where you want to force a line break with br. The most common cases are:
- Song lyrics
- Lines of poetry
- Lines of dialogue
Aside from that, there are more elegant ways to control line spacing, such as using a p element and adjusting the spacing using CSS. But that’s a later lesson.