HTML5 Paragraph Element

In this tutorial, we’ll teach you everything that you need to know about the HTML5 paragraph element, break, and horizontal line as a web developer.

Before we move, let’s have a quick glimpse of what we are going to learn in this tutorial?

HTML5 paragraph tag
Inserting break   in the paragraph tag
Inserting horizontal line between paragraphs
Defining <pre> tag in HTML5 to display code and poems
Which browsers are compatible with html5  tag?

Defining HTML5 Paragraph Element

HTML5 Paragraphs element displays text on the web page. Paragraphs are introduced by the  tag that is followed by an ending  tag. The paragraph is the most important HTML element that you’ll need to present your content to your reader.

Here is a code of declaring paragraph:

 This is my first paragraph 

 This is another paragraph 

The output of this code will be like this

HTML5 Paragraph Element

It is worth mentioning that your browsers will automatically add some space before and after the paragraphs, known as margin. You can easily remove or increase that space by defining your style for the paragraph.

Closing a Paragraph Tag

In HTML4 and its predecessors, it was enough to define a paragraph without a closing tag. Browsers rendered that properly even if the closing tag is missing.

Example

 My first paragraph without closing tag

 But browser will render it

HTML code depicted above will work perfectly well in most browsers but don’t rely on it. Without an end tag, your browser is likely to display some unexpected error.

For the sake of backward compatibility and good development practice, we strongly recommend you to use both an opening and closing tag for the paragraph.

Creating Line Breaks

The   tag introduces a line break between the paragraphs. Since is an empty elements, there is no need to close it with an ending  tag.

Example

<!DOCTYPE HTML>
<html>
<head>
    <title>HTML5 Paragraph Element </title>
    <meta charset=UTF-8" />
</head>
<body>
    <p> This is an example paragraph <br> with line break </p>
    <p> This is another example of <br> line break </p>
</body>
</html>

Output of this code will be

HTML5 paragraph element

Introducing Horizontal Lines between HTML5 Paragraph Elements

You can use the <hr> tag to create a horizontal line between paragraphs. Like   tag, <hr> tag is not followed by an ending tag because both are empty tags.

Example

<!DOCTYPE HTML>
<html>
<head>
    <title>HTML5 Paragraph Element</title>
    <meta charset=UTF-8" />
</head>
<body>
    <p> These two paragraph are </p>
    <hr>
    <p> visually separated with horizontal lines </p>
</body>
</html>

The Output of this code will be

HTML5 paragraph element

The Poem Problem

One of the greatest problems developers face is displaying poems and code snippets in the browser appropriately. For instance, if we write a code for a poem in our code editor, the browser will render it as a single paragraph.

Example

<!DOCTYPE HTML>
<html>
<head>
    <title>HTML5 Paragraphs</title>
    <meta charset=UTF-8" />
</head>
<body>
    <p>
        Be a good student
        Learn as much as you can
        Always be willing to grab education
        For the time is at hand
    </p>
</body>
</html>

The output of this code will be like this:

HTML5 paragraph element

This issue has been resolved by the <pre> tag that allows us to display preformatted text. The text enclosed in the <pre> tag will be displayed in the code editor, which means all our white spaces and line breaks will be rendered by the browser.

Note: text within <pre> tag follows the font-width font, but you can easily override the browser default styling by creating your styles.

Example

<!DOCTYPE HTML>
<html>
<head>
    <title>HTML5 Paragraphs</title>
    <meta charset=UTF-8" />
</head>
<body>
    <pre>
 Be a good student
 Learn as much as you can
 Always be willing to grab education
 For the time is at hand
 </pre>
</body>
</html>

The output of this code will be

Quick Tips while applying HTML5 Paragraph Element

If you forget to write the  tag at the end of the paragraph element, the HTM5  tag will work perfectly well.
if you want more free spaces between your paragraph, add the margin property. Don’t add the empty paragraph because it will not be rendered by the browser.

To learn more about a paragraph, visit https://html.com/paragraphs/

Next Lesson » « Previous Lesson