HTML Paragraphs

Creating Paragraphs

Text is published on web pages using the paragraph element.

The <p> tag is used to define paragraphs. Usually the first tag you need to post your text on a web page, the paragraph element is relatively basic. Here's one instance:

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

Note: The margin that appears above and below a paragraph due to browser built-in style sheets is known as margin, however you can use CSS to override it.


Closing a Paragraph Element

It was sufficient to use the opening tag to start a new paragraph in HTML 4 and previous versions. It is not a problem for most browsers to display HTML correctly if the final tag is missed. For Example:

<p>This is a paragraph.
<p>This is another paragraph.

Although most web browsers will support the HTML code in the following example, you shouldn't rely on it. Errors or unexpected outcomes may arise if the end tag is overlooked.

Note: Use both the opening and closing tags for each paragraph to ensure forwards compatibility and good coding practices.


Creating Line Breaks

To add a line break to a web page, use the <br> tag.

No corresponding </br> tag is required since <br> is a empty element.

<p>This is a paragraph <br> with line break.</p>
<p>This is <br>another paragraph <br> with line breaks.</p>

Note: Avoid utilizing <p></p> as an empty paragraph to create extra space on your webpages. Since the empty paragraphs are logical tags, the browser may choose to disregard them. To change the amount of space surrounding the elements, use the CSS margin property.


Creating Horizontal Rules

To visually divide content parts on a web page, you can make horizontal rules or lines using the <hr> tag. The <hr> tag is also an empty element, just like <br>. For Example:

<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph.</p>

Managing White Spaces

When you press the space-bar key or tab key on the keyboard, the browser will often show the numerous spaces written inside the HTML code as a single space. A single space is also displayed in place of many line breaks that were made inside the HTML code by hitting the enter key.

The following paragraphs will be shown on a single line with no white space:

<p>This paragraph contains  multiple   spaces    in the source code.</p>
<p>
This paragraph
contains multiple tabs and line breaks
in the source code.
</p>

To add extra consecutive spaces to your web pages, put the &nbsp; tag; to add line breaks, insert the <br> tag, as seen in the example below:

<p>This paragraph has multiple&nbsp;&nbsp;&nbsp;spaces.</p>
<p>This paragraph has multiple<br><br>line<br><br><br>breaks.</p>

Defining Preformatted Text

It's not always convenient to manage spaces using &nbsp;, <br>, and so on. As an alternative, you can display tabs, spaces, line breaks, and other elements precisely as they are written in the HTML file by using the <pre> tag. When presenting text, such as poetry or code, where line breaks and spaces are crucial, this is quite useful.

The text in the following example will appear in the browser exactly as it does in the source code:

<pre>
Twinkle, twinkle, little star, 
How I wonder what you are! 
Up above the world so high, 
Like a diamond in the sky.
</pre>

Tip: Typically, browsers render text within the <pre> element as a monospace or fixed-width font, like Courier. However, you have the ability to alter this behavior by utilizing the CSS font property.