इंटरनेट की इस डिजिटल दुनिया में, जब भी आप किसी वेबसाइट पर जाते हैं, तो आपको वहाँ सुंदर चित्र, रंगीन बटन और व्यवस्थित लेख दिखाई देते हैं। लेकिन क्या आपने कभी सोचा है कि ब्राउज़र को कैसे पता चलता है कि कौन सा टेक्स्ट हेडिंग है और कौन सा इमेज? इसका जवाब है— HTML Tags.
HTML (HyperText Markup Language) वेब डेवलपमेंट की नींव है, और टैग्स इसके सबसे महत्वपूर्ण घटक हैं। यदि आप एक वेब डेवलपर बनना चाहते हैं, तो HTML टैग्स और उसके वर्गीकरण (Classification) को समझना आपके लिए अनिवार्य है। इस लेख में हम बेसिक से लेकर एडवांस तक, HTML टैग्स के हर पहलू पर चर्चा करेंगे।
HTML टैग्स क्या हैं? (Understanding HTML Tags)
HTML टैग्स विशेष प्रकार के कोड होते हैं जो वेब ब्राउज़र को निर्देश देते हैं कि कंटेंट को स्क्रीन पर कैसे प्रदर्शित करना है। ये टैग्स Angle Brackets ( < > ) के भीतर लिखे जाते हैं।
टैग की संरचना (Structure of a Tag)
एक सामान्य HTML टैग तीन हिस्सों से मिलकर बनता है:
1. Opening Tag
इसे Start Tag भी कहा जाता है। इसका मुख्य काम ब्राउज़र को यह बताना है कि एक विशेष प्रकार का कंटेंट यहाँ से शुरू होने वाला है।
उदाहरण: <h1> (इसका मतलब है कि यहाँ से मुख्य हेडिंग शुरू हो रही है)।
2. Content
यह वह हिस्सा है जो वास्तव में वेबसाइट पर विज़िटर को दिखाई देता है। यह टेक्स्ट, इमेज, वीडियो या कोई अन्य टैग भी हो सकता है।
3. Closing Tag
इसे End Tag भी कहते हैं। यह ब्राउज़र को बताता है कि उस विशेष टैग का प्रभाव अब समाप्त हो गया है।
उदाहरण: </h1> (इसका मतलब है कि हेडिंग अब खत्म हो गई है)।
HTML टैग का वर्गीकरण (Classification of HTML Tags)
HTML में सैकड़ों टैग्स मौजूद हैं। अध्ययन की सुविधा के लिए हम इसे चार प्रमुख आधारों पर वर्गीकृत करते हैं:
(A) संरचना के आधार पर (Based on Structure)
संरचना के आधार पर हम यह देखते हैं कि टैग को बंद करना जरूरी है या नहीं।
1. Paired Tags (Container Tags)
Paired Tags वे HTML टैग होते हैं जो हमेशा जोड़ों (Pairs) में आते हैं। इनमें एक Opening Tag और एक Closing Tag होता है। Opening Tag से कंटेंट की शुरुआत होती है, जबकि Closing Tag (जिसमें / लगाया जाता है) उस कंटेंट को समाप्त करता है।
इन्हें Container Tags भी कहा जाता है, क्योंकि इनके अंदर टेक्स्ट, इमेज, लिंक या अन्य HTML टैग्स रखे जा सकते हैं।
Syntax:
<tagname> Content </tagname>
उदाहरण:
<h1>...</h1>(मुख्य हेडिंग के लिए)<p>...</p>(पैराग्राफ के लिए)<div>...</div>(सेक्शन बनाने के लिए)
2. Unpaired Tags (Empty/Self-Closing Tags)
HTML में कुछ टैग ऐसे होते हैं जिन्हें बंद (Close) करने की आवश्यकता नहीं होती। इन्हें Unpaired Tags, Empty Tags या Self-Closing Tags कहा जाता है। जैसा कि नाम से स्पष्ट है, ये टैग अकेले ही अपना कार्य पूरा कर लेते हैं। इनके बीच कोई टेक्स्ट कंटेंट नहीं लिखा जाता, इसलिए इनका अलग से क्लोजिंग टैग नहीं होता। आधुनिक HTML5 में इन्हें क्लोजिंग स्लैश (/) के बिना भी लिखा जा सकता है।
उदाहरण:
- <br>: लाइन बदलने (Line Break) के लिए।
- <hr>: हॉरिजॉन्टल लाइन खींचने के लिए।
- <img>: इमेज प्रदर्शित करने के लिए।
- <input>: यूजर इनपुट बॉक्स के लिए।
(B) डिस्प्ले के आधार पर (Based on Display Behavior)
जब हम CSS का उपयोग करके वेबसाइट का लेआउट बनाते हैं, तो डिस्प्ले बिहेवियर सबसे महत्वपूर्ण भूमिका निभाता है।
1. Block-Level Tags
ब्लॉक-लेवल टैग वे होते हैं जो ब्राउज़र की पूरी उपलब्ध चौड़ाई (Full Width) को कवर कर लेते हैं। ये हमेशा एक नई लाइन से शुरू होते हैं।
उदाहरण:
यदि आप एक <div> के बाद दूसरा <div> लिखेंगे, तो वह उसके नीचे आएगा, बगल में नहीं।
<div>पहला बॉक्स</div>
<div>दूसरा बॉक्स</div>
प्रमुख Block-Level Tags:
- <h1> से <h6>
- <p> (पैराग्राफ)
- <ul>, <ol>, <li> (लिस्ट्स)
- <header>, <footer>, <section>
2. Inline Tags
इनलाइन टैग केवल उतनी ही जगह घेरते हैं, जितनी उनके कंटेंट के लिए आवश्यक है। ये लाइन नहीं तोड़ते और एक ही लाइन में साथ-साथ आ सकते हैं।
उदाहरण:
यदि आप एक पैराग्राफ के अंदर कई <span> या <a> टैग लिखते हैं, तो वे एक ही लाइन में क्रम से दिखाई देंगे।
<p>यह एक <span>महत्वपूर्ण</span> शब्द है और <a href="#">यह एक लिंक है</a>.</p>
प्रमुख Inline Tags:
- <a> (हाइपरलिंक)
- <span> (स्टाइलिंग के लिए छोटा हिस्सा)
- <img> (फोटो)
- <strong>, <em> (टेक्स्ट फॉर्मेटिंग)
(C) सिमेंटिक बनाम नॉन-सिमेंटिक टैग्स (Semantic vs Non-Semantic)
HTML5 के आने के बाद वेबसाइट की संरचना पहले से अधिक स्पष्ट और व्यवस्थित हो गई। खासकर SEO के दृष्टिकोण से Semantic Tags का महत्व बहुत बढ़ गया है। अब सर्च इंजन जैसे Google केवल टेक्स्ट ही नहीं पढ़ते, बल्कि यह भी समझते हैं कि पेज का कौन-सा भाग क्या भूमिका निभा रहा है।
1. Semantic Tags
सिमेंटिक का अर्थ है, जिसका अपना कोई अर्थ हो। ये टैग ब्राउज़र और सर्च इंजन को बताते हैं कि पेज का वह विशेष हिस्सा क्या काम कर रहा है।
महत्व:
यह SEO के लिए बहुत महत्वपूर्ण है। Google इन टैग्स को पढ़कर समझ जाता है कि आपकी वेबसाइट का मुख्य कंटेंट कहाँ है।
प्रमुख टैग्स और उनके कार्य:
- <header>: साइट का लोगो और मेनू रखने के लिए।
- <nav>: नेविगेशन लिंक्स के लिए।
- <article>: एक स्वतंत्र ब्लॉग पोस्ट या खबर।
- <aside>: साइडबार की जानकारी के लिए।
- <footer>: कॉपीराइट और संपर्क जानकारी के लिए।
- <main>: यह पेज के मुख्य कंटेंट को दर्शाता है। एक पेज में सामान्यतः केवल एक <main> होना चाहिए।
2. Non-Semantic Tags
ये टैग कंटेंट के बारे में कोई जानकारी नहीं देते। ये सिर्फ एक खाली कंटेनर की तरह होते हैं, जिन्हें हम CSS के जरिए डिजाइन करते हैं।
प्रमुख टैग्स:
<div>और<span>
(D) उपयोगिता के आधार पर (Based on Functionality)
उपयोग के आधार पर हम टैग्स को उनके कार्यों के अनुसार समूहों में विभाजित करते हैं:
1. Root & Metadata Tags
ये टैग्स ब्राउज़र को पेज की तकनीकी जानकारी देते हैं।
- <html>: यह पूरे डॉक्यूमेंट का मूल (Root) है।
- <head>: इसमें मेटाडेटा, टाइटल और CSS लिंक्स होते हैं।
- <title>: यह ब्राउज़र के ऊपर टैब में नाम दिखाता है।
- <meta>: यह सर्च इंजन के लिए डिस्क्रिप्शन और कीवर्ड्स स्टोर करता है।
2. Text Formatting Tags
लेख को सुंदर और पढ़ने में आसान बनाने के लिए इन टैग्स का उपयोग किया जाता है:
- <b>: टेक्स्ट को बोल्ड (गहरा) करता है।
- <strong>: टेक्स्ट को महत्वपूर्ण और बोल्ड दिखाता है (SEO के लिए)।
- <i>: टेक्स्ट को इटैलिक (तिरछा) करता है।
- <u>: टेक्स्ट के नीचे अंडरलाइन लाता है।
- <mark>: टेक्स्ट को हाईलाइट करता है।
- <small>: टेक्स्ट का आकार छोटा करता है।
3. List Tags
जानकारी को बिंदुओं (Points) में व्यवस्थित करने के लिए:
- <ul> (Unordered List): बुलेट्स के लिए।
- <ol> (Ordered List): नंबरिंग (1, 2, 3) के लिए।
- <li> (List Item): लिस्ट के प्रत्येक बिंदु के लिए।
4. Table Tags
डेटा को पंक्तियों (Rows) और स्तंभों (Columns) में दिखाने के लिए:
- <table>: टेबल की शुरुआत।
- <tr>: टेबल रो (Row)।
- <td>: टेबल डेटा (Cell)।
- <th>: टेबल हेडिंग।
5. Media & Form Tags
- <img>: इमेज इंसर्ट करने के लिए। (Attribute: src, alt)
- <audio> & <video>: मल्टीमीडिया चलाने के लिए।
- <form>: यूजर डेटा कलेक्ट करने के लिए।
- <input>: जहाँ यूजर टाइप करता है।
- <button>: सबमिट करने के लिए।
HTML टैग्स का उपयोग करते समय ध्यान रखने योग्य बातें (Best Practices)
एक प्रोफेशनल डेवलपर बनने के लिए इन नियमों का पालन करें:
- Nest Properly: टैग्स को सही क्रम में बंद करें। जो टैग सबसे बाद में खुला है, वह सबसे पहले बंद होना चाहिए।
- Lowercase: हमेशा टैग्स को छोटे अक्षरों (lowercase) में लिखें। हालाँकि HTML case-insensitive है, लेकिन lowercase ही मानक (Standard) है।
- Alt Attribute: इमेज टैग में alt एट्रिब्यूट जरूर लिखें। यह आँखों से न देख पाने वाले लोगों और SEO के लिए जरूरी है।
-
Semantic Tags First: सजावट के लिए
<div>के बजाय सही सिमेंटिक टैग (जैसे<nav>या<article>) का चुनाव करें।
📌 HTML सीखने के लिए यह भी पढ़ें
▸ HTML Basic Page Structure क्या है? – HTML पेज की संरचना को विस्तार से समझें▸ HTML Editor, Web Browser और File Extension क्या हैं? – पूरी गाइड हिंदी में
HTML Tags - Exam Oriented FAQs
<br> या <img>) को बंद करने की आवश्यकता नहीं होती है।
<i> और <em> के बीच भी होता है।
उदाहरण:
<center>: अब इसकी जगह CSS कीtext-align: center;का उपयोग होता है।<font>: इसकी जगह अब CSSfont-familyऔरcolorका उपयोग होता है।
