HTML - Tag

Quiz

The HTML  tag is used to create paragraphs. The tag generates a blank line before and after the paragraph element. The element element is a block-level element, which means it will automatically close if another block-level element is parsed before the closing tag.

Technically, closing the tag is optional, but its good practice to include the closing tag to ensure your document validates. The tag supports both global attributes and event attributes.

Syntax

Following is the syntax of  tag −

<p>content</p>

Attributes

The HTML tag supports both Global and Event attributes.

Example: Defining a Paragraph Element

In the following example, we create an HTML document that demonstrates the workings of the tag. Running the code will display the paragraph text on the web-page.

<!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>

Example: Adding Styles to Paragraph Element

Considering the following example, where we add CSS properties to style the paragraph text. Running the code will display the text with the applied color in the output window.

<!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>

Example: Adding Background Color

Consider the following scenario, where we apply a background color to the paragraph text. Let's look at another scenario, where we apply the background color to the paragraph text. Running the code will display the text with the background color applied on the webpage.

<!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>

Example: Aligning Paragraph Element

Here, we will use the align attribute to align the paragraph text. Running the code will display the paragraph text aligned in different directions.

<!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>

Example: Default CSS on Paragraph Element

All elements have some build-in 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>