HTML Paragraphs


A paragraph always starts on a new line, and is usually a block of text.


HTML Paragraphs

The <p> element defines a paragraph in HTML.

A paragraph always starts on a new line, and internet browsers automatically add some white space (a margin) before and after a paragraph.

Example

<p>This is a paragraph.</p>
<p>This is second paragraph.</p>

HTML Display

You cannot be absolute how HTML will be displayed.

Large or small screens, and resized windows will display the web page differently.

In HTML, you cannot change the display by putting extra spaces or extra lines in your HTML code.

The browser will automatically remove any extra lines and spaces when the page is displayed on screen:

Example

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p><p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>



HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The <hr> element is used to separate content in an HTML page:

Example

<h1>This is heading 1</h1>
<p>This is a simple text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other simple text.</p>
<hr>

The <hr> tag is an empty tag. An empty tag has no end tag. <hr> also has no end tag.


HTML Line Breaks

In HTML, a line break is defined by <br>.

You can use <br> if you want a line break (a new line) without using horizontal rule or a new paragraph:

Example

<p>This is<br>a line break<br>in a paragraph.</p>

The <br> tag is also an empty tag, which means that it has no end tag.


The Poem Problem

This poem will display on a single line:

Example

<p>
My Bonnie lies over the ocean.My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.
</p>


Solution – The HTML <pre> Element

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

Example

<pre>
My Bonnie lies over the ocean.My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.
</pre>