HTML पेज में हेडिंग्स कैसे बनाएं?

परिचय

HTML, हेडिंग्स बनाने के लिए 6 टैग्स प्रदान करता है: h1, h2, h3, h4, h5 और h6। किसी भी हेडिंग टैग <h1> से <h6> का उपयोग करें और प्रत्येक टैग आपको हेडिंग का अलग आकार देगा। <h1> टैग सबसे महत्वपूर्ण हेडिंग को परिभाषित करता है और <h6> सबसे कम महत्वपूर्ण हेडिंग को परिभाषित करता है।

महत्वपूर्ण नोट

इन टैग्स को <body>...</body> टैग्स के अंदर उपयोग करना चाहिए।

उदाहरण

<!DOCTYPE html> <html> 
    <head> 
        <title>HTML Headings</title> 
    </head> 
    <body> 
        <h1>यह हेडिंग 1 है</h1> 
        <h2>यह हेडिंग 2 है</h2> 
        <h3>यह हेडिंग 3 है</h3> 
        <h4>यह हेडिंग 4 है</h4> 
        <h5>यह हेडिंग 5 है</h5> 
        <h6>यह हेडिंग 6 है</h6> 
    </body> 
</html>

आउटपुट

हेडिंग हायरार्की का महत्व

• SEO के लिए: खोज इंजन हेडिंग स्ट्रक्चर का उपयोग पेज की संरचना समझने के लिए करते हैं
• एक्सेसिबिलिटी के लिए: स्क्रीन रीडर्स हेडिंग नेविगेशन का उपयोग करते हैं
• पठनीयता के लिए: स्पष्ट हायरार्की कंटेंट को स्कैन करना आसान बनाती है

सही हेडिंग स्ट्रक्चर

<h1>मुख्य पेज शीर्षक (प्रति पेज केवल एक)</h1>
    <h2>मुख्य सेक्शन</h2>
        <h3>उप-सेक्शन</h3>
            <h4>विस्तृत बिंदु</h4>
        <h3>दूसरा उप-सेक्शन</h3>
    <h2>दूसरा मुख्य सेक्शन</h2>
        <h3>उप-सेक्शन</h3>

गलत हेडिंग स्ट्रक्चर (बचें)

<h1>शीर्षक</h1>
<h3>लेवल स्किप किया गया</h3> <!-- h2 गायब -->
<h5>एक और स्किप</h5> <!-- h4 गायब -->
<h2>पिछड़े क्रम में</h2>

हेडिंग्स स्टाइलिंग (CSS)

h1 { font-size: 2.5rem; font-weight: 700; color: #1a1a1a; margin-bottom: 1rem; }
h2 { font-size: 2rem; font-weight: 600; color: #2c3e50; margin: 1.5rem 0 0.5rem; }
h3 { font-size: 1.5rem; font-weight: 600; color: #34495e; margin: 1.25rem 0 0.5rem; }
h4 { font-size: 1.25rem; font-weight: 500; color: #34495e; margin: 1rem 0 0.5rem; }
h5 { font-size: 1.1rem; font-weight: 500; color: #555; margin: 1rem 0 0.5rem; }
h6 { font-size: 1rem; font-weight: 500; color: #666; margin: 1rem 0 0.5rem; }

/* रिस्पॉन्सिव हेडिंग्स */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.35rem; }
}

हेडिंग अलाइनमेंट

HTML5 align एट्रिब्यूट का समर्थन नहीं करता। CSS text-align प्रॉपर्टी का उपयोग करें:

<h1 style="text-align: center;">सेंटर हेडिंग</h1>
<h2 style="text-align: right;">राइट अलाइन्ड</h2>
<h3 class="text-left">लेफ्ट अलाइन्ड (डिफ़ॉल्ट)</h3>

सर्वोत्तम अभ्यास

1. प्रति पेज केवल एक <h1> - मुख्य शीर्षक के लिए
2. क्रम न छोड़ें - h1 → h2 → h3 क्रम बनाए रखें
3. विवरणात्मक टेक्स्ट - "सेक्शन 1" के बजाय "हमारी सेवाएँ" लिखें
4. कीवर्ड्स शामिल करें - SEO के लिए h1, h2 में मुख्य कीवर्ड्स
5. CSS से स्टाइल करें - इंलाइन स्टाइल्स के बजाय क्लासेज उपयोग करें

एक्सेसिबिलिटी चेकलिस्ट

• [ ] हेडिंग हायरार्की तार्किक है
• [ ] कोई लेवल स्किप नहीं किया गया
• [ ] प्रत्येक पेज पर एक h1 है
• [ ] हेडिंग टेक्स्ट विवरणात्मक है
• [ ] कलर कंट्रास्ट WCAG AA मानक पूरा करता है