About Lesson
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