Home
HTML

HTML Paragraph

Here, we have discussed about html paragraph and how to implement paragraph in html page with examples. Each paragraph starts with a new line and....

Welcome back to another interesting article on HTML.

HTML Paragraph

In this article we will learn about html paragraph and how to implement paragraph in html page with examples. 

HTML Paragraph

The <p> tag in html defines a paragraph. The paragraph starts with <p> tag and end with </p>. Any content inside <p> and </p> is called a paragraph. Each paragraph starts with a new line and browsers automatically show white space or empty line before and after a paragraph.

Syntax

<p> paragraph content </p>

Now let's illustrate html paragraph with the help of following example;

<!DOCTYPE html>

<html>
<head>
    <title>Html Paragraph Example</title>
</head>
<body>
     <p>This is a first paragraph in HTML</p>
</body>
</html>

Output

Html Paragraph

Spacing inside html paragraph

If you change the display in a paragraph by adding extra spaces or extra lines to the html page, the browser will automatically remove that extra blank space and extra lines to a single space and single lines.

Let's this with the help of following example;

<!DOCTYPE html>


<html>
<head>
    <title>Html Paragraph with spacing Example</title>
</head>
<body>
     <p>This is a first paragraph in HTML.
        In this paragraph we will add some      space
         that      will be      ignored   by   browser.</p>
</body>
</html>

Output

Html Paragraph

Html line breaks

In HTML, <br> tag is used for line break and to add line break (a new line) on paragraph without starting new paragraph, we can use this <br> tag inside paragraph element.

Syntax

<br>

Now let's illustrate html line breaks with the help of following example;

<!DOCTYPE html>


<html>
<head>
    <title>Html Paragraph with br tag Example</title>
</head>
<body>
     <p>This is a first paragraph in HTML.
     <br>In this paragraph, we used line break tag.</p>
</body>
</html>

Output

Html Paragraph with br tag output

In above example, we have using <br> tag inside <p> tag to add line break on paragraph.

Html Horizontal rules

<hr> is used in html for horizontal line(thematic break) on web page. We can use <hr> to give horizontal line between two paragraphs.

Syntax

<hr>

Now let's illustrate html Horizontal line between two paragraphs with the help of following example;

<!DOCTYPE html>


<html>
<head>
    <title>Html Paragraph with hr tag Example</title>
</head>
<body>
     <p>This is a first paragraph in HTML.</p>
    <hr>
    <p> In this paragraph, we used hr tag for horizontal line.</p>
</body>
</html>

Output

Html Paragraph with hr tag output

In above example, we have using <hr> tag inside <p> tag to add horizontal line on paragraph.

Html pre element

The <pre> tag in html is used to define the pre-formatted text. With the use of pre element, we can get the exact text displayed that is written on the source code of html.

Syntax

<pre> Content </pre>

Now let's illustrate html pre element with the help of following example;

<!DOCTYPE html>


<html>
<head>
    <title>Html Pre tag Example</title>
</head>
<body>
     <p>Pre tag preserves both spaces and line breaks</p>
  <pre> 
        This is my first line.
        This is my second line.
        This is my   third line with space.
        This is my fourth line.
  </pre>
</body>
</html>

Output

Html pre element

Conclusion

Above we have discussed about html paragraph and how to implement paragraph in html page with examples. Each paragraph starts with a new line and browsers automatically show white space or empty line before and after a paragraph. I hope this information is helpful to you all.