HTML Paragraph - Block element

The HTML tag <p> defines a paragraph.
Within a paragraph, you can write a bunch of sentences.

Simple Example of <p> element

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Paragraph Learning </title>
</head>
<body>
<p> This is a paragraph. </p>
<p> This is also an another paragraph. </p>
</body>
</html>

Output

This is a paragraph.

This is also an another paragraph.

Points to be noted

1. You have already known that <p> element is block-level element. So, the corresponding browser give some space above and below a paragraph generally.
2. Remember to add end tag (</p>) if start tag (<p> tag) is used. If you don't, the browsers may give output of non-expected error.

See more Reference

1. <p> element could not manage line break.
2. <p> element could not manage either letter-spacing or word-spacing.
3. <p> element could not manage font style which includes font-face, font-color and font-weight.

   Lets discuss one by one

1. <p> element could not manage line break.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Paragraph Learning </title>
</head>
<body>
<p>
This is first line.
This is the second line.
</p>
</body>
</html>

Output

This is first line. This is the second line.

In the above output, you have seen that the two lines are combined within a single line. But actually the two lines are written separately on your editor. It means <p> element could not manage line break.

2. <p> element could not manage either letter-spacing or word-spacing.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Paragraph Learning </title>
</head>
<body>
<p>
Thanks               Y        ou.
</p>
</body>
</html>

Output

Thanks Y ou.

In the above output, you have seen that the number of spaces between the word "Thank" and "You" is reduced to only one space and same case also happen in the word "You". It means <p> element could not manage either letter-spacing or word-spacing.
But you should know that <p> and many other HTML element also can give a single space.

3. <p> element could not manage font style which includes font-face, font-color and font-weight.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Paragraph Learning </title>
</head>
<body>
<p>
My name is Swamikanta Longjam
</p>
</body>
</html>

Output

My name is Swamikanta Longjam

In the above example, you have seen that the words "My name is" is written in red color, the word "Swamikanta" is in italic style while the word "Longjam" is written in bold letter. But the browser could not recognize your font-style so that leaves a normal font-style. It means <p> element could not manage font style which includes font-face, font-color and font-weight.
You should know that on the editor ( Example: Notepad ), any characters can be written with style.

You have known that <p> element could not manage line break. But there is an HTML element called <br> which performs the act of giving line break. Double <br> ( <br><br> ) gives two line-breaks.
Click Here, to learn more about <br> element.

Uses of <br> tag

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Paragraph Learning </title>
</head>
<body>
<h3> Uses of water </h3>
<p>
- for drinking water <br>
- for washing and cleaning <br>
- for cooking
</p>
</body>
</html>

Output

Uses of water

- for drinking water
- for washing and cleaning
- for cooking

<p> element could not manage either letter-spacing or word-spacing. But there is an HTML element called <pre> which can perform it.
Click Here, to learn more about <pre> element.

Uses of <pre> tag

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Paragraph Learning </title>
</head>
<body>
<h3> Uses of water </h3>
<pre>
    - for drinking water
    - for washing and cleaning
    - for cooking
</pre>
</body>
</html>

Output

Uses of water

      - for drinking water
      - for washing and cleaning
      - for cooking

To write the texts with italic style, write the texts within the <i> element like <i> Italic Style </i>. For bold texts, use <b> tag.

Summary of this page

1. The HTML Element <p> defines a paragraph.
2. All browsers give some space above and below a paragraph.
3. The <br> tag is used to give a line break.
4. The <pre> tag preserves both line space and line break.



Some important questions of this page

1. Which HTML tag defines an HTML paragraph?

See Answer

<p> tag is used to define an HTML paragraph.

2. Which HTML tag is used to preserve line break?

See Answer

<br> tag is used to preserve line-breaks.

3. What is the use of <pre> tag? Illustrate with an example.

See Answer

Please refer to the above explanation.

4. Which HTML tag is used to write the font in Italic?

See Answer

<i> tag is used to write the font in Italic.