HTML5 में h1 का सही उपयोग कैसे करें?

h1: शीर्षक, शीर्षक नहीं

<h1> एक शीर्षक (heading) है, दस्तावेज़ शीर्षक (title) नहीं। HTML5 में, प्रत्येक सेक्शनिंग रूट या कंटेंट सेक्शन का अपना <h1> हो सकता है।

HTML5 आउटलाइन एल्गोरिदम

HTML5 <section>, <article>, <aside>, <nav> जैसे सेक्शनिंग तत्वों का परिचय देता है, जिनमें से प्रत्येक की अपनी शीर्षक पदानुक्रम हो सकती है।

सही संरचना

<!DOCTYPE html>
<html>
<head>
    <title>पेज शीर्षक - ब्राउज़र टैब में दिखता है</title>
</head>
<body>
    <!-- पेज-स्तरीय शीर्षक (पहला h1) -->
    <h1>मेरी ब्लॉग साइट</h1>
    
    <nav>
        <h2>नेविगेशन</h2> <!-- नेव सेक्शन का शीर्षक -->
        <ul><li><a href="#">होम</a></li></ul>
    </nav>
    
    <main>
        <article>
            <header>
                <h2>लेख शीर्षक</h2> <!-- लेख का मुख्य शीर्षक -->
            </header>
            <p>लेख सामग्री...</p>
            
            <section>
                <h3>उप-अनुभाग 1</h3>
                <p>सामग्री...</p>
            </section>
            
            <section>
                <h3>उप-अनुभाग 2</h3>
                <p>सामग्री...</p>
            </section>
        </article>
        
        <aside>
            <h2>साइडबार</h2>
            <section>
                <h3>संबंधित लेख</h3>
                <ul><li>लेख 1</li></ul>
            </section>
        </aside>
    </main>
    
    <footer>
        <h2>फुटर</h2>
        <p>कॉपीराइट जानकारी</p>
    </footer>
</body>
</html>

मुख्य नियम

1. प्रति सेक्शनिंग रूट/कंटेंट सेक्शन एक <h1>: प्रत्येक <body>, <article>, <section>, <nav>, <aside> का अपना <h1> हो सकता है
2. पहला <h1> दस्तावेज़ लेबल है: <body> और पहले कंटेंट सेक्शन के बीच एक <h1> होना चाहिए
3. पदानुक्रम बनाए रखें: h1 → h2 → h3 → h4 → h5 → h6 क्रम में उपयोग करें
4. स्तर न छोड़ें: h1 के बाद सीधे h4 न उपयोग करें

सामान्य गलतियाँ

पहुँच (Accessibility) लाभ

• स्क्रीन रीडर उपयोगकर्ता हेडिंग्स द्वारा नेविगेट करते हैं (H कुंजी)
• उचित पदानुक्रम पेज संरचना बताता है
• SEO: खोज इंजन सामग्री पदानुक्रम समझते हैं

आधुनिक दृष्टिकोण: स्पष्ट पदानुक्रम

HTML5 आउटलाइन एल्गोरिदम (एकाधिक h1) सभी स्क्रीन रीडर्स द्वारा पूरी तरह लागू नहीं किया गया है। सुरक्षित दृष्टिकोण:

<!-- स्पष्ट एकल h1 पदानुक्रम -->
<body>
    <h1>पेज का मुख्य शीर्षक</h1>
    
    <section>
        <h2>अनुभाग 1</h2>
        <h3>उप-अनुभाग 1.1</h3>
        <h3>उप-अनुभाग 1.2</h3>
    </section>
    
    <section>
        <h2>अनुभाग 2</h2>
        <h3>उप-अनुभाग 2.1</h3>
    </section>
</body>

दस्तावेज़ आउटलाइन जांचना

• W3C HTML Validator: https://validator.w3.org/
• ब्राउज़र एक्सटेंशन: "HeadingsMap", "HTML5 Outliner"
• कंसोल में: document.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach(h => console.log(h.tagName, h.textContent))