HTML Paragraphs
A paragraph is a block of text that covers one main idea. The browser separates paragraphs with space above and below.
Two paragraphs
Each p element forms its own block. The browser puts space between the blocks.
<p>First idea here.</p>
<p>Second idea here.</p>A line break
The br element starts a new line. The text stays inside the same paragraph.
<p>Line one.<br>Line two.</p>A topic change
The hr element draws a line between topics. The line itself carries no text.
<p>Morning at the market.</p>
<hr>
<p>Evening at home.</p>Preformatted text
The pre element keeps line breaks as written. Each row stays on its own line.
<pre>
Name Age
Ana 7
Ben 9
</pre>Example
<!DOCTYPE html>
<html>
<head>
<title>Morning Routine</title>
</head>
<body>
<h1>Morning Routine</h1>
<p>Wake up at six.<br>Stretch for five minutes.</p>
<hr>
<pre>
Tea first.
Then a short walk.
</pre>
<p>The day starts calmly.</p>
</body>
</html>Key points
- p element: a block of text about one main idea
- br element: a break that starts the next text on a new line
- hr element: a horizontal line that marks a change of topic
- pre element: text shown with its line breaks and spaces kept
- A new paragraph starts a new block on the page.
In this example, the heading names the page topic. The first paragraph holds two steps split by a br element. The hr element marks a change of topic. The pre element keeps each short line separate. The last paragraph closes the page.
Note
Use separate p elements for separate paragraphs instead of many br elements.
Try it Yourself
Edit the code, then press Run.
Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.
Exercise
Which element keeps line breaks as they are written?