HTML Paragraph Tag

HTML paragraph is a structural element used to define and display text content as a block of text.

Paragraphs are commonly used for organizing and formatting textual content on a web page.

Paragraph is represented by Tag

Syntax –

<p>Text content</p>

 – Opening Tag: To start a paragraph, you use the  opening tag. This tag tells the web browser to treat the enclosed text as a paragraph.

Text Content: You place the text content you want to display as a paragraph between the opening  tag and the closing  tag. For example:

 – Closing Tag: To signify the end of the paragraph, you use the  closing tag. This tells the browser that the paragraph’s content has ended.

Table of Contents

Block-Level Element

 is a block-level element, which means it starts on a new line and typically takes up the full width of its containing element. This creates a clear separation between paragraphs, making the text more readable.

<p>This is the first paragraph</p>
<p>This is the second paragraph</p>

Paragraph Whitespace

HTML ignores extra whitespace within a paragraph. It treats them as a single space.

<p>This is paragraph                    text</p>

Paragraph Line Breaks

HTML ignores extra line breaks within a paragraph.

<p>Lorem Ipsum is simply 
dummy text of the printing 
and typesetting industry.</p>

Nested Paragraph

In a element, You can not use another element and another block-level elements.

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

In a element, You use other inline elements

<p>paragraph <b>text</b></p>

Paragraph Example

Try to run this example yourself

<!DOCTYPE html>
<html>
<head>
    <title>Dummy Paragraphs</title>
</head>
<body>
    <h1>Welcome to My Dummy Paragraphs Page</h1>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique, lorem eu congue tincidunt, ligula ligula tincidunt tellus, ac gravida nisl est nec libero.</p>

    <p>Phasellus eu consectetur odio, eu iaculis quam. Fusce vestibulum odio vel justo tincidunt, id consectetur turpis euismod.</p>

    <p>Integer auctor bibendum risus, ac bibendum ipsum dapibus et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

    <p>Curabitur vitae quam nec dolor consectetur cursus. Suspendisse nec purus et metus scelerisque volutpat ac a est.</p>

    <p>Proin ac vestibulum odio, sed lacinia dolor. Aenean eu justo vel justo rhoncus bibendum non sed tortor.</p>

    <p>Quisque eleifend dui sed augue eleifend, a feugiat urna tincidunt. Sed vel erat auctor, gravida nunc eu, dignissim libero.</p>
</body>
</html>