Paragraph - HTML Tutorial
In Chapter 1, Getting Started, we saw that HTML ignores extra whitespace. This can make text appear as a single block in the browser. How can we create readable pages without everything running together?
For example, consider this snippet of dialogue:
<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>In the browser, this text collapses into a single paragraph:
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.
The p Element
HTML uses the p element to define paragraphs. Wrap text in <p> and </p> to create distinct blocks:
<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 paragraph creates a separate block with space before and after. Remember, the p element is a block element - it encloses content, rather than just inserting line breaks.
p Usage
Text Block 1: Blah blah blah... <p>
Text Block 2: Blah blah blah... <p>
Text Block 3: Blah blah blah...Browsers automatically close p elements when they see a new <p>, so this “incorrect” code might render visually okay. But it is not semantically correct, and CSS styling may not apply consistently.
The br Element
Sometimes we need single line breaks, such as in dialogue or poetry. For that, use the br element:
<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>The br element does not have a closing tag and is typically used sparingly.
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.