HTML Lessons
Home / HTML / HTML Headings

HTML Headings

Headings HTML elements होते हैं जो webpage में title और subtitles दिखाने के लिए use होते हैं। वे content को hierarchy और importance देते हैं।

  •  H1 → सबसे बड़ा heading, main title
  • H2 → Section heading
  • H3 → Sub-section heading
  • H4 → छोटा Headline
  • H5 → और छोटा Headline
  • H6 → सबसे छोटा heading

2. Headings Syntax 

<h1>This is H1 Heading</h1> <h2>This is H2 Heading</h2> <h3>This is H3 Heading</h3> <h4>This is H4 Heading</h4> <h5>This is H5 Heading</h5> <h6>This is H6 Heading</h6>
Output Visualization:

This is H1 Heading

This is H2 Heading

This is H3 Heading

This is H4 Heading

This is H5 Heading
This is H6 Heading

3. Example: Headings in a Page

<!DOCTYPE html> <html> <head> <title>HTML Headings Example</title> </head> <body> <h1>Welcome to My Website</h1> <h2>About Me</h2> <p>Hello, I am learning HTML.</p> <h2>My Skills</h2> <h3>Frontend Development</h3> <p>HTML, CSS, JavaScript</p> <h3>Backend Development</h3> <p>Node.js, PHP</p> <h2>Contact Me</h2> <p>Email: example@gmail.com</p> </body> </html>

4. Headings के फायदे (Benefits of Headings)

  • Content Organize करना – Headings content को logical sections में divide करती हैं।
  • SEO Friendly – Search engines headings को पढ़कर page content समझते हैं।
  • Accessibility Improve करना – Screen readers headings को detect करके visually impaired users को help करते हैं।
  • Readability बढ़ाना – Page easy to scan और readable बनता है।

5. Headings Best Practices

  1. एक page में सिर्फ एक H1 use करें – यह page का main title होता है।
  2. Headings को order में रखें – H1 → H2 → H3 → …
  3. Keywords in Headings – SEO के लिए heading में main keyword डालें।
  4. Headings में inline styling avoid करें – CSS से styling करें।
  5. Short और Clear रखें – Visitors को जल्दी समझ आ जाए।

6. Inline Headings Example

Headings में आप text styling या emphasis जोड़ सकते हैं, लेकिन best practice CSS से करना है।
<h2 style="color:blue;">About Me</h2> <h3><em>Frontend Skills</em></h3> <h3><strong>Backend Skills</strong></h3>
Example Output : - 

About Me

Frontend Skills

Backend Skills

7. Headings के साथ Lists और Paragraphs

Headings का use content को organize करने में किया जाता है। Example: 

<h1>My Web Development Course</h1> <h2>HTML</h2> <ul> <li>Basics</li> <li>Elements</li> <li>Attributes</li> </ul> <h2>CSS</h2> <ul> <li>Selectors</li> <li>Properties</li> <li>Responsive Design</li> </ul> <h2>JavaScript</h2> <ul> <li>Variables</li> <li>Functions</li> <li>DOM Manipulation</li> </ul>

8. Semantic Importance 

HTML5 में headings semantic importance रखते हैं। Screen readers headings detect करके content hierarchy users को बताते हैं। Search engines headings read करके page का context समझते हैं।

Semantic Example:

<header>
  <h1>My Website</h1>
</header>

<section>
  <h2>About Me</h2>
  <p>Content goes here...</p>
</section>

<footer>
  <h2>Contact Information</h2>
  <p>Email, Phone</p>
</footer>

 9. SEO के लिए Headings Tips

  • H1 → Page का main title
  • H2 → Main sections
  • H3 → Subsections
  • Keywords naturally include करें।
  • Avoid skipping heading levels – H1 → H3 directly mat use kare

10. Quick Example: Headings + Links + Paragraphs

<!DOCTYPE html>
<html>
<head>
  <title>Headings Practice</title>
</head>
<body>

<h1>My Travel Blog</h1>

<h2>Europe Trip 2025</h2>
<p>Visited many countries like France, Germany, Italy.</p>

<h3>France</h3>
<p>Paris is amazing! <a href="https://en.parisinfo.com" target="_blank">Learn more</a></p>

<h3>Germany</h3>
<p>Berlin and Munich were beautiful.</p>

<h2>Asia Trip</h2>
<p>Japan and Thailand were my favorites.</p>

</body>
</html> 

11. Practice Exercises

  • एक page बनाइए जिसमें H1 में अपना नाम,
  • H2 में अपनी hobbies,
  • H3 में हर hobby का short description हो।
  • एक blog post create करें जिसमें H1 → Title, H2 → Section Titles, H3 → Sub-section Titles।
  • H1 से H6 के बीच के differences browser में check करें।

12. Quick Summary

Element (तत्व) Purpose (उद्देश्य) Best Practice (सर्वोत्तम अभ्यास)
<h1> Page का **main heading** (मुख्य शीर्षक) सिर्फ **1 per page** (प्रति पृष्ठ केवल एक)
<h2> **Section heading** (अनुभाग शीर्षक) H1 के **बाद use करें** (उपयोग करें)
<h3> **Sub-section heading** (उप-अनुभाग शीर्षक) H2 के **अंदर use करें** (उपयोग करें)
<h4>-<h6> **Sub-sub sections** (उप-उप अनुभाग) Small content या **less important** (कम महत्वपूर्ण सामग्री)

**SEO & Accessibility:** Headings (शीर्षक) → **Search engines** और **screen readers** के लिए **महत्वपूर्ण** होते हैं।

Bonus Tip:

“Headings सिर्फ बड़े text नहीं, यह आपकी content की skeleton होती हैं। जितना सही hierarchy होगा, page उतना user-friendly और SEO-friendly होगा।” 

← HTML Attributes HTML Paragraphs →
category : HTML
Tags : HTML Headings Headings HTML Headings