In this section, we will learn how to create a paragraph in an HTML document and also we learn what the <br> and <hr> tags are.
What is HTML Paragraph? <p> in HTML
In HTML in order to add a paragraph, we use the <p> element. This element stands for paragraph and we can put text content within its body which will be rendered on the page.
<p> Tag in HTML Syntax and Declaration
This is the syntax of <p> element:
<p> content… </p>Between the opening and closing tags of the <p> element which is the body of this element we put the paragraph that want to be displayed on the page.
Note: The <p> element is a block level type of element! This means every time we use the <p> element, its content will appear in a new line!
Example: using the <p> element in HTML document
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
<style type="text/css">
p{
width: 400px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>As you can see, every time we called the <p> element to put a new paragraph into the page, it appeared on a new line!
HTML New Line and Line Breaks in HTML: <br> HTML Tag for Break
The <br> element stands for break and it is used to break the current line and make the next HTML element that comes after <br> to use the next line in order to render its content.
For example, if you have a paragraph and want to break part of the text content so that the rest appear on the next line, then you can use the <br> element there.
Example: break line in HTML with <br> element
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
<style type="text/css">
p{
width: 600px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>Here the first paragraph took three <br> element and so the lines broke at these three points! But on the other hand, the second paragraph didn’t have any line breaker <br> and as you can see the entire paragraph is written without a single line break.
How to Add Spaces in HTML?
There are multiple ways in which we can put space between the elements of an HTML document. But perhaps the easiest method that doesn’t require the use of other languages like CSS, would be calling the <br> element between elements.
Basically, every time you call the <br> element, it will break that line. So now if you want 4 new empty lines between two elements for example, you can call the <br> element 4 times in a row between the two target elements to create such space.
Example: Adding Spaces in HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
<style type="text/css">
p{
width: 600px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<br>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>Note: There are better ways to add space in between two elements but they require the use of other language like CSS. You can learn more about those methods in the CSS section.
HTML <hr> Tag
The HTML <hr> element stands for horizontal and we use it to create a horizontal line in an HTML document.
Note: this element has only one tag. Also, every time we call it, a horizontal line will be created on a new line.
Example: using <hr> element in HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
<style type="text/css">
p{
width: 600px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr>
<hr>
<hr>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>As you can see, we’ve used the <hr> element four times and so got 4 new lines between the two paragraphs.