HTML | Paragraph

<p> tag

The <p> tag in HTML defines a paragraph. These have both opening and closing tag. So anything mentioned within <p> and </p> is treated as a paragraph. Most browsers read a line as a paragraph even if we don’t use the closing tag i.e, </p>, but this may raise unexpected results. So, it is both a good convention and we must use the closing tag.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>Paragraph</title>
</head>
<body>
    <p>A Computer Science portal for geeks.</p>
    <p>It contains well written, well thought articles.</p>
</body>
</html>

chevron_right


Output:

When we look at the webpage, we see that there are few spaces added before and after a paragraph. HTML does this by default. Let’s look at few properties of paragraph tag:

  • As already mentioned, the<p>tag automatically adds space before and after any paragraph, which is basically margins added by the browser.
  • If a user adds multiple spaces, the browser reduces them it to a single space.
  • If a user adds multiple lines, the browser reduces them to a single line.
filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>Display_Paragraph</title>
</head>
<body>
    <p>
    This paragraph has multiple
    lines. But HTML reduces them
    to a single line, omitting
    the carriage return we have used.
    </p>
      
    <p>
    This paragraph      has multiple
    spaces.     But HTML reduces   them
    all to a     single space,   omitting
    the extra   spaces and line    we have used.
    </p>
</body>
</html>

chevron_right


Output:

<br> tag

Break Line tag: There is a way to let the HTML know where does the browser need to change the lines by the use of <br> tag. These tags do not have any closing tag. So, just a single opening tag will change the line.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>Display_Paragraph</title>
</head>
<body>
    <p>
    This paragraph has multiple<br>
    lines. But HTML reduces them<br>
    to a single line, omitting<br>
    the carriage return we have used.
    </p>
</body>
</html>

chevron_right


Output:



<align attribute>

align Attribute: The <p> tag specifically supports the alignment attribute and allows us to align our paragraphs in left, right or center alignment.
Syntax:

<p align="value">

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>Paragraph</title>
</head>
<body>
    <p align="center">Welcome Geeks</p>
    <p align="left">A Computer Science portal for geeks.</p>
    <p align="right">It contains well written, well thought articles.</p>
</body>
</html>

chevron_right


Output:

The <pre> element

We have seen how the paragraph tag ignores all the change of lines and extra spaces within a paragraph, but there is a way to preserve this by the use of <pre> tag. It also contains an opening and a closing tag. It displays a text within a fixed height and width and preserves the extra lines and spaces we use.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>Display_Paragraph</title>
</head>
<body>
    <pre>
    This paragraph has multiple
    lines. But it is displayed 
    as it is unlike the paragraph 
    tag.
    </pre>
      
    <pre>
    This     paragraph has multiple
    spaces. But     it is displayed 
    as it is    unlike the paragraph 
         tag.
    </pre>
</body>
</html>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.