Heading एक शब्द, शब्दांश या वाक्य होता है, जिसे किसी Document, Article, Blog Post आदि में सबसे पहले लिखा जाता है. Heading बिल्कुल Page Title के समान होती है. आप Heading की तुलना “शीर्षक” से कर सकते है.
Newspaper Article और Magazine Article की तरह Webpages और HTML Documents मे भी Headings को लिखा जाता है.
इस Lesson में हम आपको HTML Heading Tag के बारे में पूरी जानकारी देंगे. HTML Heading को समझने के लिए इस Lesson को हमने कई भागों में बांटा है. जिनके बारे में नीचे बताया जा रहा है.
1. Introduction to HTML Heading in Hindi – HTML Heading का परिचय
HTML में Heading Define करने के लिए Heading Element का Use किया जाता है. Heading Element 6 Level तक Heading Support करता है. जिन्हें क्रमश: <H1> से <H6> Element द्वारा Define किया जाता है.
HTML Headings का उपयोग उनकी Importance के आधार पर किया जाता है. सबसे अधिक महत्व की Heading के लिए <h1> Level Heading का उपयोग किया जाएगा. और सबसे कम महत्व की Heading के लिए <h6> Level Heading का इस्तेमाल किया जाएगा.
प्रत्येक Level की Heading का एक Default Size होता है. जो अलग-अलग ब्राउजर में भिन्न हो सकता है. इसलिए आप प्रत्येक Level की Heading का Size, Color, Alignment आदि की Settings CSS – Cascading Style Sheets के द्वारा Set कर सकते है. जिससे प्रत्येक ब्राउजर में एक ही प्रकार की Headings Display होती है.
अगर आपके HTML Document में कोई शीर्षक है तो आप इसके लिए Heading Element का ही उपयोग करें. क्योंकि इससे आप HTML Standard को बनाए रखते है. आप Heading Formatting के लिए HTML के अन्य Tag <big> का इस्तेमाल करके भी <h1> की जैसी Formatting प्राप्त कर सकते है. लेकिन, इससे आप HTML Standard को तोड रहे होते है. जो आपके वेबपेज की Readability को कम करता है.
2. Importance of HTML Heading – HTML Heading का महत्व
समाचार पत्रों और पत्रिकाओं में पाठकों (Readers) का ध्यान आकर्षित करने के लिए Headings का उपयोग किया जाता है. आकर्षक शीर्षक को पढकर Readers Main content तक पहुँचते है.
इसी तरह Webpages, Blog Posts या अन्य Web Writings में भी Headings का इस्तेमाल Readers का ध्यान आकर्षित करने के लिए किया जाता है. HTML Headings का उपयोग Search Engine(s) Content को Index करने के लिए करते है. इनके अलावा भी HTML Headings का बहुत महत्व है. जिनके बारे में नीचे बताया जा रहा है.
Document का शीर्षक और बनावट (Structure) को Highlight करने के लिए Headings का इस्तेमाल किया जाता है. Document शीर्षक को Mainly H1 Heading द्वारा Define किया जाता है.
Document को Sections में Divide करने के लिए Headings जरूरी है. Headings से Document Structure पठनीय (Readable) हो जाता है. जिससे पाठक Content से जुडा रहता है.
Headings से एक वेबपेज कई भागों में बंट जाता है. इन भागों को शीर्षक Heading द्वारा दिए जाते है. जिनको पढकर Readers हमारे Document का महत्व के बारे में अंदाजा लगाते है.
Readers को तुरंत जानकारी देने में Headings सबसे महत्वपूर्ण भूमिका निभाती है.
HTML Headings का उपयोग Search Engines हमारे Content को जल्दी और सही तरह से Index करने के लिए भी करते है.
3. Types of HTML Heading – HTML Heading के प्रकार
HTML Language में Document Structure को सही तरह से Define करने के लिए 6 प्रकार की Headings दी गई है. जिनके बारे में नीचे बताया जा रहा है.
H1 Level Heading
यह HTML Document की Main Heading होती है. और यह सबसे पहले महत्वपूर्ण Heading भी होती है. एक Blog Post या Webpage का शीर्षक H1 Level की Heading से ही Define किया जाता है. इस Heading को Document में सिर्फ एक बार ही Use करने की सलाह दी जाती है. उदाहरण:
<h1>This is 1st Level Heading.</h1>
H2 Level Heading
यह HTML Document की Sub-heading होती है. इसका Use Main Heading के बाद किया जाता है. H2 Heading से Document को उप-शीर्षक दिया जाता है. उदाहरण:
<h2>This is 2nd Level Heading.</h2>
H3 Level Heading
इसे Sub-sub-heading कहते है. और इसे Minor Heading के नाम से भी जाना जाता है. इसका Use Document में और गहराई से शीर्षक देने के लिए किया जाता है. उदाहरण:
<h3>This is 3rd Level Heading.</h3>
h4 Level Heading
इसे 4th Level Heading कहा जाता है. इस Heading से Document को Deep Sections में Divide किया जाता है. इसका इस्तेमाल किसी बडे Topic को छोटे Sections में बांटने के लिए किया जाता है. उदाहरण:
<h4>This is 4th Level Heading.</h4>
H5 Level Heading
5th Level Heading Content को और Deep Divide करने में सहायक है. इसे H5 Element से Define किया जाता है. उदाहरण:
<h5>This is 5th Level Heading.</h5>
H6 Level Heading
6th Level Heading भी Content को और Deeply Divide करने में सहायक है. यह सबसे कम Importance की Heading होती है. इसे H6 Element द्वारा Define किया जाता है. उदाहरण:
<h6>This is 6th Level Heading.</h6>
4. Example of HTML Heading – HTML Heading का उदाहरण
अब आप HTML Headings के बारे में पूरी जानकारी हो गई है. अब समय है जो आपने अब तक सीखा है. उसे व्यावहारिक रूप में उपयोग करने का. इस कार्य के लिए हमने एक उदाहरण तैयार किया है. जिसका उपयोग करने के बाद HTML Headings का Concept बिल्कुल Clear हो जाएगा.
नीचे लिखे HTML Code को Copy करके नोटपैड में Paste कीजिए या फिर इस Code को अपने हाथों से सीधे Notepad में Type कीजिए.
<!DOCTYPE html> <html> <body><h1>This is First Level Heading</h1> <h2>This is Second Level Heading</h2> <h3>This is Third Level Heading</h3> <h3>This is Fourth Level Heading</h3> <h5>This is Fifth Level Heading</h5> <h6>This is Sixth Level Heading</h6></body> </html>
ऊपर लिखे गए HTML Code को आप heading.html के नाम से Save कीजिए. और इसे Open कीजिए. आपके सामने यह उदाहरण इस प्रकार का Output दिखाएगा.
This is First Level of Heading.
This is Second Level of Heading.
This is Third Level of Heading
This is Fourth Level of Heading.
This is Fifth Level of Heading.
This is Sixth Level of Heading.
आपने क्या सीखा?
इस Lesson में हमने आपको HTML Headings के बारे में बताया है. आपने HTML Headings क्या है? HTML Headings के प्रकार और HTML Headings का महत्व के बारे मे भी जाना है. हमे उम्मीद है कि यह Lesson आपके लिए उपयोगी साबित होगा.
Sir jase hmm koe tabel bnate h to kya hmm usme html lgana Kristi h kya sir
Bahut aachi jankari aise hi or jankari dete rahe
Aap ne Bahot achha samjhaya hain lekin agar aap ek word ko sath me lekar samjhate aur bhi achha hota.
4th level heading galat ho gai hain waha 3 level likh dia hain.
गौरव जी, सही कहां थोड़ी सी भूल हो गई थी. जिसे अब सुधार दिया गया है.
Sir bhut accha padyapne
सर, मेरा ब्लॉग ब्लॉगर पर है मैं Arlina टेम्प्लेट use करता हूं
लेकिन उसमे h1 में मेरे ब्लॉग का नाम आता है
इसे edit theme html में जाके क्या मैं बदलावं कर सकता हूं
कोई ऐसीं theme suggest किजिये जीसमे h1 में पोस्ट title आता हो
विनोद जी, आप इसे Edit भी कर सकते हैं अगर ये नही हो रहा हैं तो आप कोई दूसरा Templete Use कर लिजिये. आपको बहुत सारे फ्री मे मिल जायेंग़े.