एचटीएमएल की खास जानकारी

हाइपरटेक्स्ट मार्कअप लैंग्वेज, या एचटीएमएल एक स्टैंडर्ड मार्कअप लैंग्वेज है. इसकी मदद से, वेब पर दिखाए जाने वाले दस्तावेज़ों के स्ट्रक्चर के बारे में जानकारी दी जाती है. एचटीएमएल में एलिमेंट और एट्रिब्यूट की एक सीरीज़ होती है. इनका इस्तेमाल, किसी दस्तावेज़ के सभी कॉम्पोनेंट को बेहतर तरीके से स्ट्रक्चर करने के लिए, मार्कअप करने के लिए किया जाता है.

एचटीएमएल दस्तावेज़ मूल रूप से नोड का एक ट्री होते हैं, जिनमें एचटीएमएल एलिमेंट और टेक्स्ट नोड शामिल होते हैं. एचटीएमएल एलिमेंट, दस्तावेज़ों के सिमैंटिक और फ़ॉर्मैटिंग की सुविधा देते हैं. इनमें पैराग्राफ़, सूचियां, और टेबल बनाना, इमेज जोड़ना, और फ़ॉर्म कंट्रोल करना शामिल है. हर एलिमेंट में एक से ज़्यादा एट्रिब्यूट हो सकते हैं. कई एलिमेंट में कॉन्टेंट हो सकता है, जिसमें अन्य एलिमेंट और टेक्स्ट शामिल हैं. दूसरे एलिमेंट खाली हैं और उनका फ़ंक्शन तय करने वाले टैग और एट्रिब्यूट हैं.

एलिमेंट की कई कैटगरी होती हैं. इनमें मेटाडेटा, सेक्शनिंग, टेक्स्ट, इनलाइन सिमैंटिक, फ़ॉर्म, इंटरैक्टिव, मीडिया, कॉम्पोनेंट, और स्क्रिप्टिंग शामिल हैं. हम इस सीरीज़ में ज़्यादातर के बारे में बताएंगे. लेकिन सबसे पहले, एलिमेंट क्या होता है?

एलिमेंट

एचटीएमएल में एलिमेंट की एक सीरीज़ होती है. इसका इस्तेमाल, कॉन्टेंट के अलग-अलग हिस्सों को दिखाने या उनके हिसाब से काम करने के लिए किया जाता है. एचटीएमएल एलिमेंट को टैग से दिखाया जाता है. इन्हें ऐंगल ब्रैकेट (< और >) का इस्तेमाल करके लिखा जाता है.

हमारे पेज का टाइटल, एक हेडिंग है और पहला लेवल है. इसके लिए, हम <h1> टैग का इस्तेमाल करते हैं. असली शीर्षक, "मशीन लर्निंग वर्कशॉप", हमारे एलिमेंट का कॉन्टेंट है. कॉन्टेंट, ओपन और क्लोज़ टैग के बीच में होता है. मूल टैग, क्लोज़िंग टैग, और कॉन्टेंट एलिमेंट है.

क्लोज़िंग टैग वही होता है जो ओपनिंग टैग के पहले होता है और एक स्लैश होता है.

एलिमेंट और टैग एक जैसे नहीं होते. हालांकि, कई लोग शब्दों का इस्तेमाल एक-दूसरे की जगह पर करते हैं. टैग का नाम, ब्रैकेट में मौजूद कॉन्टेंट होता है. टैग में ब्रैकेट शामिल होते हैं. इस मामले में, <h1>. ओपन और क्लोज़ टैग होने के साथ-साथ, इन टैग के बीच का पूरा कॉन्टेंट "एलिमेंट" होता है. इसमें नेस्ट किए गए एलिमेंट भी शामिल हैं.

<p>This paragraph has some
  <strong><em>strongly emphasized</em></strong>
  content</p>

पैराग्राफ़ एलिमेंट में दूसरे एलिमेंट नेस्ट किए गए हैं. एलिमेंट को नेस्ट करते समय, यह ज़रूरी है कि वे सही तरीके से नेस्ट किए गए हों. एचटीएमएल टैग को उसी क्रम में बंद किया जाना चाहिए जिस क्रम में उन्हें खोला गया था. ऊपर दिए गए उदाहरण में देखें कि शुरुआती और आखिरी <strong> टैग में <em> कैसे खुलता और बंद होता है. साथ ही, <p> टैग में <strong>, दोनों टैग में खुला और बंद होता है.

