इंटरनेट की इस डिजिटल दुनिया में, जब भी आप किसी वेबसाइट पर जाते हैं, तो आपको वहाँ सुंदर चित्र, रंगीन बटन और व्यवस्थित लेख दिखाई देते हैं। लेकिन क्या आपने कभी सोचा है कि ब्राउज़र को कैसे पता चलता है कि कौन सा टेक्स्ट हेडिंग है और कौन सा इमेज? इसका जवाब है— HTML Tags.
HTML (HyperText Markup Language) वेब डेवलपमेंट की नींव है, और टैग्स इसके सबसे महत्वपूर्ण घटक हैं। यदि आप एक वेब डेवलपर बनना चाहते हैं, तो HTML टैग्स और उसके वर्गीकरण (Classification) को सही और तकनीकी रूप से सटीक (technically accurate) तरीके से समझना आपके लिए अनिवार्य है। इस लेख में हम बेसिक से लेकर एडवांस तक, HTML टैग्स के हर पहलू पर step-by-step चर्चा करेंगे।
HTML Tags क्या हैं?
HTML Tags markup का वह हिस्सा होते हैं जो ब्राउज़र को यह निर्देश देते हैं कि content को किस तरह structure करना है और screen पर कैसे प्रदर्शित करना है। ये Angle Brackets ( < > ) के भीतर लिखे जाते हैं।
HTML Tag की संरचना (Structure of a Tag)
एक सामान्य HTML Tag तीन हिस्सों से मिलकर बनता है:
1. Opening Tag
इसे Start Tag भी कहा जाता है। इसका मुख्य काम ब्राउज़र को यह बताना है कि एक विशेष प्रकार का content यहाँ से शुरू होने वाला है।
उदाहरण: <h1> (इसका मतलब है कि यहाँ से मुख्य heading शुरू हो रही है)।
2. Content
यह वह हिस्सा है जो वास्तव में वेबसाइट पर visitor को दिखाई देता है। यह text, image, video या कोई अन्य tag भी हो सकता है।
3. Closing Tag
इसे End Tag भी कहते हैं। यह ब्राउज़र को बताता है कि उस विशेष tag का प्रभाव अब समाप्त हो गया है।
उदाहरण: </h1> (इसका मतलब है कि heading अब खत्म हो गई है)।
HTML Element क्या है? (What is an HTML Element?)
अक्सर beginners Tag और Element को एक ही समझ लेते हैं, लेकिन technically इनमें अंतर है। HTML Tag सिर्फ markup का एक हिस्सा है, जबकि HTML Element में Opening Tag, Content और Closing Tag — तीनों मिलकर शामिल होते हैं।
उदाहरण के लिए:
<p>Hello</p>
- <p> = Opening Tag
- Hello = Content
- </p> = Closing Tag
- <p>Hello</p> पूरा मिलकर = HTML Element
नोट: Void Elements (जैसे <br>) को भी Element ही कहा जाता है, भले ही उनमें content या separate closing tag न हो।
HTML Tags का Classification
HTML में सैकड़ों tags मौजूद हैं। पढ़ाई की सुविधा के लिए हम इन्हें चार प्रमुख आधारों पर बाँटते हैं:
(A) Structure के आधार पर (Based on Structure)
Structure के आधार पर हम यह देखते हैं कि tag को बंद करना जरूरी है या नहीं।
1. Paired Tags (Container Tags)
Paired Tags वे HTML tags होते हैं जो हमेशा जोड़ों (Pairs) में आते हैं। इनमें एक Opening Tag और एक Closing Tag होता है। Opening Tag से content की शुरुआत होती है, जबकि Closing Tag (जिसमें / लगाया जाता है) उस content को समाप्त करता है।
इन्हें Container Tags भी कहा जाता है, क्योंकि इनके अंदर text, image, link या अन्य HTML tags रखे जा सकते हैं।
Syntax:
<tagname> Content </tagname>
उदाहरण:
<h1>...</h1>(मुख्य heading के लिए)<p>...</p>(paragraph के लिए)<div>...</div>(section बनाने के लिए)
2. Unpaired Tags (Void Elements)
HTML में कुछ tags ऐसे होते हैं जिन्हें बंद (Close) करने की आवश्यकता नहीं होती। technically इन्हें Void Elements कहा जाता है (इन्हें Empty Tags या Unpaired Tags भी कहते हैं)। जैसा कि नाम से स्पष्ट है, ये tags अकेले ही अपना कार्य पूरा कर लेते हैं। इनके बीच कोई text content नहीं लिखा जाता, इसलिए इनका अलग से closing tag नहीं होता।
नोट: HTML5 में Void Elements को closing slash ( / ) के साथ लिखना आवश्यक नहीं है। यानी <br> और <br /> दोनों ही मान्य (valid) हैं, लेकिन आधुनिक HTML में सामान्यतः <br> लिखने की सलाह दी जाती है।
उदाहरण:
- <br>: लाइन बदलने (Line Break) के लिए।
- <hr>: horizontal line खींचने के लिए।
- <img>: image प्रदर्शित करने के लिए।
- <input>: user input box के लिए।
🔎 Quick Comparison — Paired vs Void Elements
| आधार | Paired Tags | Void Elements |
|---|---|---|
| Closing Tag | होता है | नहीं होता |
| Content रखना | संभव है | संभव नहीं |
| दूसरा नाम | Container Tag | Empty / Void Element |
| उदाहरण | <p>...</p> | <br>, <img> |
(B) Display के आधार पर (Based on Display Behavior)
जब हम CSS का उपयोग करके वेबसाइट का layout बनाते हैं, तो default display behavior समझना बहुत जरूरी हो जाता है।
1. Block-Level Elements
Block-level elements सामान्यतः एक नई लाइन से शुरू होते हैं और उपलब्ध container की पूरी चौड़ाई (Full Width) तक फैल सकते हैं। यह इनका default display behavior है — CSS की display property का उपयोग करके इस व्यवहार को बदला भी जा सकता है (जैसे किसी div को inline-block बनाना)।
उदाहरण:
यदि आप एक <div> के बाद दूसरा <div> लिखेंगे, तो default रूप से वह उसके नीचे आएगा, बगल में नहीं।
<div>पहला बॉक्स</div>
<div>दूसरा बॉक्स</div>
प्रमुख Block-Level Elements:
- <h1> से <h6>
- <p> (paragraph)
- <ul>, <ol>, <li> (lists)
- <header>, <footer>, <section>, <div>
2. Inline Elements
Inline elements default रूप से केवल उतनी ही जगह घेरते हैं, जितनी उनके content के लिए आवश्यक है। ये नई लाइन नहीं तोड़ते और एक ही लाइन में साथ-साथ आ सकते हैं। यह भी इनका default behavior है — CSS display property से इसे बदला जा सकता है।
उदाहरण:
यदि आप एक paragraph के अंदर कई <span> या <a> tags लिखते हैं, तो वे एक ही लाइन में क्रम से दिखाई देंगे।
<p>यह एक <span>महत्वपूर्ण</span> शब्द है और <a href="#">यह एक लिंक है</a>.</p>
प्रमुख Inline Elements:
- <a> (hyperlink)
- <span> (styling के लिए छोटा हिस्सा)
- <img> (photo)
- <strong>, <em> (text formatting)
🔎 Quick Comparison — Block vs Inline
| आधार | Block-Level | Inline |
|---|---|---|
| Line Behavior | सामान्यतः नई लाइन से शुरू | उसी लाइन में रह सकता है |
| Width | उपलब्ध width तक फैल सकता है | Content के अनुसार space लेता है |
| उदाहरण | <div>, <p> | <span>, <a> |
(C) Semantic बनाम Non-Semantic Elements
HTML5 के आने के बाद वेबसाइट की संरचना पहले से अधिक स्पष्ट और व्यवस्थित हो गई। Semantic Elements पेज की संरचना को साफ बनाते हैं और accessibility (जैसे screen readers) तथा search engines को content समझने में सहायता कर सकते हैं।
1. Semantic Elements
Semantic का अर्थ है, जिसका अपना कोई अर्थ हो। ये tags ब्राउज़र और assistive technologies को बताते हैं कि पेज का वह विशेष हिस्सा क्या भूमिका निभा रहा है।
महत्व:
Semantic HTML content की संरचना को स्पष्ट बनाता है, जिससे accessibility बेहतर होती है और search engines पेज के मुख्य हिस्सों (जैसे navigation, मुख्य content, footer) को आसानी से पहचान सकते हैं। ध्यान रहे — इसका मतलब यह नहीं कि किसी एक tag का उपयोग करने मात्र से आपकी ranking अपने-आप बढ़ जाएगी; यह overall structure और accessibility में मदद करता है।
प्रमुख Elements और उनके कार्य:
- <header>: साइट का logo और menu रखने के लिए।
- <nav>: navigation links के लिए।
- <article>: एक स्वतंत्र blog post या news item।
- <aside>: sidebar की जानकारी के लिए।
- <footer>: copyright और contact जानकारी के लिए।
- <main>: यह पेज के मुख्य content को दर्शाता है। एक पेज में सामान्यतः केवल एक <main> होना चाहिए।
2. Non-Semantic Elements
ये elements content के बारे में कोई जानकारी नहीं देते। ये सिर्फ एक खाली container की तरह होते हैं, जिन्हें हम CSS के जरिए design करते हैं।
प्रमुख Tags:
<div>और<span>
(D) Function के आधार पर (Based on Functionality)
उपयोग के आधार पर हम tags को उनके कार्यों के अनुसार समूहों में विभाजित करते हैं:
1. Root & Metadata Tags
ये tags document की तकनीकी जानकारी (metadata) देते हैं।
- <html>: यह पूरे document का root है।
- <head>: इसमें metadata, title और CSS links होते हैं।
- <title>: यह ब्राउज़र के ऊपर tab में नाम दिखाता है।
- <meta>: यह document की metadata जैसे character encoding, viewport, और page description जैसी जानकारी देने के लिए उपयोग होता है।
<meta name="description" content="HTML Tags की पूरी जानकारी हिंदी में">
2. Text Formatting Tags
लेख को सुंदर और पढ़ने में आसान बनाने के लिए इन tags का उपयोग किया जाता है:
- <b>: text को केवल visually bold करता है, बिना किसी अतिरिक्त अर्थ के।
- <strong>: text की semantic importance दर्शाता है, और सामान्यतः यह bold भी दिखाई देता है।
- <i>: text को केवल visually italic (तिरछा) करता है।
- <em>: text पर emphasis (जोर) दर्शाता है, और सामान्यतः italic दिखाई देता है।
- <u>: text के नीचे underline लाता है।
- <mark>: text को highlight करता है।
- <small>: text का आकार छोटा करता है।
3. List Tags
जानकारी को बिंदुओं (Points) में व्यवस्थित करने के लिए:
- <ul> (Unordered List): bullets के लिए।
- <ol> (Ordered List): numbering (1, 2, 3) के लिए।
- <li> (List Item): list के प्रत्येक बिंदु के लिए।
4. Table Tags
Data को rows और columns में दिखाने के लिए:
- <table>: table की शुरुआत।
- <tr>: table row।
- <td>: table data (cell)।
- <th>: table heading।
5. Media & Form Tags
- <img>: image insert करने के लिए। (Attribute: src, alt)
- <audio> & <video>: multimedia चलाने के लिए।
- <form>: user data collect करने के लिए।
- <input>: जहाँ user type करता है।
- <button>: submit करने के लिए।
HTML Tags का उपयोग करते समय ध्यान रखने योग्य बातें (Best Practices)
एक professional developer बनने के लिए इन नियमों का पालन करें:
- Nest Properly: tags को सही क्रम में बंद करें। जो tag सबसे बाद में खुला है, वह सबसे पहले बंद होना चाहिए।
- Lowercase: हमेशा tags को छोटे अक्षरों (lowercase) में लिखें। हालाँकि HTML case-insensitive है, लेकिन lowercase ही standard माना जाता है।
- Alt Attribute: image tag में alt attribute जरूर लिखें। यह screen readers इस्तेमाल करने वाले users और accessibility के लिए जरूरी है।
- Semantic Tags First: सजावट के लिए
<div>के बजाय सही semantic tag (जैसे<nav>या<article>) का चुनाव करें।
📌 HTML सीखने के लिए यह भी पढ़ें
▸ HTML Basic Page Structure क्या है? – HTML पेज की संरचना को विस्तार से समझें▸ HTML Editor, Web Browser और File Extension क्या हैं? – पूरी गाइड हिंदी में
HTML Tags - Exam Oriented FAQs
<br> या <img>) को बंद करने की आवश्यकता नहीं होती है।
display property से यह default behavior बदला भी जा सकता है।
<b> केवल visual styling के लिए उपयोग होता है, बिना किसी अतिरिक्त अर्थ के। यही अंतर <i> और <em> के बीच भी होता है।
<br> का उपयोग line break (नई लाइन शुरू करने) के लिए होता है, जबकि <hr> का उपयोग content के बीच एक horizontal line दिखाने के लिए किया जाता है। दोनों ही Void Elements हैं।
उदाहरण:
<center>: अब इसकी जगह CSS कीtext-align: center;का उपयोग होता है।<font>: इसकी जगह अब CSSfont-familyऔरcolorproperties का उपयोग होता है।