Tag p

The <p> tag is one of the most fundamental elements in HTML. It stands for “paragraph” and is used to group together blocks of text, creating readable, well-structured content on a web page.

📌 What Is the <p> Tag?

  • The <p> element represents a paragraph of text.
  • Browsers automatically add vertical spacing (margin) before and after <p> tags for readability.
  • It is a block-level element, meaning it takes up the full width available and starts on a new line.

✅ Basic Syntax

<p>This is a simple paragraph of text.</p>

🧩 Structure Diagram

<body>
 ├─ <p>Paragraph 1</p>
 └─ <p>Paragraph 2</p>
</body>

The browser renders each <p> on a separate block with spacing.

🧪 Example 1: Multiple Paragraphs

<p>HTML is the backbone of web pages.</p>
<p>Using paragraphs helps organize text into logical sections.</p>

Each paragraph will appear stacked vertically with space in between.

💡 Why Use <p>?

BenefitDescription
Text groupingSeparates ideas into digestible chunks
Semantic structureHelps browsers and screen readers understand content layout
Styling controlCan be styled with CSS (fonts, margins, colors)
AccessibilityImproves readability for all users

🔧 Common Attributes

  • class — Assigns a CSS class for styling
  • id — Unique identifier for linking or scripting
  • style — Inline CSS styling
<p id="intro" class="highlight" style="color: blue;">
  Welcome to our website!
</p>

🧪 Example 2: Styled Paragraph

<p style="font-size:18px; line-height:1.5; color: #333;">
  This paragraph has custom font size, line height, and color.
</p>

📜 Accessibility Notes

  • Use <p> to organize text semantically rather than using <br> for spacing.
  • Screen readers recognize paragraphs as separate blocks, aiding navigation.
  • Avoid placing block-level elements (like <div>, <section>) inside <p> — this is invalid HTML.

⚠️ Common Mistakes

  • Nesting block elements inside <p> (e.g., <p><div>...</div></p>) is invalid.
  • Using <p> tags for non-text elements (e.g., images alone) is discouraged.
  • Overusing <br> tags instead of proper paragraph separation.

🧪 Example 3: Invalid HTML (Don’t do this!)

<p>
  This paragraph
  <div>should not have a div inside</div>
</p>

Correct way:

<p>This paragraph</p>
<div>This div is separate</div>

🔄 How Browsers Render <p>

Browsers automatically add default margins before and after <p> tags, which can be customized with CSS:

p {
  margin-top: 1em;
  margin-bottom: 1em;
}

🏁 Summary

The <p> tag is the building block of text content on the web. It defines paragraphs semantically, enabling better readability, accessibility, and styling control.

💡 Pro tip: Always use <p> to wrap paragraphs instead of multiple <br> tags for clean, maintainable HTML.