ब्राउज़र टैग नहीं दिखाते. टैग का इस्तेमाल, पेज के कॉन्टेंट को समझने के लिए किया जाता है.

एचटीएमएल से आपको काफ़ी शिकायत मिलेगी. उदाहरण के लिए, अगर हम क्लोज़िंग </li> टैग को छोड़ देते हैं, तो क्लोज़िंग टैग असल में दिखते हैं.

<ul>
  <li>Blendan Smooth
  <li>Hoover Sukhdeep
  <li>Toasty McToastface
</ul>

हालांकि, <li> को बंद नहीं करना सही है, लेकिन यह एक सही तरीका नहीं है. </ul> का बंद होना ज़रूरी है. अगर बिना क्रम वाली सूची का क्लोज़िंग टैग हटा दिया जाता है, तो ब्राउज़र यह पता लगाने की कोशिश करेगा कि आपकी सूची और सूची के आइटम कहां खत्म होते हैं, लेकिन हो सकता है कि आप फ़ैसले से सहमत न हों.

हर एलिमेंट के ब्यौरे में यह बताया जाता है कि क्लोज़िंग टैग ज़रूरी है या नहीं. स्पेसिफ़िकेशन के मुताबिक, "दोनों में से कोई भी टैग शामिल नहीं किया जा सकता" का मतलब है कि ओपनिंग और क्लोज़िंग टैग, दोनों की ज़रूरत होगी. जानकारी में सभी ज़रूरी क्लोज़ टैग की सूची दी गई है.

अगर पिछले उदाहरण में दिए गए <em> या <strong> को बंद नहीं किया गया था, तो हो सकता है कि ब्राउज़र आपके लिए एलिमेंट बंद न करे. <em> को बंद नहीं करने पर, शायद कॉन्टेंट आपके हिसाब से अलग तरीके से रेंडर हो जाता है. अगर </ul> को हटाया जाता है और अगला टैग, सूची के पैरंट कंटेनर का क्लोज़िंग टैग है, तो आप खुशकिस्मत हैं. अगर यह एक शुरुआती <h1> टैग है, तो ब्राउज़र यह मानेगा कि हेडर, सूची का हिस्सा है. इसमें, इनहेरिट करने वाली स्टाइल भी शामिल हैं. हटाए गए कुछ क्लोज़िंग टैग की वजह से बड़ी समस्याएं होती हैं: <script>, <style>, <template>, <textarea>, और <title> जैसे कुछ टैग को बंद न करने पर, उसके बाद का कॉन्टेंट टूट जाता है, जैसा कि इस उदाहरण में दिखाया गया है.

कुछ कॉन्टेंट के अनजाने में इटैलिक होने या हेडिंग इंडेंट होने से आपके कारोबार को नुकसान नहीं होगा. आपके ज़्यादातर कॉन्टेंट 200x300 टेक्स्ट एरिया में बिना स्टाइल के दिखते हैं, क्योंकि आप </textarea> जोड़ना भूल गए हैं या किसी </style> को बंद करना भूल गए हैं. इसलिए, यह साइट पर नहीं दिख रहे हैं. ऐसा करने से, साइट काम नहीं करती.

कुछ मामलों में, मार्कअप में टैग मौजूद न होने पर भी ब्राउज़र, एलिमेंट को शामिल करेंगे. एलिमेंट को शामिल किया जा सकता है, इसलिए टैग न होने के बावजूद भी एलिमेंट मौजूद हो सकता है. ब्राउज़र आपके कॉन्टेंट के आस-पास <body></body> और आपकी टेबल की पंक्तियों के आस-पास <tbody></tbody> जोड़ देगा, भले ही आपने ऐसा न किया हो. हालांकि, टैग को छोड़ने के लिए मान्य है, लेकिन ऐसा न करें. साथ ही, जैसा कि पहले ही बताया जा चुका है, पक्का करें कि उन्हें सही तरीके से नेस्ट किया गया हो. मार्कअप के रखरखाव के तौर पर भविष्य में आप और आपके कोड बेस पर काम करने वाले किसी दूसरे व्यक्ति का धन्यवाद.

एलिमेंट दो तरह के होते हैं: बदला गया और नहीं बदला गया.

नहीं बदले गए एलिमेंट

पिछले सेक्शन में मार्कअप किए गए पैराग्राफ़, हेडर, और सूचियों को नहीं बदला जाता. नहीं बदले गए एलिमेंट में ओपनिंग और (कभी-कभी वैकल्पिक) क्लोज़िंग टैग होते हैं, जो उनके चारों ओर होते हैं. इनमें टेक्स्ट और अन्य टैग को सब-एलिमेंट के रूप में शामिल किया जा सकता है. ये क्लोज़िंग टैग, किसी वाक्यांश या इमेज को हाइपरलिंक में बदल सकते हैं, वाक्य को हेडर में बदल सकते हैं, शब्दों पर ज़ोर दे सकते हैं वगैरह.

बदले गए और अमान्य एलिमेंट

बदले गए एलिमेंट को ऑब्जेक्ट से बदल दिया जाता है. ज़्यादातर फ़ॉर्म कंट्रोल के मामले में, यह ग्राफ़िकल यूज़र इंटरफ़ेस (यूआई) विजेट हो सकता है या ज़्यादातर इमेज के मामले में रास्टर या स्केलेबल इमेज फ़ाइल हो सकती है. इन ऑब्जेक्ट को ऑब्जेक्ट से बदला जाता है. इसलिए, हर इमेज डिफ़ॉल्ट रूप से दिखती है. ऑब्जेक्ट और ब्राउज़र के टाइप के आधार पर, लागू होने वाली स्टाइल सीमित होती हैं. उदाहरण के लिए, ज़्यादातर ब्राउज़र यूज़र इंटरफ़ेस (यूआई) विजेट और उनसे जुड़े नकली एलिमेंट की सीमित स्टाइलिंग को चालू करते हैं. रास्टर इमेज के मामले में, सीएसएस की मदद से ऊंचाई, चौड़ाई, क्लिपिंग, और फ़िल्टर करने की प्रोसेस आसानी से की जा सकती है. हालांकि, इसके अलावा और कुछ नहीं किया जा सकता. दूसरी ओर, एचटीएमएल जैसे एक्सएमएल पर आधारित मार्कअप भाषा का इस्तेमाल करके, स्केलेबल वेक्टर ग्राफ़िक पूरी तरह से स्केलेबल होते हैं (जब तक कि उनमें रास्टर इमेज न हों). इन्हें पूरी तरह से स्टाइल भी किया जा सकता है. ध्यान दें कि SVG को एम्बेड करने वाली एचटीएमएल फ़ाइल से लिंक किए गए सीएसएस से, एम्बेड किए गए SVG को स्टाइल करने की सुविधा, इस बात पर निर्भर करती है कि SVG फ़ाइल को कैसे सेट अप किया गया है.

इस उदाहरण में, बदले गए दो एलिमेंट <img> और <input> को बिना टेक्स्ट वाले कॉन्टेंट से बदल दिया गया है: एक इमेज और एक ग्राफ़िकल यूज़र इंटरफ़ेस ऑब्जेक्ट.

<input type="range">
<img src="switch.svg" alt="light switch">

ऊपर दिए गए एचटीएमएल का आउटपुट:

बदले गए एलिमेंट और अमान्य एलिमेंट अक्सर उलझन में होते हैं. अमान्य एलिमेंट, सभी अपने-आप बंद होने वाले एलिमेंट होते हैं और इन्हें एक टैग से दिखाया जाता है. इसका मतलब है कि अमान्य एलिमेंट के लिए क्लोज़ टैग जैसी कोई चीज़ नहीं है. इसके अलावा, टैग के आखिर में स्लैश शामिल किया जा सकता है. यह कई लोगों को लगता है कि मार्कअप को पढ़ना आसान बनाता है. इसी उदाहरण में, हम टैग को स्लैश के साथ बंद करते हैं:

<input type="range"/>
<img src="switch.svg" alt="light switch"/>

आखिर में दिखने वाला स्लैश पुराना है: इससे यह पता चलता है कि एलिमेंट अपने-आप बंद हो रहा है. साथ ही, इसमें आखिरी या क्लोज़िंग टैग का कोई हिस्सा नहीं होगा.

अमान्य एलिमेंट में टेक्स्ट कॉन्टेंट या नेस्ट किए गए एलिमेंट शामिल नहीं हो सकते. अमान्य एलिमेंट में <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track>, और <wbr> वगैरह शामिल हैं.

ज़्यादातर बदले गए एलिमेंट शून्य एलिमेंट होते हैं, लेकिन सभी नहीं. video, picture, object, और iframe एलिमेंट को बदल दिया गया है. हालांकि, ये एलिमेंट अमान्य नहीं हैं. इन सभी में अन्य एलिमेंट या टेक्स्ट शामिल हो सकते हैं, इसलिए उन सभी का एक क्लोज़िंग टैग होता है.

ज़्यादातर अमान्य एलिमेंट को बदल दिया जाता है. हालांकि, जैसा कि base, link, param, और meta में देखा गया है, सभी अमान्य एलिमेंट को फिर से बदल दिया गया है. ऐसा अमान्य एलिमेंट क्यों है जिसमें कोई कॉन्टेंट नहीं हो सकता और उसे बदला नहीं जाता और स्क्रीन पर कुछ भी रेंडर नहीं होता? कॉन्टेंट के बारे में जानकारी देने के लिए! यह जानकारी, एलिमेंट के एट्रिब्यूट से मिलती है.

एट्रिब्यूट

आपने देखा होगा कि <img> और <input> उदाहरणों में, शुरुआती टैग में एलिमेंट के टाइप के अलावा भी बहुत कुछ है. स्पेस से अलग किए गए नाम/वैल्यू पेयर के इन अतिरिक्त बिट को एट्रिब्यूट कहा जाता है. हालांकि, कभी-कभी वैल्यू को शामिल करना ज़रूरी नहीं होता. विशेषताओं की मदद से ही एचटीएमएल को ज़्यादा बेहतर बनाया जा सकता है. हम इस सीरीज़ में सैकड़ों एट्रिब्यूट और एट्रिब्यूट की वैल्यू के बारे में बात करेंगे. हालांकि, यहां हम बस चर्चा करेंगे कि आम तौर पर ये एट्रिब्यूट क्या होते हैं और इन्हें कैसे शामिल किया जाता है.

एट्रिब्यूट, एलिमेंट के बारे में जानकारी देते हैं. बाकी शुरुआती टैग की तरह एट्रिब्यूट, कॉन्टेंट में नहीं दिखेंगे. हालांकि, इनसे यह तय करने में मदद मिलती है कि उन उपयोगकर्ताओं को कॉन्टेंट कैसा दिखेगा जिन्होंने ठीक से नहीं देखा है और नहीं. साथ ही, सहायक टेक्नोलॉजी और सर्च इंजन का इस्तेमाल करने वाले लोगों को कॉन्टेंट कैसा दिखेगा.

एट्रिब्यूट सिर्फ़ शुरुआती टैग में दिखते हैं. ओपनिंग टैग हमेशा एलिमेंट के टाइप से शुरू होता है. टाइप के बाद शून्य या उससे ज़्यादा एट्रिब्यूट हो सकते हैं, जिन्हें एक या उससे ज़्यादा स्पेस से अलग किया जाता है. ज़्यादातर एट्रिब्यूट के नामों के बाद, बराबर का निशान होता है. यह वैल्यू, एट्रिब्यूट की वैल्यू के बराबर होती है. वैल्यू को खोलने और बंद करने के लिए कोटेशन मार्क के बीच में रखा जाता है.

इस उदाहरण में, हमारे पास दो एट्रिब्यूट वाला ऐंकर लिंक है. इन दो एट्रिब्यूट की मदद से, कॉन्टेंट "रजिस्ट्रेशन" को अंदरूनी ऐंकर लिंक में बदल दिया गया है. यह लिंक पर क्लिक करने, टैप करने या कीबोर्ड या दूसरे डिवाइस से चालू किए जाने पर मौजूदा ब्राउज़र टैब में id="register" एट्रिब्यूट तक स्क्रोल करता है.

एट्रिब्यूट, एलिमेंट के व्यवहार, लिंक, और फ़ंक्शन के बारे में बताते हैं. हम इस सीरीज़ के एट्रिब्यूट सेक्शन में ज़्यादा एट्रिब्यूट के बारे में बताएंगे. फ़िलहाल, ध्यान दें कि कुछ एट्रिब्यूट ग्लोबल हैं. इसका मतलब है कि वे किसी भी एलिमेंट के शुरुआती टैग में दिख सकते हैं. कुछ एलिमेंट, सिर्फ़ कई एलिमेंट पर लागू होते हैं, सभी नहीं. इसी तरह, कुछ एलिमेंट, एलिमेंट के हिसाब से बने होते हैं और सिर्फ़ एक एलिमेंट के लिए काम के होते हैं.

ज़्यादातर एट्रिब्यूट, नाम/वैल्यू पेयर होते हैं. बूलियन एट्रिब्यूट, जिनकी वैल्यू सही, गलत या एट्रिब्यूट के नाम से मेल खाती है, उन्हें सिर्फ़ एट्रिब्यूट के तौर पर शामिल किया जा सकता है: वैल्यू डालना ज़रूरी नहीं है.

<img src="switch.svg" alt="light switch" ismap />

इस इमेज में तीन एट्रिब्यूट हैं: src, alt, और ismap. src एट्रिब्यूट का इस्तेमाल, SVG इमेज ऐसेट की जगह की जानकारी देने के लिए किया जाता है. alt एट्रिब्यूट, इमेज के कॉन्टेंट के बारे में जानकारी देने वाला वैकल्पिक टेक्स्ट देता है. ismap एट्रिब्यूट बूलियन है और इसके लिए वैल्यू की ज़रूरत नहीं है. यह सिर्फ़ एट्रिब्यूट के बारे में जानकारी देता है. हम इमेज सेक्शन में इन एट्रिब्यूट के बारे में ज़्यादा जानकारी देंगे.

हालांकि, एट्रिब्यूट को कोट करना ज़रूरी नहीं है, लेकिन कभी-कभी ऐसा भी होता है. अगर वैल्यू में स्पेस या खास वर्ण शामिल हैं, तो कोटेशन की ज़रूरत पड़ती है. इस वजह से, उद्धरण देने की सलाह दी जाती है. अगर एट्रिब्यूट की वैल्यू कोट की गई है, तो एट्रिब्यूट के बीच एक या उससे ज़्यादा स्पेस देना ज़रूरी नहीं है. हालांकि, सुरक्षित रहने के लिए, कोटेशन और स्पेस का इस्तेमाल करना ज़रूरी है. ऐसा करना भी ज़रूरी है.

एचटीएमएल केस-सेंसिटिव (बड़े और छोटे अक्षरों में अंतर) नहीं होता है, लेकिन कुछ एट्रिब्यूट की वैल्यू होती हैं. स्पेसिफ़िकेशन में बताई गई वैल्यू, केस-इनसेंसिटिव होती हैं. जिन स्ट्रिंग को कीवर्ड के तौर पर नहीं दिखाया जाता वे आम तौर पर केस-सेंसिटिव (बड़े और छोटे अक्षरों में अंतर) होती हैं. इनमें id और class वैल्यू शामिल होती हैं.

ध्यान दें कि अगर एचटीएमएल में कोई एट्रिब्यूट वैल्यू, केस-सेंसिटिव (बड़े और छोटे अक्षरों में अंतर) होती है, तो सीएसएस और JavaScript में एट्रिब्यूट सिलेक्टर के हिस्से के तौर पर इस्तेमाल किए जाने पर यह केस-सेंसिटिव (बड़े और छोटे अक्षरों में अंतर) होती है.

मार्कअप को आसानी से पढ़ने के लिए, हमारा सुझाव है कि आप अपने टैग में सभी एलिमेंट और एट्रिब्यूट के नामों के लिए, छोटे अक्षरों का इस्तेमाल करके एचटीएमएल को मार्क अप करें. साथ ही, सभी एट्रिब्यूट की वैल्यू को कोट करें. हालांकि, ऐसा करना ज़रूरी नहीं है. अगर आपने कभी भी "XHTML स्टाइल मार्कअप" शब्द सुना है, तो इसका मतलब है कि अपने-आप बंद होने वाले खाली एलिमेंट के आखिर में स्लैश के साथ, "XHTML स्टाइल मार्कअप" शब्द का इस्तेमाल होना चाहिए.

एलिमेंट दिखने का तरीका

सिमैंटिक एलिमेंट का डिफ़ॉल्ट लुक, उपयोगकर्ता-एजेंट स्टाइलशीट से सेट किया जाता है. ज़्यादातर ब्राउज़र इस काम के लिए असल स्टाइलशीट का इस्तेमाल करते हैं, जबकि दूसरे ब्राउज़र कोड में उन्हें सिम्युलेट करते हैं. आखिरी नतीजा एक जैसा ही होता है. हालांकि, उपयोगकर्ता-एजेंट स्टाइलशीट पर कुछ पाबंदियां एचटीएमएल की खास बातों से सेट होती हैं, लेकिन ब्राउज़र में बहुत ज़्यादा अक्षांश होते हैं. इसका मतलब है कि अलग-अलग ब्राउज़र में कुछ अंतर मौजूद होते हैं.

टैग का सिमैंटिक मतलब होने पर, चुना गया एलिमेंट और इस्तेमाल किए जा रहे टैग, दिखाई जा रही कॉन्टेंट के हिसाब से होने चाहिए. एलिमेंट का सिमेंटिक्स या role, सहायक टेक्नोलॉजी और कुछ मामलों में सर्च इंजन के लिए अहम होता है. एचटीएमएल का इस्तेमाल कॉन्टेंट को स्ट्रक्चर करने के लिए किया जाना चाहिए, न कि कॉन्टेंट के दिखने के तरीके को तय करने के लिए. दिखने का तरीका, सीएसएस की दुनिया है. कई एलिमेंट जो कॉन्टेंट की स्टाइल में बदलाव करते हैं, जैसे कि <h1>, <strong>, और <em> का मतलब सिमैंटिक होता है. हालांकि, लेखक की स्टाइल के हिसाब से, कॉन्टेंट का स्टाइल बदला जा सकता है और आम तौर पर, इसे बदला जा सकता है.

<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>

एलिमेंट, एट्रिब्यूट, और JavaScript

डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM), एचटीएमएल दस्तावेज़ के स्ट्रक्चर और कॉन्टेंट को डेटा के रूप में दिखाता है. जब ब्राउज़र, एचटीएमएल को पार्स करता है, तो वह मिलने वाले हर एलिमेंट और सेक्शन के लिए एक JavaScript ऑब्जेक्ट बनाता है. इन ऑब्जेक्ट को नोड कहते हैं—एलिमेंट नोड और टेक्स्ट नोड.

हर एचटीएमएल एलिमेंट के फ़ंक्शन को तय करने के लिए एक इंटरफ़ेस है. एचटीएमएल डीओएम एपीआई, डीओएम के ज़रिए हर एचटीएमएल एलिमेंट को ऐक्सेस और कंट्रोल करता है. साथ ही, एचटीएमएल एलिमेंट और उससे इनहेरिट करने वाले सभी एचटीएमएल क्लास के लिए इंटरफ़ेस उपलब्ध कराता है. HTMLElement इंटरफ़ेस, एचटीएमएल एलिमेंट और उसके सभी डिसेंडेंट नोड के बारे में बताता है. हर दूसरा एलिमेंट, इसे उस इंटरफ़ेस के ज़रिए लागू करता है जो इससे इनहेरिट होता है. इनहेरिट किए जाने वाले हर इंटरफ़ेस में एक कंस्ट्रक्टर, मेथड, और प्रॉपर्टी होती हैं. इनहेरिट की गई एचटीएमएल एलिमेंट प्रॉपर्टी के ज़रिए, हर ग्लोबल एट्रिब्यूट के साथ-साथ input, pointer, transition, और animation इवेंट को ऐक्सेस किया जा सकता है. अलग-अलग एलिमेंट के सब-टाइप, जैसे कि HTMLAnchorElement और HTMLImageElement के ज़रिए, किसी एलिमेंट के लिए खास वैल्यू और तरीकों को ऐक्सेस किया जा सकता है.

जांचें कि आपको कितना समझ आया

एचटीएमएल के बारे में अपनी जानकारी को परखें