HTML paragraphs are what text is primarily formatted in. The HTML <p> element is what you can use to define a paragraph. A paragraph will always start on a new line, and web browsers automatically add a white space margin before and after the paragraph.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>White Space in HTML
HTML displays have a fluid display based on the numerous display sizes and aspect ratios. Unlike Word Processors, in HTML you cannot format text or content in general simply by adding any form of extra white space on your keyboard. The web browser will automatically remove any extra white spaces such as spaces and new-line characters when the page is displayed:
Example
<p>
This paragraph
uses many lines
in the source,
but looks
okay in the
web browser since
the browser
ignores extra
new lines.
</p>
<p>
This paragraph contains
quite a lot of
extra spaces
in the source code,
but the web browser
displays ok since the
browser ignores it.
</p>The above paragraphs will display exactly the same in a web browser.
So how do we preserve formatting?
Solution – The HTML <pre> Tags
The HTML <pre> element can be used to define preformatted text. The text inside a <pre> element is displayed in a fixed-width font (usually Courier) and also preserves spaces and line breaks.
Example
<pre>
This paragraph with pre
uses many lines and spaces
in the source,
and will not look
okay in the
web browser since
the browser
now preserves extra
new lines.
</pre>The above code displays the same way in the browser as it does in the source code.
HTML Line Breaks
The HTML <br> element is used to define a line break.
You should use <br> if you want to add a line break or new line without starting a new paragraph:
Example
<p>This is a paragraph with a <br>line breaks.</p>HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML document and is typically displayed as a horizontal rule. It is an empty element therefore it has no closing tag. The <hr> element is used to separate content in a web page:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<hr>
<h2>This is another heading</h2>
<p>This is another paragraph.</p>
<hr>