coding180 icon

Coding180

Html Elements: <p> tag - Paragraph

Html Elements: <p> tag - Paragraph

Tutorials > HTML > HTML Elements


A paragraph is a sentence or group of sentences referring to the same topic. Anything between the <p> and </p> tags will be considered as a paragraph by the browser.

Example

<p>This is a paragraph</p>
<p>This is another paragraph</p>

<p> is a block-level element, the Browsers automatically add blank lines before and after paragraphs.

Tip: It is a bad practice to use an empty paragraph tag <p></p> to insert a blank line. Replace it with a <br /> tag!

Don't forget the closing tag

Even if you forget to use the closing tag, most browsers will display the HTML correctly:

<p>This is a paragraph
<p>This is another paragraph

The above example will work fine in most browsers, but don't rely on this practice. Forgetting to use closing tags can produce unexpected results and errors.

Tip: If you want a line break (new line) without generating a new paragraph, use the <br /> tag

Let's take Example:

If you want to display an article on the web page, you need the <p> tag to put the paragraphs of the article.

Each paragraph goes in <p>  tag, ⁣ If there are 3 paragraphs of text in a news article, put these 3 paragraphs into <p> tags respectively. As shown below.

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML Paragraph - coding180.com</title>
</head>

<body>
    <p>Two people have been rescued after a small plane crashed into 
a power line tower in Maryland, leaving the two
        occupants
        dangling about 100 feet in the air for hours. The crash
 knocked out power to thousands of people in the area for
        much of
        the evening.
    </p>
    <p>
        A single-engine Mooney M20J crashed into Pepco tower lines 
near Montgomery County Airpark in Gaithersburg,
        Maryland,
        around 5:40 p.m. local time Sunday, according to the Federal
 Aviation Administration.
    </p>
    <p>
        Maryland State Police identified the occupants of the plane 
as pilot Patrick Merkle, 65, of Washington, D.C.,
        and
        passenger Jan Williams, 66, of Louisiana. The two were rescued 
roughly seven hours later, with Williams being
        brought
        down from the plane first, followed shortly after by Merkle.</p>
</body>

</html>

 

Result in the browser:

html paragraph - coding180

<p>The default style of the label can be seen in the figure above. There will be blanks before and after the paragraph. If you don’t like this blank, you can delete or change it with css style, which will be learned in the following courses.

 

Tip: To remember the name of this HTML element: 

<p> comes from the word paragraph

Task: 

  1. Enter in line 10: <p>My first paragraph. </p>
  2. Enter in line 11: <p>My second paragraph. </p>

Task code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>p tag</title>
</head>

<body>


</body>

</html>

 


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel