एक अच्छा वेब डेवलपर बनने के लिए आपको HTML टैग्स की सटोंच जानकारी और उसको इस्तेमाल करने के तरीकों के बारे में सही से पता होना जरूरी है।
जब से HTML 5 के साथ सिमैन्टिक(Sementic) टैग्स आए है तब से HTML टैग्स को इस्तेमाल करना और भी आसान और आरामदायक हो गया।
HTML में हर एक टैग का कुछ ना कुछ मतलब होता है, कोई भी टैग कही भी बिना जरूरत अपनी मर्जी से इस्तेमाल नहीं करना चाहिए।
अगर आप ये HTML टैग का ब्लॉग पढ़ रहे हो तो हमें आशा है की आपको जरूर पता होगा की HTML क्या होता है? अगर नहीं पता तो आप हमारा ब्लॉग “एचटीएमएल(HTML) क्या है ?” जरूर पढे।
HTML Tags क्या होते है?
HTML टैग का मतलब की एसे शब्द और शब्द लिखने का तरीका जिसके इस्तेमाल करने से एक HTML डॉक्यूमेंट बनता है, कोई भी HTML वेबपेज बिना टैग्स का इस्तेमाल कीये नहीं सकता।
HTML टैग में कोई कंटेन्ट लिखने के लिए आपको टैग को ओपन और क्लोज़ करना पड़ता है,
HTML टैग का ऊदाहरण:
<body> ओपन और क्लोज़ टैग के बीच में आपका कंटेन्ट आएगा। </body>
HTML टैग ओपन “<tagname>” के और बंध “</tagname>” से ही होता है।
HTML में 2 तरह के टैग होते है,
- Paired टैग,
- Unpaired टैग।
Paired टैग का मतलब होता है की, एसे टैग जिनको इस्तेमाल करने के लिए उसको ओपन करने के बाद अंत में उसे क्लोज़ भी करना पड़ता है।
Unpaired टैग का मतलब होता है की, एसे टैग जिनको इस्तेमाल करने के लिए ओपन करने के बाद अंत में उसे क्लोज़ करने की कोई आवशक्यता नहीं है।
हम आगे इस एचटीएमएल(HTML) टैग के ट्यूटोरियल में ही समझेंगे की कोन सा टैग Paired है और कोन सा Unpaired।
All HTML Tags in Hindi
अब हम एचटीएमएल(HTML) के सभी टैग्स बारी बारी से देखेंगे, हर एक का क्या इस्तेमाल होता है वो समझेंगे।
HTML में कुल 132 से 142 टैग्स है, तो हम जो टैग्स सबसे ज्यादा इस्तेमाल में आते है वो पहले देखेंगे।
HTML के टैग्स की सूची,
- <html>
- <head>
- <title>
- <meta>
- <script>
- <link>
- <style>
- <body>
- <header>
- <nav>
- <div>
- <p>
- <span>
- <a>
- <img />
- <b> & <strong>
- <br />
- <hr />
- <i>
- <u>
- <h1> से <h6>
- <table>
- <thead>
- <tbody>
- <tfoot>
- <tr>
- <td>
- <th>
- <ul>
- <ol>
- <li>
- <form>
- <input>
- <button>
- <aside>
- <footer>
- <main>
- <article>
- <section>
अब हम ऊपर की एचटीएमएल(HTML) टैग सूची में से हर एक को बारी बारी समझेंगे।
<html>
<html> टैग किसी भी वेबपेज का सबसे महत्वपूर्ण टैग होता है, HTML डॉक्यूमेंट का पुरा कोड इस ही टैग के बीच में होता है, ये एक Paired टैग है।
उदाहरण:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text.</p>
</body>
</html><head>
<head> टैग में HTML डॉक्यूमेंट(वेबपेज) के संबंदित मेटा इनफार्मेशन कैसे की वेबपेज टाइटल, डिस्क्रिप्शन, भाषा, आदि होती है।
वेबपेज में इस्तेमाल होने वाली Stylesheet(CSS) और जावास्क्रिप्ट भी <head> टैग में लिंक होती है।
<head> टैग में रखा कंटेन्ट वेबपेज के यूजर को नहीं दिखाई देता ये सिर्फ वेब ब्राउजर, सर्च इंजन, सोशल मीडिया बोट, आदि के लिए होता है।
उदाहरण:
<head>
"कंटेन्ट"
</head><title>
<title> टैग से हम वेबपेज का टाइटल रख सकते है तो हमे वेब ब्राउजर के tab bar में दिखता है।
उदाहरण:
<title> HTML टैग ट्यूटोरियल | पूरी जानकारी हिन्दी में </title>
परिणाम:
<meta>
मेटा का मतलब होता है, किसी जानकारी के बारे में क्षुष्म जानकारी(Data about Data)।
<meta> टैग की मदद से हम वेबपेज की क्षुष्म जानकारी जैसे की वेबपेज का टाइटल, डिस्क्रिप्शन, रंग, आदि के बारे में वेब ब्राउजर को बताते है।
<meta> टैग में दी हुवी जानकारी बहुत उपयोगी होती है, क्यूंकी ये जानकारी SEO(Search Engine Optimization) में इस्तेमाल होती है जिससे गूगल, बिंग जैसे सर्च इंजन वेबपेज के बारे में समझ सके।
उदाहरण:
<meta name="dc.language" content="hi_IN" />
<script>
<script> टैग से हम वेबपेज में कोई भी एक्सटर्नल(External) जावास्क्रिप्ट ऐड कर के इस्तेमाल कर सकते है, किसके लिए जावास्क्रिप्ट का URL(लिंक) ऐड करना जरूर है।
इस टैग से हम इन्टर्नल(Internal) जावास्क्रिप्ट भी लिख सकते है।
उदाहरण:
<script src="एक्सटर्नल जावास्क्रिप्ट फाइल का अड्रेस ऐड करे"></script>
<script>
इन्टर्नल जावास्क्रिप्ट
</script><link>
<link> टैग से हम कोई भी CSS स्टाइल अपने HTML वेबपेज में इस्तेमाल कर सकते है।
उदाहरण:
<link rel="stylesheet" type="text/css" href="CSS फाइल का अड्रेस ऐड करे" />
<style>
<style> टैग से हम बिना किसी इक्स्टर्नल CSS फाइल को लिंक करे, अपने वेबपेज किए HTML के <head> टैग में ही इन्टर्नल CSS लिख सकते है।
उदाहरण:
<style>
body{
background-color: yellow;
}
</style><body>
<body> टैग में हम वो कंटेन्ट रखते है जिसके जिसके लिए यूजर हमारे वेबपेज पर आया है, इस टैग में सिर्फ काम की चीज़े ही रखनी चाहिए।
ज्यादातर किसी भी वेबपेज में सबसे ज्यादा कंटेन्ट और टैग्स <body> टैग में ही होता है।
उदाहरण:
<body> कंटेन्ट यहा ऐड होगा </body>
<header>
<header> टैग वेबपेज का शीर्ष होता है, जिसमे वेबपेज के अनुसार मेनु या कोई नेवीगेशन कंटेन्ट होता है, जिससे यूजर को वेबसाईट में घूमना आसान हो जाता है।
इस टैग के अंदर कुछ और स्पेशल टैग भी हो सकते है जैसे <nav> टैग।
उदाहरण:
<header>
"LOGO"
<nav>
"MENU"
</nav>
</header><nav> (Navigation)
जब हमें कोई एसी सूची प्रदान करनी हो जिसमे वेबसाईट के पेज की लिंक्स या कोई एसी जानकारी हो जिससे यूजर का वेबसाईट में घूमना आसान हो उसे हम <nav> टैग में, लिखते है।
<nav> टैग मतलब नेवीगेशन(Navigation) ही होता है, इसके इस्तेमाल करने से सर्च इंजन बोट्स को भी आसानी से पता चलता है की यहा से वो वेबसाईट के और भी पेज क्रॉल(इंडेक्स) कर सकता है।
उदाहरण:
<nav>
<ul>
<li>
<a href="/about-us">About Us</a>
</li>
<li>
<a href="/contact-us">Contact Us</a>
</li>
<li>
<a href="/categories">Categories</a>
</li>
</ul>
</nav> <div>
जब भी हम कोई वेबपेज बनाते है तो उसमे एक ही सेक्शन के अंदर बहुत सारे विभाग होते है, तो <div> टैग हमारे उस सभी विभागों को अलग अलग रखने का काम करता है।
<div> टैग का अलग से कोई खास इस्तेमाल नहीं है, इसलिए आप इसको अपने वेबपेज में कही भी इस्तेमाल कर सकते है। (सिवाय <head> टैग के अंदर)
उदाहरण:
<body>
<div>विभाग 1</div>
<div>विभाग 2</div>
<div>विभाग 3</div>
</body><p>
<p> टैग का इस्तेमाल अनुच्छेद(Paragraph) लिखने के लिए किया जाता, जिससे ये दूसरे सेक्शन से थोड़ा अलग लगे।
अगर आप आर्टिकल या ब्लॉग पोस्ट लिख रहे हो तो आपको अनुच्छेद लिखने के लिए <p> टैग इस्तेमाल करना जरूरी है।
उदाहरण:
<article>
<p>ईस हिन्दी ट्यूटोरियल में हम एचटीएमएल(HTML) टैग्स के बारे में समझ रहे है।</p>
</article><span>
जब हमे कोई टैग जैसे <div> टैग या <p> टैग में रखे पूरे कंटेन्ट में से सिर्फ कुछ छोटा से भाग को ही अलग डिजाइन करनी होती है , तब हम <span> टैग का इस्तेमाल करते है।
<span> टैग की खुद की कोई डिजाइन नहीं होती इससे आप उसको आसानी से अलग स्टाइल दे सकते है।
उदाहरण:
<div>
<p>अगर आपको कोई मदद चाहिए तो हमे <span style="color: red;">कमेन्ट सेक्शन</span> में बटाईए।</p>
</div><a> (Anchor Tag)
<a>(Anchor) टैग का इस्तेमाल वेबपेज में कोई टेक्स्ट(शब्द) को क्लिक करने लायक और यूजर को दूसरे पेज पर भेजने के लिए होता है।
जब यूजर anchor टैग वाले टेक्स्ट को क्लिक करता है तो वो दूसरे पेज पर रेडीरेक्ट होता है, जिसमे दूसरे पेज की लिंक देना भी जरूरी है।
उदाहरण:
<p> विज़िट करे <a href="https://w3hindi.in"> W3 Hindi </a></p>
<img /> (Image)
<img /> टैग का इस्तेमाल करके हम अपने HTML वेबपेज में इमेज ऐड कर सकते है।
इमेज ऐड करने के लिए आपके पास इमेज का सोर्स(URL) होना जरूरी है।
<img /> टैग एक सेल्फ क्लोज़िंग टैग है जिसको क्लोज़िंग टैग से बंध नहीं किया जाता।
उदाहरण:
<div>
<img src="http://w3hindi.in/wp-content/uploads/2022/12/W3-Hindi-logo.png"/>
</div><b> (Bold) & <strong>
<b> टैग से हम अपने वेबपेज के टेक्स्ट को सिर्फ बोल्ड(मोटा) और अलग दिखा सकते है।
उदाहरण:
<p>में एक <b>भारतीय</b> हूँ</p>
<i> (Italic)
<i> टैग का इस्तेमाल टेक्स्ट को इटैलिक फॉर्मैट में दिखने के लिए होता है।
उदाहरण:
<p>इटैलिक टेक्स्ट <i>टेड़ा</i> दिखता है</p>
<u> (Underline)
<u> टैग से हम टेक्स्ट के नीचे अन्डर्लाइन(_) कर सकते है जिससे वो टेक्स्ट थोड़ा हाइलाइट हो सकता है।
उदाहरण:
<p>u टैग से टेक्स्ट के नीचे <u>अन्डर्लाइन</u> दिखती है</p>
<br /> (Break Row)
<br /> टैग से आप HTML वेबपेज में कही भी लाइन को खत्म करके नई लाइन चालु कर सकते है।
उदाहरण:
<p> यहा से आगे के शब्द <br/> नई लाइन में आएंगे ।</p>
<hr /> (Horizontal Row)
<hr/> टैग की मदद से हम वेबपेज कही भी तेड़ी लाइन या डिवाइडर बना सकते है।
ऊदाहरण:
<p> यहा से आगे के शब्द </p> <hr/> <p> डिवाइडर के बाद आएंगे।</p>
<h1> से <h6> हेडिंग टैग्स
HTML वेबपेज में विषय के हिसाब से सभी विभाग को अपना एक शीर्षक(Heading) देना जरूरी है।
HTML में शीर्षक देने के लिए कुल 6 टैग्स(h1,h2,h3,h4,h5,h6) का इस्तेमाल शीर्षक के महत्व के हिसाब से होता है।
<h1> टैग वेबपेज में सबसे महत्वपूर्ण होता है, इसमे वेबपेज का प्रमुख शीर्षक होता है, पुरे वेबपेज में एक ही <h1> टैग होता है, फिर उसके अंदर <h2>, और <h2> के अंदर <h3> ऐसे करके <h6> तक हेडिंग टैग इस्तेमाल कर सकते है।
<h1> बहुत महत्वपूर्ण और <h6> सबसे कम महत्व वाले हेडिंग को दिया जाता है।
Heading टैग्स का इस्तेमाल करने से सर्च इंजन को और यूजर को आपके वेबपेज का ढ़ाचा(Structure) समझने में बहुत आसानी रहती है।
उदाहरण:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
परिणाम:
सारांश (Summary)
तो दोस्तों अभी तक हमने इस HTML टैग के टूटोरियाल में कुल 20-30 टैग्स के बारे में समझा है, जल्दी ही हमारी टीम बचे हुवे टैग्स के बारे में भी कंटेन्ट ऐड कर देंगी।
तो अगर आपको हमारा ये ब्लॉग पसंद आया हो, या इस ब्लॉग से संबंधित कोई सलाह या सुझाव हो तो आप हमें कमेन्ट सेक्शन में बता सकते है, धन्यवाद।
