HTML5 Tutorial - HTML Paragraph and Preformatted Text

Paragraph

A paragraph can be defined in <p> tags. Like heading browser automatically add some margin before and after the paragraph. Browser removes extra spaces and line breaks by default when page is displayed. This is the default nature of HTML. <p> tags can be stylized with style attributes.

Example - 1

<p>This     is   a Paragraph.</p>

It will look on web page like

This is a Paragraph.

<p>This is   a Paragraph with
line break but when it rendered on web
page   then  it will look      like a normal paragraph.
</p>

It will look on web page like

This is a Paragraph with line break but when it rendered on web page then it will look like a normal paragraph.

Tips: Never forget to define close tags of paragraph it will produce unexpected result during execution.

What is the difference between Paragraph and Line Break?

Paragraph is a set of a sentence or many sentences that can be written under <p> tags but Line break is use to change the line under the paragraph. A line break is inserting into paragraph with <br> tag which an empty tag. When a line break is inserted into paragraph then the next line moved down without starting a new paragraph which different from a paragraph. Using two different paragraph in separate <p> tag can change the line by default there is no need to add extra <br> tag for  line break but if you want to add some more space between two paragraph then you are well allowed to add <br> tags between them.

Example - 2

<p>This is an example of paragraph. This paragraph consists of two different sentences.<br> If we need to insert a line break then we can use line break tag.</p>

This will rendered on web page like

This is an example of paragraph. This paragraph consists of two different sentences.
If we need to insert a line break then we can use line break tag.

---

<p>This is another example of paragraph. This paragraph consists of only one sentence. </p>
<p>The other paragraph is written in separate paragraph tags so by default line break is occurred between both paragraphs.</p>

This will rendered on web page like

This is another example of paragraph. This paragraph consists of only one sentence.
The other paragraph is written in separate paragraph tags so by default line break is occurred between both paragraphs.

Tips: You can see there is a horizontal line between two examples this line is called horizontal rule. It can define on HTML document with <hr> tags which also an empty element.

Poem Writing Problem

As we mentioned above ‘Browser removes extra spaces and line breaks by default on web page’. This property of browser creates trouble while poem or similar kind of article is writing on html document. To resolve this problem we need to write the poem in the preformatted tag which is defined with <pre> tags. The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks. <pre> tags can be stylized with style attributes.

Example - 3

<pre style = "color: #333333; font-family:ubuntu; font-size: 18px;">
Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
</pre>

This will rendered on web page like

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

In next chapter we will learn about HTML Formatting and Quotations.

Related Topics