Headings, Paragraphs & Text Formatting

1. Simple Definition

Text ko organize karne ke liye HTML hume 6 levels ki headings (<h1> se <h6>), regular paragraphs (<p>), aur semantic text formatting tags (jaise <strong>, <em>, <mark>) provide karta hai.

2. Real-Life Analogy

3. Why Do We Need It?

Agar saara text ek hi size me likha ho toh koi bhi user article nahi padhega. Proper heading hierarchy se user aur Google dono samajhte hain ki sabse zaroori topic kaunsa hai.

4. Syntax

<h1>Sabse Badi Main Heading</h1>
<h2>Sub Heading Level 2</h2>
<p>Regular paragraph jisme <strong>bold text</strong> aur <em>italic text</em> ho sakta hai.</p>
<hr> <!-- Horizontal divider line -->
<br> <!-- Line break -->

5. Basic Example

<article>
  <h1>Web Development Kaise Shuru Karein?</h1>
  <h2>Pehla Step: HTML Seekhein</h2>
  <p>HTML seekhna <strong>bahut aasan</strong> hai. Isme <mark>zero coding experience</mark> chahiye hota hai.</p>
  <hr>
  <p>Aapko roz sirf <em>1 ghanta</em> practice karni hai.<br>Consistency hi success ki key hai.</p>
</article>

6. Output / Expected Result

7. Code Explanation

• <h1>: Page ka primary topic. Ek page par ideally sirf ek hi <h1> hona chahiye.
• <strong>: Sirf bold nahi karta, balki screen readers ko batata hai ki ye shabd urgent/important hai.
• <em>: Text ko italic karke emphasis (zor) deta hai.
• <mark>: Text par yellow highlighter effect deta hai.
• <br>: Nayi line shuru karta hai bina naya paragraph banaye (Self-closing).
• <hr>: Topic change hone par beech me horizontal divider line banata hai.

8. Real-World Example

Wikipedia ya Medium ke kisi bhi blog post par heading hierarchy aur highlighted terms isi tarah design kiye jaate hain.

9. Common Mistakes

10. Best Practices

• Pure webpage par sirf 1 main <h1> rakhein (SEO best practice).
• Pure paragraph ke beech line break ke liye <p> use karein, 10 baar <br><br> mat lagayein.
• HTML comments <!-- Comment --> use karein apne code ko explain karne ke liye.

11. Try It Yourself

Playground me ek news report likhein jisme H1, H2, do paragraphs, strong aur mark tags shamil hon.

12. Challenge

Ek mini biography page banayein jisme aapke favorite sportsperson ki headline, unke records aur unka ek famous quote <blockquote> me ho.

13. Interview Questions

14. Quick Revision

• H1 se H6 headings hierarchy banate hain.
• Paragraphs text content organize karte hain.
• Comments <!-- ... --> browser me render nahi hote.

15. FAQ

Headings, Paragraphs & Text Formatting

1. Simple Definition

Typography and text elements form the core readability of any web document. Headings range from <h1> (primary title) down to <h6> (minor sub-heading). Paragraphs are defined with <p>, and semantic formatting tags like <strong> and <em> convey importance and emphasis.

2. Real-Life Analogy

3. Why Do We Need It?

• Information Architecture: Screen readers use heading levels to let visually impaired users jump directly to specific sections.
• SEO Ranking: Search engines heavily weigh <h1> and <h2> tags when indexing core page topics.
• Visual Scannability: Web users do not read word-for-word; they scan clear visual hierarchies.

4. Syntax

<h1>Primary Document Heading</h1>
<h2>Secondary Section Title</h2>
<p>This is a standard paragraph with <strong>bold importance</strong> and <em>italic emphasis</em>.</p>

5. Basic Example

<article>
  <h1>Mastering Modern Frontend Engineering</h1>
  <p>Building websites today requires <strong>semantic HTML5</strong> and responsive design.</p>
  <h2>Core Technologies</h2>
  <p>You will master <mark>HTML, CSS, and JavaScript</mark> through hands-on practice.</p>
  <hr>
  <p><small>Published by WebDev Hinglish • Updated for 2026</small></p>
</article>

6. Output / Expected Result

7. Code Explanation

• <h1> - <h6>: Block-level heading elements. Best practice dictates using exactly one <h1> per document.
• <p>: Block-level paragraph container with standard browser vertical margin spacing.
• <strong> vs <b>: <strong> carries semantic importance (audible in screen readers); <b> is merely cosmetic bolding.
• <em> vs <i>: <em> represents stressed verbal emphasis; <i> is styling for alternate voice (technical terms, book titles).
• <hr>: Represents a semantic thematic break between topics.

8. Real-World Example

In technical documentation sites like MDN or Stripe Docs, the page title is always <h1>, section titles are <h2>, and sub-arguments are <h3>. Skipping heading levels (e.g. going from h1 directly to h4) breaks navigation for assistive screen reader users.

9. Common Mistakes (Beginners Traps)

10. Best Practices

• Maintain a strict heading hierarchy: h1 → h2 → h3 without skipping levels.
• Use <strong> and <em> for semantic meaning rather than purely visual <b> and <i>.
• Use <br> exclusively for line breaks within poems or postal addresses, never for visual margin spacing.

11. Try It Yourself

Open the Live Playground and construct a mini article with an h1, two h2 sections, and formatted paragraphs!

12. Mini Challenge

Create an author profile section featuring an h2 name, a paragraph with highlighted text (<mark>), and a small disclaimer paragraph.

13. Interview Questions

14. Quick Revision

• Headings dictate document hierarchy; CSS controls visual font sizes.
• Only use one <h1> per web page.
• Semantic tags enhance accessibility, SEO, and developer readability.

15. FAQ (Frequently Asked Questions)