HTML Paragraphs Tutorial

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 wants 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

See the Pen using the <p> element in HTML document by Omid Dehghan (@odchan1) on CodePen.

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

See the Pen break line in HTML with <br> element by Omid Dehghan (@odchan1) on CodePen.

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

See the Pen Adding Spaces in HTML by Omid Dehghan (@odchan1) on CodePen.

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

See the Pen using <hr> element in HTML by Omid Dehghan (@odchan1) on CodePen.

As you can see, we’ve used the <hr> element four times and so got 4 new lines between the two paragraphs.


Top Technologies