HTML Paragraphs

Working with text content and paragraphs

📄 What are HTML Paragraphs?

HTML paragraphs are used to display blocks of text. The <p> tag defines a paragraph and automatically adds space before and after the content.


<p>This is a paragraph of text.</p>
<p>This is another paragraph with more content.</p>
<p>Paragraphs are separated by default spacing.</p>
                                    

Output:

This is a paragraph of text.

This is another paragraph with more content.

Paragraphs are separated by default spacing.

Paragraph Features

📝

Basic Paragraph

Simple text blocks

<p>Hello World!</p>
â†Šī¸

Line Breaks

Force line breaks with <br>

<p>Line 1<br>Line 2</p>
🎨

Styled Paragraphs

Add colors and formatting

<p style="color: blue;">Blue text</p>
📐

Text Alignment

Center, left, or right align

<p style="text-align: center;">Centered</p>

🔹 Line Breaks and Spacing

Control how text flows within paragraphs:

<!-- Paragraph with line breaks -->
<p>
    First line of text<br>
    Second line of text<br>
    Third line of text
</p>

<!-- Multiple paragraphs -->
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

Output:

First line of text
Second line of text
Third line of text

This is the first paragraph.

This is the second paragraph.

🔹 Paragraph Styling

Style paragraphs with colors, fonts, and alignment:

<p style="color: red; font-size: 18px;">Large red text</p>
<p style="text-align: center; background-color: yellow;">Centered with yellow background</p>
<p style="font-family: Arial; font-weight: bold;">Bold Arial font</p>
<p style="text-align: right; color: blue;">Right-aligned blue text</p>

Output:

Large red text

Centered with yellow background

Bold Arial font

Right-aligned blue text

🔹 Preformatted Text

Use <pre> to preserve spacing and line breaks:

<pre>
This text preserves
    all spacing
        and line breaks
exactly as written.
</pre>

Output:

This text preserves
    all spacing
        and line breaks
exactly as written.

🧠 Test Your Knowledge

Which tag is used to create a line break within a paragraph?