HTML Paragraphs
In this tutorial, we will learn about paragraph, horizontal rule, line break rule and pre element in HTML with the help of examples.
Paragraphs
In HTML <p> tag defines the paragraph. HTML paragraphs have both opening and closing tags.So, anything wrap between <p> and </p> element is consider as a paragraph. A paragraph always starts on a new line and is usually a block of text.
- Almost all browsers read a line as a paragraph even if we don’t use the end tag (</p> tag), but this may occur unexpectedly error. So, we must use the closing tag.
- Browsers automatically add some space before and after a paragraph which is the margin.
- If the user adds multiple spaces, the browser reduces them and convert into one single space.
- If the user adds multiple lines, the browser reduces them and convert it into a single line.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML Paragraph</title>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</body>
</html>Output
This is the first paragraph.
This is the second paragraph.
Horizontal Rules
- The horizontal lines are used to separate the content of a document.
- The <hr> tag defines a break in an HTML page and is most often displayed as a horizontal line.
- The <hr> tag is an empty tag and doesn’t have any closing tag.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML Horizontal Rule</title>
</head>
<body>
<p>This is the first paragraph.</p>
<hr>
<p>This is the second paragraph.</p>
</body>
</html>Output
This is the first paragraph.
This is the second paragraph.
Line Break Rules
- The line break rule used to defines a line break in a section of the HTML document.
- The <br> tag used if you want a line break without starting a new line/paragraph.
- The <br> tag is an empty tag and doesn’t have any closing tag.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML Line Break Rule</title>
</head>
<body>
<p>This is the first paragraph.</p>
<br>
<p>This is the second paragraph.</p>
</body>
</html>Output
This is the first paragraph.
This is the second paragraph.
<pre> element
- HTML <pre> tag defines preformatted text.
- The <pre> tag display text as written in HTML document.
- The <pre> tag break all the limitations (like-spaces, line break, etc) of the paragraph tag.
- It also contains an opening and a closing tag. It displays text within a fixed width-height and preserves the extra lines and whitespaces.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML Preformatted Tag</title>
</head>
<body>
<pre>This is
the first
paragraph.</pre>
<br>
<pre>This is the second <h2>paragraph</h2></pre>
</body>
</html>Output
This is
the first
paragraph.This is the second
paragraph
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of Paragraph in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML Text Formatting.