से

तक संदर्भित करता है, h1 सबसे महत्वपूर्ण हेडिंग स्तर है और h6 निम्नतम महत्व का है। H1, H2, H3, H4, H5, H6 छह शीर्षक हैं।

नोट - वेबपेज की सामग्री को अनुक्रमित करने के लिए खोज इंजन (जैसे Google) द्वारा शीर्षक का उपयोग किया जाता है।

आइए HTML शीर्षक के लिए एक उदाहरण देखें -

उदाहरण

<!DOCTYPE html>
<html>
<head>
<title>HTML Heading</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 Heading</legend>
<input type="text" id="textSelect" placeholder="Type Heading Here...">
<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>Heading Preview: <span id="headingPreview">Output will show up here</span></div>
<input type="button" onclick="changeHeading()" value="Preview">
</fieldset>
</form>
<script>
   var textSelect = document.getElementById("textSelect");
   var headingPreview = document.getElementById("headingPreview");
   function changeHeading() {
      if(textSelect.value === '')
         headingPreview.innerHTML = 'Write a Heading';
      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>

आउटपुट

यह निम्नलिखित आउटपुट देगा -

1) 'पूर्वावलोकन' clicking क्लिक करने से पहले टेक्स्ट फ़ील्ड वाला बटन खाली -

एचटीएमएल शीर्षक

2) 'पूर्वावलोकन' . क्लिक करने के बाद टेक्स्ट फ़ील्ड वाला बटन खाली -

एचटीएमएल शीर्षक

3) 'पूर्वावलोकन' . पर क्लिक करने के बाद टेक्स्ट फ़ील्ड वाला बटन खाली नहीं है और 'h6' रेडियो बटन चेक किया गया है -

एचटीएमएल शीर्षक

4) 'पूर्वावलोकन' . पर क्लिक करने के बाद टेक्स्ट फ़ील्ड वाला बटन खाली नहीं है और 'h1' रेडियो बटन चेक किया गया है -

एचटीएमएल शीर्षक