HTML Paragraphs


Creating Paragraphs

HTML paragraphs are used to create blocks of text that are separated from each other by an empty line or a vertical space. To create a paragraph in HTML, you can use the <p> tag.

Here’s an example:

<p>This is a paragraph of text. It can be as long or as 
short as you like.</p>

You can use as many HTML paragraphs tags as you need to separate your text into different blocks. It’s important to note that when you create a new paragraph, any formatting (such as font size or color) applied to the previous paragraph will not carry over to the new one. If you want to apply the same formatting to multiple paragraphs, you will need to use CSS or another formatting method.


Creating Line Breaks

The <br> tag is used to insert a line break on the web page.

Since the <br> is an empty element, so there is no need of corresponding </br> tag.

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

Creating Horizontal Rules

You can use the <hr> tag to create horizontal rules or lines to visually separate content sections on a web page. Like <br>, the <hr> tag is also an empty element. Here’s an example:

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

Managing White Spaces

Normally the browser will display the multiple spaces created inside the HTML code by pressing the space-bar key or tab key on the keyboard as a single space. Multiple line breaks created inside the HTML code through pressing the enter key is also displayed as a single space.

The following paragraphs will be displayed in a single line without any extra 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>

Insert &nbsp; for creating extra consecutive spaces, while insert <br> tag for creating line breaks on your web pages, as demonstrated in the following example:

<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

Sometimes, using &nbsp;<br>, etc. for managing spaces isn’t very convenient. Alternatively, you can use the <pre> tag to display spaces, tabs, line breaks, etc. exactly as written in the HTML file. It is very helpful in presenting text where spaces and line breaks are important like poem or code.

The following example will display the text in the browser as it is 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>