HTML हेडिंग्स (H1-H6): महत्व, SEO और उपयोग के सर्वोत्तम अभ्यास

HTML हेडिंग्स 6 स्तरों (<h1> से <h6>) के माध्यम से संदर्भित होती हैं, जहां h1 सबसे महत्वपूर्ण हेडिंग स्तर है और h6 सबसे कम महत्वपूर्ण।

नोट: हेडिंग्स का उपयोग सर्च इंजन (जैसे गूगल) वेबपेज की सामग्री को इंडेक्स करने के लिए करते हैं।

उदाहरण: इंटरैक्टिव हेडिंग प्रीव्यू

<!DOCTYPE html>
<html>
<head>
  <title>HTML हेडिंग</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 10px; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>HTML हेडिंग</legend>
      <input type="text" id="textSelect" placeholder="यहाँ हेडिंग टाइप करें...">
      <div id="radioBut">
        <label>H1</label><input class="radio" type="radio" name="heading" value="h1" checked>
        <label>H2</label><input class="radio" type="radio" name="heading" value="h2">
        <label>H3</label><input class="radio" type="radio" name="heading" value="h3">
        <label>H4</label><input class="radio" type="radio" name="heading" value="h4">
        <label>H5</label><input class="radio" type="radio" name="heading" value="h5">
        <label>H6</label><input class="radio" type="radio" name="heading" value="h6">
      </div>
      <div>हेडिंग प्रीव्यू: <span id="headingPreview">आउटपुट यहाँ दिखेगा</span></div>
      <input type="button" onclick="changeHeading()" value="प्रीव्यू">
    </fieldset>
  </form>
  <script>
    var textSelect = document.getElementById("textSelect");
    var headingPreview = document.getElementById("headingPreview");
    function changeHeading() {
      if (textSelect.value === '')
        headingPreview.innerHTML = 'एक हेडिंग लिखें';
      else {
        for (var i = 0; i < 6; i++) {
          var radInp = document.getElementsByClassName('radio')[i];
          if (radInp.checked === true && textSelect.value !== '')
            headingPreview.innerHTML = '<' + radInp.value + '>' + textSelect.value + '</' + radInp.value + '>';
        }
      }
    }
  </script>
</body>
</html>

हेडिंग स्तरों का महत्व क्रम

SEO और एक्सेसिबिलिटी के लिए सर्वोत्तम अभ्यास

• एक पेज पर एक H1: मुख्य विषय स्पष्ट रूप से परिभाषित करें
• क्रम न छोड़ें: H1 → H2 → H3 (H1 के बाद सीधे H4 न जाएं)
• कीवर्ड्स शामिल करें: प्राकृतिक रूप से महत्वपूर्ण कीवर्ड्स हेडिंग्स में
• विवरणात्मक हों: "परिचय" के बजाय "हमारी सेवाओं का परिचय"
• स्क्रीन रीडर्स: हेडिंग स्ट्रक्चर नेविगेशन में मदद करता है

आउटपुट परिदृश्य

1. खाली टेक्स्ट फील्ड के साथ 'प्रीव्यू' क्लिक: "एक हेडिंग लिखें"
2. 'h6' रेडियो चेक्ड के साथ टेक्स्ट: छोटा हेडिंग आउटपुट
3. 'h1' रेडियो चेक्ड के साथ टेक्स्ट: बड़ा मुख्य हेडिंग आउटपुट