DEV Community

Cover image for Paragraphs & breaks in HTML
Melina Caroline Bernard
Melina Caroline Bernard

Posted on • Edited on

Paragraphs & breaks in HTML

•<p>..</p> is used to create a paragraph of text

•Usually, manual breaks inside paragraph is ignored by the browser when showing the web page

Example 👇🏻

<p>Hey there!
Come learn frontend with me.
Let's learn
HTML basics.</p>

Eventhough I typed the paragraph in several lines,

The output will be👇🏻

Hey there! Come learn frontend with me. Let's learn HTML basics.

•This behavior is known as whitespace collapsing or whitespace normalization, where the browser treats any sequence of spaces, tabs, or line breaks as a single space.

•To actually insert a line break in the output, you need to use <br>

Example 👇🏻
<p>Hey there! <br>
Come learn frontend with me.
Let's learn <br>
HTML basics.</p>

Output 👇🏻
Hey there!
Come learn frontend with me. Let's learn
HTML basics.

💡Fun Fact
<br> tag is one of the examples for empty tags.
Remember we discussed earlier?
Empty tag means, they don't need a closing tag : )

[Container tags vs Self closing "HTML tags - container (standard) vs empty (self closing) - DEV Community" https://dev.to/melina_bernard_7fce15e253/html-tags-2i53

Top comments (0)