Headings, Paragraphs & Text Basics

Chapter 3: HTML Headings, Paragraphs & Text Structure

Is chapter me hum HTML ke core text-related tags detail me samjhenge. Headings, paragraphs aur basic structural elements ka sahi use content ko readable, SEO-friendly aur accessible banata hai.

Agar aap ye tags galat use karte ho, to chahe design achha ho, content confuse lagega aur search engines ko page samajhne me problem hogi.

HTML Headings (h1 se h6)

HTML headings content ka skeleton hoti hain. Ye browser, search engine aur screen readers ko batati hain ki content ka importance level kya hai.

HTML me 6 heading levels hote hain:

• <h1> – Page ka main topic
• <h2> – Major sections
• <h3> – Sub-sections
• <h4> – Section ke andar points
• <h5> – Rare cases me use hota hai
• <h6> – Least important heading

Important:
Headings ka size matter nahi karta. Unka meaning aur hierarchy matter karti hai. Styling ka kaam CSS ka hota hai.

h1 Se h6 Ka Role (Micro Explanation)

Har heading ka apna specific role hota hai:

• h1 – Poore page ka central topic. Ek page me ideally ek hi h1 hota hai.
• h2 – Content ke major sections define karta hai.
• h3 – h2 ke under aane wale sub-points.
• h4–h6 – Deep structured content ke liye, jaise documentation ya long guides.

<h1>HTML Guide</h1> <h2>Introduction</h2> <h3>What is HTML?</h3> <h3>Why HTML is Important?</h3> <h2>Basic Tags</h2>

SEO Insight:
Google headings ko page outline samajhne ke liye use karta hai. Wrong order = unclear topic signals.

HTML Paragraph (<p>)

Paragraph tag <p> normal text content ke liye hota hai. Ye browser ko batata hai ki text ek complete thought ya idea ko represent karta hai.

<p>This is a paragraph in HTML.</p> <p>Each paragraph should focus on one idea.</p>

Info:
Browser extra spaces aur line breaks ignore karta hai. Proper spacing ke liye <p> use karein, manual spacing ke liye nahi.

HTML Line Break (<br>)

<br> tag line break ke liye use hota hai. Ye content ko next line me shift karta hai bina new paragraph banaye.

<p>Address:<br>Street Name<br>City, Country</p>

Warning:
<br> ko paragraphs replace karne ke liye use mat karein. Ye sirf short line breaks ke liye hota hai.

HTML Horizontal Rule (<hr>)

<hr> tag content ke beech logical separation dikhata hai. Ye sirf line nahi hoti, balki section change ka signal hota hai.

<h2>Introduction</h2> <p>Intro content here.</p> <hr> <h2>Next Section</h2> <p>New topic starts here.</p>

Semantic Meaning:
<hr> content boundary show karta hai, sirf decoration ke liye nahi hota.

Best Practices (Headings, p, br, hr)

• Ek hi page me sirf ek <h1>
• Headings ka order kabhi skip na karein
• Har paragraph me ek hi idea likhein
• <br> sirf short breaks ke liye use karein
• <hr> section separation ke liye use karein

Result:
Clean text structure = Better readability + Strong SEO + Accessible content

Common Beginner Mistakes

• Multiple <h1> use karna
• Headings sirf font size ke liye use karna
• Paragraphs ki jagah <br>
• <hr>

Warning:
Browser maaf kar deta hai, lekin SEO aur accessibility tools nahi.

Key Takeaways

• h1–h6 content ka logical structure define karte hain
• <p> readable text ke liye essential hai
• <br> sirf line breaks ke liye hota hai
• <hr> section boundaries show karta hai
• Semantic HTML professional development ka sign hai

Next Chapter:
HTML Text Formatting Tags Explained (Bold, Italic & More)