HTML – Paragraphs

Share

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>

Share