❮ Previous Next ❯

HTML Paragraph

The <p> tag defines a paragraph. Within a paragraph, we can write a bunch of sentence.

It is block level element so that the web-browser leaves some spaces before and after the <p> element. But it can be changed customly by using CSS margin property.

Type: Block Element

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Heading Name</h2>
<p>
Heading description
</p>
<h2>Another Heading</h2>
<p>
Another description
</p>

</body>
</html>
Run The code »

If you are absolutely beginner to HTML5, it is recommended to use <p> tag to write sentences.

Default CSS properties of <p> tag

p {
  display:block;
  margin:1em auto;
  text-align:left;
}

Limitations of HTML <p> tag

  1. It can't manage line break.
  2. It can't manage either letter-spacing or word-spacing.
  3. It can't manage font style which includes font-face, font-color and font-weight.

Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<!-- Limitation 1 -->
 <p>
  This is first line.
  This is second line.
 </p>

<!-- Limitation 2 -->
 <p>
  Thank     Y   ou.
 </p>
 
 <!-- Limitation 3 -->
 <p>
  My name is Kayniz L.
 </p>

</body>
</html>
Run The code »

Output on the browser

This is first line. This is second line.

Thank You.

My name is Kayniz L.

In the first paragraph, we know that the two lines are combined in a single line. But actually the two lines are written separately on the editor. It means that the <p> element can't preserve line break.

In the second paragraph, the number of spaces between the words "Thank" and "You" is reduced to only one; and same case also happen in the word "You". It means that <p> element can't preserve either letter-spacing or word-spacing. But you should know that <p> and many other HTML elements allow to give a single space.

In the third paragraph, the words "My name" is written in red color and the word "is Kayniz L" is in italic style. But the browser can't recognize font-style so that it leaves a normal font-style. It means that <p> element can't manage font style which includes font-face, font-color and font-weight.

Preserve only line break within a paragraph

<br> element breaks a line. Double <br> gives two line break.

Example

<h2> Uses of water </h2>  
 <p>
 - for drinking water <br>
 - for washing and cleaning <br>
 - for cooking
 </p>

Output

Uses of water

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

Preserve both line break and space. <pre>

<pre> element can preserve all of them. Since <pre> element is a block-level element, it should not use it inside a <p> element.

Example

<h2> Uses of water </h2>  
 <pre>
  - for drinking water
  - for washing and cleaning
  - for cooking
 </pre>

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.

Can you answer it?

  1. Which HTML tag defines a paragraph?
    <p> tag is used to define an HTML paragraph.
  2. Which HTML tag is used to preserve line break?
    <br> tag is used to preserve line break.
  3. Which HTML tag is used to write in Italic font?
    <i> tag is used to define Italic font-style.
❮ Previous Next ❯