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.
<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:
<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> 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.
<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
<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:
<p>This is a paragraph with a <br>line breaks.</p>
HTML Horizontal Rules
<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>