HTML Paragraphs

In html, there are some elements which starts with new line and one of them is paragraph. Which is said to be a block of text. In html <p> tag defines a paragraph. In html, browser automatically adds some white space or we can say margin before and after a paragraph, to distinguish it from other things on that web page. Example of how to write a paragraph in html, <p>this is a paragraph</p>.

For example:

<html>
<body>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
</html>

Output:

HTML display

One cannot be sure about how the html is going to display the paragraph, because it vary from browser to browser. And on the other hand, other than browser there are many things which can cause trouble displaying paragraph, they are large or small screen sizes, and then we have resized windows, all of them will create different results. While working with html you cannot make changes to the display by giving extra space or extra lines in your html code. Its browsers responsibility to automatically remove all the extra spaces and lines when the page is displayed.

For example:

<html>
<body>
<p>Oxygen is the chemical element with the symbol O and atomic number 8. It is a member of the chalcogen group in the periodic table, a highly reactive nonmetal, and an oxidizing agent that readily forms oxides with most elements as well as with other compounds. After hydrogen and helium, oxygen is the third-most abundant element in the universe by mass. At standard temperature and pressure, two atoms of the element bind to form dioxygen, a colorless and odorless diatomic gas with the formula. Diatomic oxygen gas currently constitutes 20.95% of the Earth's atmosphere</p>
<p>Nitrogen is the lightest member of group 15 of the periodic table, often called the pnictogens. It is a common element in the universe, estimated at about seventh in total abundance in the Milky Way and the Solar System. At standard temperature and pressure, two atoms of the element bind to form dinitrogen, a colourless and odorless diatomic gas with the formula N2. Dinitrogen forms about 78%</p>
<p>The number of lines in the paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.</p>
</body>
</html>

Output:

HTML Horizontal rule

In html, the <hr> tag defines a thematic break in an html page, and it is most often displayed as a horizontal rule. The <hr> tag is used to separate content or we can say it is used to define a change in an html page.

For example:

<html>
<body>
<h1>This is heading 1</h1>
<p>This is some text</p>
<hr>
<h2>This is heading 2</h2>
<p>This is also some text</p>
</body>
</html>

Output:

Note:

An <hr> tag is empty tag which means it comes without an ending tag or we can say there is no need to put an ending tag after <hr> tag.

HTML line break

We have a <br> tag in html which defines line break. This tag is used to break a line or we can say to start a new line without starting a new paragraph.

For example:

<p>this is<br>a paragraph with line break</p>

<br> tag is also an empty tag which means there is no need to give it ending tags. It comes without ending tags.

For example:

<html>
<body>
<p>This is<br>a paragraph<br>with line breaks.</p>
</body>
</html>

Output:

The poem problem:

There is a problem with html paragraphs if you want to write a poem, the problem is that our poem will be displayed in a single line.

For example:

<html>
<body>
<p>In html, spaces and new lines are ignored:</p>
<p>
One two buckle my shoe.
Three four shut the door.
Five six pick up sticks.
Seven eight lay them straight.
Nine ten a big fat hen.
</p>
</body>
</html>

Output:

The output which we are going to get is the same poem but in line not line by line. But we do have a solution to this problem which is html <pre> element.

HTML <pre> element

The html <pre> element is used to define the preformatted text. There are several properties which are predefined in <pre> tags, such as elements are displayed in a fixed width, and they have a courier font usually means it is necessary that they come with courier font, and they preserve both spaces, and line breaks too. You can try it with same example as we have seen in paragraph problem, use <pre> tag instead of <p> tag then see the changes in output.

For example:

<html>
<body>
<p>In html, spaces and new lines are ignored:</p>
<pre>
One two buckle my shoe.
Three four shut the door.
Five six pick up sticks.
Seven eight lay them straight.
Nine ten a big fat hen.
</pre>
</body>
</html>

Output: