126 HTML टैग की संदर्भ सूची
हर टैग क्या करता है, बंद टैग चाहिए या नहीं, और कौन-से विशेषण असल में काम आते हैं — एक-एक पंक्ति में।
दस्तावेज़ ढाँचा5
हर दस्तावेज़ का ढाँचा — क्रम और स्थान तय।
<html>पूरे दस्तावेज़ को घेरने वाला मूल तत्व; इसका lang विशेषण भाषा बताता है।<head>दस्तावेज़ की वह जानकारी रखता है जो दिखती नहीं — शीर्षक, मेटा, स्टाइल।<body>पाठक को जो कुछ दिखता है, वह सब इसी के भीतर आता है।<title>ब्राउज़र टैब और खोज परिणामों में दिखने वाला दस्तावेज़ शीर्षक।<base>दस्तावेज़ के सापेक्ष लिंक जिस आधार URL से हल होते हैं, वह तय करता है।
खंड17
पन्ने को अर्थपूर्ण खंडों में बाँटता है; खोज इंजन और स्क्रीन रीडर इसी संरचना का अनुसरण करते हैं।
<header>किसी खंड का प्रारंभिक भाग — शीर्षक, लोगो, नेविगेशन।<nav>मुख्य नेविगेशन लिंक का समूह — हर लिंक-समूह नहीं, सिर्फ़ राह दिखाने वाले।<main>दस्तावेज़ की मुख्य सामग्री — हर पन्ने पर एक, हेडर और फुटर के बिना।<section>शीर्षक वाला विषयगत समूह — कोई सामान्य डिब्बा नहीं।<article>ऐसी सामग्री जो अकेले भी अर्थपूर्ण रहे — लेख, पोस्ट, टिप्पणी।<aside>मुख्य पाठ के किनारे की सामग्री — हटा दें तो भी मूल पाठ पढ़ा जाता है।<footer>किसी खंड का अंतिम भाग — कॉपीराइट, संपर्क, संबंधित लिंक।<div>बिना अर्थ का डिब्बा — तभी इस्तेमाल करें जब कोई और तत्व फ़िट न बैठे।<h1>पन्ने का सर्वोच्च शीर्षक — नियमतः हर दस्तावेज़ में एक।<h2>h1 से एक स्तर नीचे का शीर्षक — पन्ने को बड़े हिस्सों में बाँटने के लिए।<h3>h2 के भीतर के हिस्से को और बाँटने वाला शीर्षक।<h4>चौथे स्तर का शीर्षक — इतनी गहराई अक्सर संरचना पर पुनर्विचार का संकेत है।<h5>पाँचवें स्तर का शीर्षक — व्यवहार में शायद ही ज़रूरत पड़ती है।<h6>छठा और सबसे छोटा शीर्षक स्तर।<hgroup>शीर्षक और उसके उपशीर्षक को एक साथ बाँधता है।<address>लेख या दस्तावेज़ के संपर्क विवरण — कोई भी डाक पता नहीं।<search>खोज के लिए बने नियंत्रणों का समूह दर्शाता है — मानक में अपेक्षाकृत नया।
पाठ खंड7
ब्लॉक की तरह बहने वाला पाठ — अनुच्छेद, उद्धरण, कोड सूची।
<p>एक अनुच्छेद। बंद टैग छोड़ देने पर ब्राउज़र स्वयं बंद कर देता है।<br>एक पंक्ति विराम — अनुच्छेदों के बीच जगह बनाने का साधन नहीं।<hr>विषय बदलने का संकेत — यह महज़ सजावटी रेखा नहीं है।<pre>पाठ जैसा लिखा है वैसा दिखाता है — स्पेस और लाइन ब्रेक बने रहते हैं।<blockquote>कहीं और से लिया गया लंबा उद्धरण; स्रोत URL cite विशेषण में लिखें।<figure>पाठ से संदर्भित स्वतंत्र चित्र या कोड-खंड; हटाकर रखने पर भी अर्थ बना रहता है।<figcaption>figure की व्याख्या — उसके भीतर पहले या अंतिम बच्चे के रूप में।
पंक्ति-अंतर्गत चिह्न30
नई पंक्ति शुरू किए बिना पंक्ति के हिस्से को चिह्नित करता है।
<a>कहीं और ले जाने वाला लिंक; href न हो तो यह लिंक नहीं, महज़ स्थानधारक है।<span>पंक्ति के भीतर बिना अर्थ का डिब्बा — किसी हिस्से को अलग रूप देने के लिए।<strong>महत्वपूर्ण होने का अर्थ देता है; मोटा दिखना केवल परिणाम है।<em>वह हिस्सा जिसे पढ़ते समय ज़ोर देंगे; तिरछापन उसकी प्रस्तुति भर है।<b>बिना महत्व जताए ध्यान खींचता है — महत्व हो तो strong लें।<i>भिन्न स्वर का पाठ — विदेशी शब्द, वैज्ञानिक नाम, मन की बात।<u>ऐसा पाठ रेखांकित करता है जिसे ग़ैर-पाठ्य टिप्पणी चाहिए, जैसे वर्तनी की त्रुटि।<s>अब सही न रही सामग्री पर काट देता है; संपादन इतिहास के लिए del लें।<mark>पाठक के लिए महत्वपूर्ण हिस्से को हाइलाइटर की तरह चिह्नित करता है।<small>किनारे की छोटी लिखावट — अस्वीकरण, कॉपीराइट पंक्तियाँ।<sub>निचला अंक — जैसे H₂O का 2।<sup>ऊपरी अंक — घात और पादटिप्पणी संकेतों के लिए।<code>कोड का एक अंश — आमतौर पर मोनोस्पेस फ़ॉन्ट में।<kbd>उपयोगकर्ता द्वारा दबाई जाने वाली कुंजी — जैसे Ctrl या Enter।<samp>किसी प्रोग्राम द्वारा दिया गया आउटपुट।<var>सूत्र या कोड में किसी चर का नाम।<q>पंक्ति के भीतर छोटा उद्धरण; उद्धरण चिह्न ब्राउज़र लगाता है।<cite>किसी कृति का शीर्षक बताता है — व्यक्ति का नाम नहीं।<abbr>संक्षिप्त रूप; पूरा रूप title विशेषण में लिखें।<time>तिथि या समय; मशीन-पठनीय रूप datetime विशेषण में रहता है।<data>दिखने वाले मान के साथ मशीन-पठनीय मान जोड़ता है।<dfn>उस स्थान पर परिभाषित हो रहे शब्द को चिह्नित करता है।<bdi>ऐसा पाठ अलग रखता है जिसकी दिशा आसपास की पंक्ति बिगाड़ सकती है।<bdo>पाठ की दिशा ज़बरन बदलता है; dir विशेषण अनिवार्य है।<ruby>रूबी टिप्पणी — अक्षरों के ऊपर उच्चारण, rt के साथ।<rt>ruby के भीतर उच्चारण स्वयं यहाँ आता है।<rp>उन ब्राउज़रों के लिए वैकल्पिक कोष्ठक जो ruby नहीं दिखा पाते।<wbr>बताता है कि यहाँ पंक्ति टूट सकती है — लंबे URL में उपयोगी।<ins>बाद में जोड़ी गई सामग्री — जब दस्तावेज़ संपादन इतिहास दिखाता है।<del>हटाई गई सामग्री; ins के साथ मिलकर संपादन इतिहास दिखाती है।
सूचियाँ7
क्रमित और अक्रमित सूचियाँ, साथ ही शब्द-परिभाषा सूचियाँ।
<ul>बिना क्रम की सूची — क्रम बदलने से अर्थ नहीं बदलता।<ol>क्रमित सूची; start पहली संख्या तय करता है और reversed उल्टा गिनता है।<li>सूची का एक आइटम; ul या ol के भीतर ही आता है।<dl>शब्दों और उनके विवरण को जोड़ने वाली सूची।<dt>dl के भीतर वर्णित किया जा रहा शब्द।<dd>dt के बाद आने वाला विवरण; एक शब्द के कई हो सकते हैं।<menu>आदेशों या औज़ारों की सूची; आज यह ul जैसा ही व्यवहार करता है।
तालिकाएँ10
पंक्तियों और स्तंभों में डेटा — लेआउट का साधन नहीं।
<table>पंक्तियों और स्तंभों में सजा डेटा रखता है — यह लेआउट का साधन नहीं।<thead>तालिका की शीर्ष पंक्तियाँ; छपाई में हर पन्ने पर दोहराई जाती हैं।<tbody>तालिका की मुख्य पंक्तियाँ; न लिखने पर भी ब्राउज़र जोड़ देता है।<tfoot>तालिका के नीचे की सारांश पंक्तियाँ, जैसे योग।<tr>तालिका की एक पंक्ति, जिसमें th या td कोशिकाएँ होती हैं।<th>शीर्ष कोशिका; scope बताता है कि यह पंक्ति की है या स्तंभ की।<td>डेटा कोशिका; colspan और rowspan इसे स्तंभों या पंक्तियों में मिलाते हैं।<caption>पूरी तालिका का शीर्षक — table का पहला बच्चा।<colgroup>कई स्तंभों को समूह मानता है — स्तंभ-स्तरीय स्टाइल के लिए उपयोगी।<col>colgroup के भीतर एक स्तंभ को इंगित करता है — या span जितने।
फ़ॉर्म14
ऐसे नियंत्रण जो मान लेकर भेजते हैं।
<form>भेजने के लिए इनपुट का समूह; action गंतव्य और method तरीक़ा बताता है।<input>एक इनपुट नियंत्रण; type विशेषण इसे टेक्स्ट, संख्या, तिथि, रंग या फ़ाइल बनाता है।<textarea>बहु-पंक्ति टेक्स्ट बॉक्स; डिफ़ॉल्ट पाठ टैग के बीच लिखा जाता है।<button>दबाने वाला बटन; फ़ॉर्म में type न देने पर यह सबमिट बटन बन जाता है।<select>एक मान चुनने की सूची; multiple देने पर कई भी चुने जा सकते हैं।<option>select के भीतर एक विकल्प।<optgroup>विकल्पों को नामित समूह में बाँटता है।<label>इनपुट का लेबल; for से जोड़ने पर पाठ पर क्लिक करने से फ़ील्ड चुन जाता है।<fieldset>संबंधित नियंत्रणों को घेरता है; disabled सबको एक साथ बंद कर देता है।<legend>fieldset का शीर्षक — उसका पहला बच्चा।<datalist>इनपुट के लिए सुझाव; उपयोगकर्ता कुछ और भी टाइप कर सकता है।<output>गणना का परिणाम रखता है; for बताता है कि यह किन फ़ील्ड से आया।<progress>दिखाता है कि कोई काम कितना बढ़ा — प्रगति पट्टी।<meter>ज्ञात परिसर में कोई मान दिखाता है — प्रगति के लिए नहीं।
मीडिया10
चित्र, ऑडियो, वीडियो और चित्र बनाने के पटल।
<img>एक चित्र; alt में वह लिखें जो चित्र बताता है।<picture>स्क्रीन आकार या फ़ॉर्मैट के अनुसार अलग चित्र चुनने देता है।<source>picture, video या audio के भीतर एक विकल्प फ़ाइल।<video>वीडियो चलाता है; autoplay आमतौर पर muted के साथ ही काम करता है।<audio>ध्वनि चलाता है; controls न हो तो स्क्रीन पर कुछ नहीं दिखता।<track>मीडिया में उपशीर्षक या विवरण जोड़ता है — WebVTT फ़ाइल की ओर संकेत।<canvas>स्क्रिप्ट से चित्र बनाने का खाली पटल; बनाया गया पाठ नहीं होता।<svg>दस्तावेज़ में सीधे वेक्टर चित्र बनाता है; हर आकार पर साफ़ रहता है।<map>चित्र पर क्लिक करने योग्य क्षेत्र लगाता है — area के साथ।<area>map के भीतर एक क्लिक-योग्य क्षेत्र — आकार और निर्देशांक से तय।
एम्बेड4
किसी और दस्तावेज़ या संसाधन को इसमें रखता है।
स्क्रिप्ट और स्टाइल5
दस्तावेज़ को व्यवहार और रूप देता है।
<script>जावास्क्रिप्ट लोड करता या रखता है; defer इसे दस्तावेज़ पढ़े जाने के बाद चलाता है।<noscript>सामग्री जो केवल तब दिखती है जब स्क्रिप्ट बंद हो।<style>दस्तावेज़ में सीधे लिखा CSS — आमतौर पर head के भीतर।<template>ऐसा अंश जो अभी नहीं दिखता, बाद में स्क्रिप्ट से नकल होता है।<slot>वेब कंपोनेंट में बाहरी सामग्री के लिए जगह रखता है।
दस्तावेज़ जानकारी2
ब्राउज़र और खोज इंजन पढ़ते हैं, लोग नहीं।
खुलने-बंद होने वाले3
बिना जावास्क्रिप्ट क्लिक पर खुलने-बंद होने वाली चीज़ें।
अप्रचलित12
मानक से हटाए गए टैग; ये केवल पुराने दस्तावेज़ों में मिलते हैं।
<center>बीच में लाने का पुराना तरीक़ा; अब यह CSS करता है।<font>फ़ॉन्ट, आकार और रंग सीधे तय करने वाला पुराना टैग।<marquee>चलते पाठ का पुराना टैग; अब CSS एनिमेशन इसका स्थान लेता है।<blink>पाठ को टिमटिमाता था; अब कोई ब्राउज़र इसे नहीं मानता।<big>पाठ को एक स्तर बड़ा करने वाला पुराना टैग।<strike>काटने वाला पुराना टैग; अब s या del का प्रयोग करें।<tt>मोनोस्पेस दिखाने वाला पुराना टैग; अब code का प्रयोग करें।<frame>खिड़की को दस्तावेज़ों में बाँटने के पुराने तरीक़े का एक खाना।<frameset>frame सजाने वाला पुराना कंटेनर — body की जगह लेता था।<acronym>संक्षेपाक्षरों का पुराना टैग; अब abbr ही पर्याप्त है।<applet>जावा एप्लेट का पुराना टैग; अब वह वातावरण ही नहीं रहा।<dir>फ़ाइल-सूची का पुराना टैग; ul ने उसकी जगह ली।
कैसे पढ़ें
- ज़्यादातर टैग जोड़े में आते हैं — खुलने और बंद होने वाले। सिर्फ़ बिना सामग्री वाले टैग (img, br) बंद नहीं होते।
- रिक्त तत्व के लिए </br> लिखना बेकार है: ब्राउज़र या तो अनदेखा करता है या एक खाली पंक्ति जोड़ देता है।
- दिखावट CSS का काम है। टैग बताता है कि चीज़ क्या है; मोटा या तिरछा होना उसका परिणाम भर है।
- अर्थ से मेल खाता टैग चुनना खोज इंजन और स्क्रीन रीडर दोनों के लिए अच्छा है। सब कुछ div में लपेटना यह जानकारी फेंक देता है।
अक्सर पूछे जाने वाले सवाल
Q. HTML टैग कुल कितने हैं?
मौजूदा मानक में लगभग 110 जीवित हैं, और अप्रचलित मिलाकर करीब 130। यह संदर्भ 126 देता है — आज इस्तेमाल होने वाले और वे जो पुराने दस्तावेज़ों में मिलते हैं।
Q. किन टैग का बंद टैग नहीं होता?
जिनमें सामग्री नहीं होती: img, br, hr, input, meta, link और कुछ और। </img> लिखने से कुछ नहीं होता। <br /> में XHTML शैली की स्लैश मान्य है, पर HTML में कोई फ़र्क नहीं पड़ता।
Q. div और section में क्या अंतर है?
div बिना अर्थ का डिब्बा है; section शीर्षक वाला विषयगत समूह है। यदि वहाँ शीर्षक बैठ सकता हो तो section लें; केवल स्टाइल टाँगनी हो तो div ही ईमानदार विकल्प है।
Q. क्या टैग नाम बड़े अक्षरों में लिख सकते हैं?
HTML में अक्षर-भेद नहीं है, इसलिए <DIV> भी चलता है। प्रचलन छोटे अक्षरों का है, और XHTML या SVG जैसे XML संदर्भों में केवल छोटे अक्षर मान्य हैं।
Q. अप्रचलित टैग इस्तेमाल करने पर क्या होता है?
ज़्यादातर ब्राउज़र अब भी उन्हें दिखाते हैं। पर मानक ने उन्हें हटा दिया है, वे कभी भी ग़ायब हो सकते हैं — और विकल्प पहले से हैं: center और font के लिए CSS, marquee के लिए CSS एनिमेशन।