HTML - Tag

HTML  tag is used to create paragrapgh context. The p tag generate a blank line before and after the p element. The element block-level element, means it will automatically close if another block-level element is parsed before the closing tag.

Technically, closing is optional, but it’s good practice to include the closing tag to ensure your document validates. tag supports both global attributes and event attributes as well.

Syntax

<p>…content</p>

Attribute

HTML p tag supports Global and Event attributes of HTML.

Examples of HTML p Tag

Here we will see multiple examples of p tag. For example, if we wants to arite an introduction or features for anything in paragrapgh form, then we can use the tag.

Defining a paragraph element

In the following example, we are creating an HTML document that demonstrates the workings of the tag.

<!DOCTYPE html>
<html>
<body>
   <p>
      Geckos are a group of usually small, usually nocturnal lizards.
      They are found on every continent except Antarctica. 
   </p>
   <p>
      Some species live in houses where they hunt insects attracted 
      by artificial light. 
   </p>
</body>
</html>

Applying Styles on Paragrapgh Element

Considering the following example, where we are going to add the CSS properties to the paragraph text.

<!DOCTYPE html>
<html>
<head>
   <style>
      p {
         color: red;
         Border: 1px solid red;
      }
   </style>
</head>
<body>
   <p>
      Geckos are a group of usually small, usually nocturnal lizards.
      They are found on every continent except Antarctica. 
   </p>
   <p>
      Some species live in houses where they hunt insects attracted 
      by artificial light. 
   </p>
</body>
</html>

Adding background-color on Paragrapgh Element

Let's look at the another scenario, where we are going to apply the background color to the paragraph text.

<!DOCTYPE html>
<html>
<head>
   <style>
      p {
         color: green;
         Border: 1px solid red;
         background-color: gray;
      }
   </style>
</head>
<body>
   <p>
      Geckos are a group of usually small, usually nocturnal lizards.
      They are found on every continent except Antarctica. 
   </p>
   <p>
      Some species live in houses where they hunt insects attracted 
      by artificial light. 
   </p>
</body>
</html>

Align Paragrapgh Element

Here, we are going to use the align attribute to align the paragraph text.

<!DOCTYPE html>
<html>
<body>
   <p align="center">
      Geckos are a group of usually small, usually nocturnal lizards. 
      They are found on every continent except Antarctica. 
   </p>
   <p align="right">
      Some species live in houses where they hunt insects attracted 
      by artificial light. 
   </p>
   <p align="left">
      Some species live in houses where they hunt insects attracted 
      by artificial light. 
   </p>
</body>
</html>

Browser’s Default CSS on Paragraph Element

All elements carried some inbuild styling, in this example you will see the default CSS of p tag.

<!DOCTYPE html>
<html>
<head>
   <style>
      p {
          display: block;
          margin-block-start: 1em;
          margin-block-end: 1em;
          margin-inline-start: 0px;
          margin-inline-end: 0px;
      }
   <style>
</head>
<body>
   <p>
      Geckos are a group of usually small, usually nocturnal lizards. 
      They are found on every continent except Antarctica. 
   </p>
   <p>
      Some species live in houses where they hunt insects attracted 
      by artificial light. 
   </p>
</body>
</html>