HTML Paragraphs

HTML Paragraphs

HTML paragraphs are used to display blocks of text on a web page. They are defined using the <p> tag.

Basic Paragraph Example

<p>This is an HTML paragraph.</p>
<p>This is another paragraph.</p>

👉 Browsers automatically add space (margin) before and after each paragraph.

Paragraph with Line Breaks

The <br> tag is used to break a line inside a paragraph.

<p>
This is line one.<br>
This is line two.<br>
This is line three.
</p>

HTML Paragraph with Formatting

You can format text inside a paragraph using inline tags.

<p>
This is <b>bold</b> text,
this is <i>italic</i> text,
and this is <u>underlined</u> text.
</p>

HTML Paragraph with Alignment

Text alignment can be done using CSS.

<p style="text-align:center;">This paragraph is center aligned.</p>
<p style="text-align:right;">This paragraph is right aligned.</p>
<p style="text-align:left;">This paragraph is left aligned.</p>

 Paragraph with Color

<p style="color:blue;">This is a blue paragraph.</p>
<p style="color:red;">This is a red paragraph.</p>

HTML Paragraph with Background Color

<p style="background-color:lightgray;">
This paragraph has a background color.
</p>

HTML Paragraph with Title Attribute

The title attribute shows text when you hover over it.

<p title="This is a tooltip message">
Hover over this paragraph.
</p>

Preserving Spaces Using <pre>

HTML ignores extra spaces and line breaks. Use <pre> to preserve formatting.

<pre>
This text
keeps spaces
and line breaks.
</pre>

Common Mistakes

❌ Incorrect:

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

✅ Correct:

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

✅ Important Points

  • <p> is a block-level element

  • Browsers add margin automatically

  • Use <br> for line breaks, not new paragraphs

  • Use CSS for styling paragraphs

You may also like...