HTML Paragraphs

❮ PreviousNext ❯

A Block of text written in the same context is generally called a paragraph.

In HTML, the element <p> defines a paragraph.

Syntax
<p>Content</p>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Paragraph Example</title> </head>
<body>

<p>This is the starting line of a paragraph. This is the second line of a paragraph. This is the third line of the paragraph. This is the fourth line of a paragraph. This is the fifth line of a paragraph.</p>

</body>
</html>

The content of an HTML paragraph is contained between the starting and closing <p> tags.

An HTML document can have multiple paragraphs.

The web browser always displays the content of a paragraph from a new line.

It automatically adds some spacing around the content.

Example
<!DOCTYPE html>
<html>
<head>
<title>Spacing Between Paragraphs Example</title> </head>
<body>

<p>This text belongs to first paragraph. This text belongs to first paragraph. Some more text to first paragraph.</p>
<p>This text belongs to second paragraph. This text belongs to second paragraph. Some more text to second paragraph.</p>

</body>
</html>

A block of content defined with <p> element can not have a consistent look on the web screen. Its display is adjusted automatically with screen size, i.e. whether the screen size is small or big. Resizing the browser window may also change the view of the paragraph.

When the page is displayed on the screen, the browser automatically removes extra spaces and new lines from the contents of paragraphs.

See the example below.

Example
<!DOCTYPE html>
<html>
<head>
<title>Spacing Between Paragraphs Example</title> </head>
<body>

<p>
This is a          first pararagraph.

A new line starts from here.

This line has             too many spaces.

See how it is                 displayed on
 
the screen.
</p>
<p>Resize the window to see how the display of paragraph changes. On smaller screens paragraph splits into multiple lines.</p>

</body>
</html>

Non-breaking Space (&nbsp;)

Now, we know HTML removes extra spaces from the paragraph. So what if we need to add an extra space in any line of a paragraph?

For this, we can use an HTML entity named Non-breaking Space (&nbsp;).

Example
<!DOCTYPE html>
<html>
<head>
<title>Non-breaking Space &nbsp; Example</title> </head>
<body>

<p>This some text. There are some extra space between the character A &nbsp;&nbsp;&nbsp; and B.</p>
<p>I &nbsp;&nbsp; am &nbsp;&nbsp;&nbsp;&nbsp; far away.</p>

</body>
</html>

HTML Line Break

If we want to add a line break in a paragraph, we can use <br> element.

The content after the <br> tag starts from a new line.

In the previous chapter: HTML elements, we studied that <br> is an empty element. It means it has no end tag.

Example
<!DOCTYPE html>
<html>
<head>
<title>br tag Example</title> </head>
<body>

<p>Line number one of first paragraph. Line number two of first paragraph.<br> Line number three of first paragraph.<br> Line number four of first paragraph.</p>
<p>Welcome <br> to <br>HTML.</p>

</body>
</html>

Pre-formatted Text

In some cases, we don't want to remove extra spaces and new lines from the blocks of text. We want to display them on screen as they are written in an HTML document. In such cases, we use HTML's <pre> element.

The <pre> element defines a preformatted text.

Syntax
<pre>Content</pre>

The text between <pre> and </pre> tags is displayed without modification with a fixed-width font.

Example
<!DOCTYPE html>
<html>
<head>
<title>pre tag Example</title> </head>
<body>

<pre>Some text to
demonstrate pre tag
in HTML.   See
the example to
understand it.</pre>


</body>
</html>

Indent HTML Paragraph

To indent the first line of an HTML paragraph, use the style attribute on starting tag of <p> element.

The CSS text-indent property is specified as a value in the style attribute of <p> tag to define text indentation.

Code
<p style="text-indent:50px;">Content</p>
Example
<!DOCTYPE html>
<html>
<head>
<title>Indent Paragraph Example</title> </head>
<body>

<p>This is a a default paragraph without indentation. The paragraph is filled with nonsense text. Some extra content. Some more extra content. There are lot of content.</p>
<p style="text-indent:50px;">This is a paragraph with indentation. The paragraph is filled with nonsense text. Some extra content. Some more extra content. There are lot of contents.</p>

</body>
</html>

HTML Horizontal Rules

The <hr> element defines a thematic break in an HTML document.

It is used to insert a horizontal rule.

In a paragraph horizontal rule can be applied to divide a section of text as follows.

Code
<p>Content<hr>Content</p>
Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Rule Example</title> </head>
<body>

<p>This is a paragraph to explain hr tag. The paragraph is filled with nonsense text.<hr> Some extra content. Some more extra content. There are lot of content.</p>
<p>This is a paragraph to explain hr tag. <hr> The paragraph is filled with nonsense text. Some extra content. Some more extra content. There are lot of contents.</p>

</body>
</html>

The <hr> is an empty element and hence it does not have an end tag.

Browsers Support

Tags Chrome Edge Firefox Safari Opera
<p> Yes Yes Yes Yes Yes
<hr> Yes Yes Yes Yes Yes
<br> Yes Yes Yes Yes Yes
<pre> Yes Yes Yes Yes Yes
❮ PreviousNext ❯
1. HTML Tutorial
2. Introduction to HTML
3. Basic HTML Page
4. HTML Editors
5. Web Browser
6. HTML History
7. Basic HTML Tags
8. HTML Elements
9. HTML Attributes
10. HTML Headings
11. HTML Paragraphs
12. HTML Text Formatting
13. HTML Styles
14. HTML Comment
15. HTML Quotation
16. HTML Colors
17. HTML RGB Colors
18. HTML HEX Colors
19. HTML HSL Color
20. HTML CSS
21. HTML Links
22. HTML Link Colors
23. Link within Page
24. HTML Images
25. HTML Background Image
26. HTML Image Map
27. HTML Picture Element
28. HTML Favicon
29. HTML Table
30. HTML Table Border
31. HTML Table Size

  • Disclaimer: ResultUniversity.com is an independent private website and it is in no way affiliated to any Indian Government official website. The sole purpose of this website is to provide notifications regarding the latest results published. Though utmost care is being taken, we can not guarantee 100% correctness of information. Using this website confirms that you agree to all the terms and conditions.