HTML Paragraphs
The <p> element defines a paragraph, which is usually a block of text. A paragraph always starts on a new line, and browsers add some space (a margin) before and after it.
Example
Two paragraphs.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Paragraphs</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Display
You cannot be sure exactly how HTML will look. Different screen sizes and resized windows give different results. You also cannot change the display by adding extra spaces or extra lines in your code; the browser removes any extra spaces and lines when it shows the page.
Example
Extra spaces and line breaks in the source are collapsed by the browser.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Whitespace</title>
</head>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
</body>
</html>
HTML Horizontal Rules
The <hr> tag defines a thematic break in the page, usually shown as a horizontal line. It is used to separate content or mark a change. <hr> is an empty tag with no end tag.
Example
Horizontal rules separating sections of content.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Rule</title>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
</body>
</html>
HTML Line Breaks
The <br> element makes a line break. Use it when you want a new line without starting a new paragraph. <br> is an empty tag with no end tag.
Example
A paragraph with line breaks made by <br>.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Breaks</title>
</head>
<body>
<p>This is<br>a paragraph<br>with line breaks.</p>
</body>
</html>
The Poem Problem
Text that relies on line breaks and spacing, like a poem, does not keep its shape in a normal paragraph. The browser collapses it onto a single line.
Example
A poem in a paragraph, shown all on one line.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poem Problem</title>
</head>
<body>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
</body>
</html>
Solution - The HTML <pre> Element
The <pre> element defines preformatted text. The text inside it shows in a fixed-width font (usually Courier) and keeps both its spaces and line breaks, so a poem displays correctly.
Example
The poem inside a <pre> element, keeping its line breaks.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pre Poem</title>
</head>
<body>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the
ocean.
Oh, bring back my Bonnie to me.
</pre>
</body>
</html>