लिंक

एट्रिब्यूट सेक्शन की जानकारी में, आपने एक उदाहरण देखा है. इसमें शुरुआती टैग में एट्रिब्यूट जोड़ने के तरीके के बारे में बताया गया है. इस उदाहरण में <a> टैग का इस्तेमाल किया गया है, लेकिन उस उदाहरण में पेश किए गए एलिमेंट या खास एट्रिब्यूट में से किसी पर चर्चा नहीं की गई:

<a> ऐंकर टैग और href एट्रिब्यूट का इस्तेमाल करके, एक हाइपरलिंक बनाया जाता है. लिंक, इंटरनेट का आधार हैं. पहले वेब पेज में 25 लिंक थे. इसमें लिखा था, "W3 के बारे में जो भी ऑनलाइन उपलब्ध है वह इस दस्तावेज़ से सीधे तौर पर या किसी दूसरे तरीके से लिंक किया गया है." इस बात की संभावना है कि W3 के बारे में उपलब्ध हर चीज़ इस दस्तावेज़ से भी सीधे या किसी दूसरे तरीके से लिंक की गई है!

अगस्त 1991 में जब टिम बर्नर्स-ली ने पहली बार इस जानकारी को पब्लिश किया था, तब से वेब और <a> टैग की ताकत काफ़ी बढ़ गई है. लिंक, दो रिसॉर्स के बीच के कनेक्शन को दिखाते हैं. इनमें से एक मौजूदा दस्तावेज़ है. <a>, <area>, <form>, और <link> के ज़रिए लिंक बनाए जा सकते हैं. आपने <link> के बारे में जान लिया है और आपको एक अलग सेक्शन में फ़ॉर्म दिखेंगे. साथ ही, फ़ॉर्म 'सीखने का सेक्शन' भी मौजूद है. इस सत्र में, आपको एक अक्षर वाले, बेहद आसान <a> टैग के बारे में पता चलेगा.

href एट्रिब्यूट

हालांकि, यह ज़रूरी नहीं है, लेकिन href एट्रिब्यूट करीब-करीब सभी <a> टैग में मौजूद होता है. हाइपरलिंक का पता देने पर, <a> एक लिंक में बदल जाता है. href एट्रिब्यूट का इस्तेमाल, मौजूदा पेज, साइट के अन्य पेजों या दूसरी साइटों पर मौजूद जगहों के हाइपरलिंक बनाने के लिए किया जाता है. इसे फ़ाइलें डाउनलोड करने या किसी खास पते पर ईमेल भेजने के लिए भी कोड किया जा सकता है. इसमें विषय और ईमेल के मुख्य हिस्से का सुझाया गया कॉन्टेंट भी शामिल है.

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:[e-mail]">Email Hal</a>
<a href="tel:[phone]">Call Hal</a>

पहले लिंक में एक ऐब्सलूट यूआरएल होता है. इस लिंक का इस्तेमाल, MLW के होम पेज पर जाने के लिए दुनिया की किसी भी साइट पर किया जा सकता है. सभी यूआरएल में एक प्रोटोकॉल शामिल होता है. इस मामले में, https:// और एक डोमेन नेम शामिल होता है. जब प्रोटोकॉल को सिर्फ़ // के रूप में लिखा जाता है, तो यह एक इंप्लिसिट प्रोटोकॉल होता है. इसका मतलब है कि "उसी प्रोटोकॉल का इस्तेमाल करें जो फ़िलहाल इस्तेमाल किया जा रहा है."

मिलते-जुलते यूआरएल में प्रोटोकॉल या डोमेन नेम शामिल नहीं होता. वे मौजूदा फ़ाइल से "मिलते-जुलते" हैं. MLW एक पेज वाली साइट है, लेकिन इस एचटीएमएल सीरीज़ में कई सेक्शन हैं. इस पेज को एट्रिब्यूट लेसन से लिंक करने के लिए, मिलते-जुलते यूआरएल का इस्तेमाल किया जाता है <a href="../attributes/">Attributes</a>.

दूसरा लिंक सिर्फ़ एक लिंक फ़्रैगमेंट आइडेंटिफ़ायर होता है. अगर मौजूदा पेज पर, id="teachers", वाला एलिमेंट होता है, तो उसे एलिमेंट से लिंक किया जाएगा. ब्राउज़र में दो "पेज पर सबसे ऊपर" लिंक भी काम करते हैं: <a href="#top">Top</a> (केस-इनसेंसिटिव) पर क्लिक करने से या सिर्फ़ <a href="#">Top</a> पर क्लिक करने से, उपयोगकर्ता पेज के सबसे ऊपर स्क्रोल हो जाएगा. हालांकि, अगर एक ही अक्षर केसिंग में top आईडी वाला एलिमेंट सेट न हो.

MLW एक बड़ा दस्तावेज़ है. स्क्रोलिंग सेव करने के लिए, आप #teachers सेक्शन में सबसे नीचे जाकर, सबसे ऊपर एक लिंक जोड़ सकते हैं:

<a href="#top">Go to top.</a>

तीसरा लिंक दो वैल्यू को जोड़ता है: इसमें एक पूरा यूआरएल होता है जिसके बाद लिंक फ़्रैगमेंट होता है. इससे, तय किए गए यूआरएल के किसी सेक्शन से सीधे लिंक किया जा सकता है. इस मामले में, MLW होम पेज का #teachers सेक्शन शामिल है. MLW पेज लोड होगा. इसके बाद, ब्राउज़र, एचटीटीपी अनुरोध में फ़्रैगमेंट भेजे बिना शिक्षकों के सेक्शन तक स्क्रोल करेगा.

href एट्रिब्यूट को ईमेल या कॉल करने के लिए, mailto: या tel: से शुरू किया जा सकता है. इसके लिए, लिंक को हैंडल करने का काम डिवाइस, ऑपरेटिंग सिस्टम, और इंस्टॉल किए गए ऐप्लिकेशन के हिसाब से किया जाता है.

mailto लिंक में ईमेल पता शामिल करने की ज़रूरत नहीं होती. हालांकि, इसके ज़रिए cc, bcc, subject, और body टेक्स्ट के साथ-साथ ईमेल को अपने-आप भरा जा सकता है. डिफ़ॉल्ट रूप से, एक ईमेल क्लाइंट खोला जाएगा. आप चाहें, तो ईमेल के विषय और मुख्य हिस्से में जानकारी डाल दें. ऐसा करने से, आपकी साइट पर आने वाले लोग, अपने दोस्तों को न्योता भेज सकते हैं. हमारे लिंक में, दस्तावेज़ के फ़ुटर में, हम रजिस्ट्रेशन का यूआरएल शामिल करते हैं:

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

क्वेश्चन मार्क (?), mailto: और अगर कोई ईमेल पता है, तो उसे क्वेरी क्वेरी से अलग करता है. क्वेरी में, ऐंपरसेंड (&) फ़ील्ड को अलग करते हैं और बराबर के चिह्न (=) हर फ़ील्ड के नाम के बराबर वैल्यू देते हैं. पूरी स्ट्रिंग को प्रतिशत में एन्कोड किया गया है. यह तब ज़रूरी होता है, जब href वैल्यू को कोट न किया गया हो या वैल्यू में कोट शामिल हों.

जब उपयोगकर्ता किसी tel लिंक पर क्लिक करता है, टैप करता है या Enter दबाता है, तो कौनसा ऐप्लिकेशन खुलता है, यह ऑपरेटिंग सिस्टम, इंस्टॉल किए गए ऐप्लिकेशन, और उपयोगकर्ता के डिवाइस पर मौजूद सेटिंग पर निर्भर करता है. iPhone पर FaceTime, फ़ोन ऐप्लिकेशन या संपर्क खुल सकते हैं. अगर इंस्टॉल किया गया हो, तो Windows डेस्कटॉप पर Skype खुल सकता है.

यूआरएल कई तरह के होते हैं, जैसे कि ब्लॉब और डेटा यूआरएल (download एट्रिब्यूट की चर्चा में उदाहरण देखें). सुरक्षित साइटों (जो https पर सेवा की जाती हैं) के लिए, registerProtocolHandler() की मदद से ऐप्लिकेशन के हिसाब से प्रोटोकॉल बनाना और चलाना संभव है.

जिन लिंक से इंस्टॉल किए गए अन्य ऐप्लिकेशन खोलने की संभावना है उन्हें शामिल करते समय, उपयोगकर्ता को इसकी जानकारी देना बेहतर रहता है. पक्का करें कि ओपनिंग और क्लोज़िंग टैग के बीच के टेक्स्ट से उपयोगकर्ता को पता चल सके कि वे किस तरह का लिंक चालू करने वाले हैं. [href^="mailto:"], [href^="tel:"], और [href$=".pdf"] जैसे सीएसएस एट्रिब्यूट सिलेक्टर का इस्तेमाल करके, ऐप्लिकेशन टाइप के मुताबिक स्टाइल को टारगेट किया जा सकता है.

डाउनलोड किए जा सकने वाले संसाधन

जब href, डाउनलोड किए जा सकने वाले रिसॉर्स को दिखाता है, तब download एट्रिब्यूट को शामिल किया जाना चाहिए. डाउनलोड एट्रिब्यूट की वैल्यू, संसाधन के लिए सुझाया गया फ़ाइल नाम है, जिसे उपयोगकर्ता के लोकल फ़ाइल सिस्टम में सेव किया जाना है. SVGOMG टूल SVGOMG टूल है, तो यह download एट्रिब्यूट का इस्तेमाल करके, ऑप्टिमाइज़र के बनाए गए डाउनलोड किए जा सकने वाले ब्लॉब के लिए फ़ाइल के नाम का सुझाव देता है. hal.svg को ऑप्टिमाइज़ किए जाने पर, SVGOMG का डाउनलोड लिंक का शुरुआती टैग इससे मिलता-जुलता होता है:

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

साथ ही, <canvas> का डेमो भी होता है, जो डाउनलोड किया जा सकने वाला PNG डेटा यूआरएल बनाता है.

डाउनलोड किए जा सकने वाले किसी संसाधन से लिंक करने के लिए, एसेट के यूआरएल को href एट्रिब्यूट की वैल्यू के तौर पर शामिल करें. साथ ही, सुझाए गए फ़ाइल का नाम शामिल करें. इसका इस्तेमाल, उपयोगकर्ता के फ़ाइल सिस्टम में download एट्रिब्यूट की वैल्यू के तौर पर किया जा सकता है.

ब्राउज़िंग का कॉन्टेक्स्ट

target एट्रिब्यूट की मदद से, लिंक नेविगेशन और फ़ॉर्म सबमिशन के लिए ब्राउज़िंग कॉन्टेक्स्ट तय किया जा सकता है. <base> एलिमेंट के साथ, अंडरस्कोर से पहले इस्तेमाल किए गए चार केस-इनसेंसिटिव कीवर्ड इस्तेमाल किए गए थे. इनमें डिफ़ॉल्ट _self शामिल होता है, जो मौजूदा विंडो _blank है. इससे लिंक नए टैब में खुलता है, _parent, जो लिंक को किसी ऑब्जेक्ट या iframe में नेस्ट किए जाने पर पैरंट यूआरएल होता है. _top सबसे ऊपर वाला लिंक होता है, खास तौर पर तब, जब मौजूदा लिंक को गहराई से नेस्ट किया गया हो. अगर लिंक को नेस्ट नहीं किया गया है, तो _top और _parent, _self की तरह होते हैं. target एट्रिब्यूट, इन चार मुख्य शब्दों तक ही सीमित नहीं है: किसी भी शब्द का इस्तेमाल किया जा सकता है.

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

target="_blank" के साथ एक लिंक शून्य नाम के साथ नए टैब में खुलेगा. हर लिंक क्लिक के साथ एक नया और बिना नाम वाला टैब खुलेगा. इससे कई नए टैब बन सकते हैं. बहुत ज़्यादा टैब. उदाहरण के लिए, अगर कोई उपयोगकर्ता <a href="registration.html" target="_blank">Register Now</a> पर 15 बार क्लिक करता है, तो रजिस्ट्रेशन फ़ॉर्म 15 अलग-अलग टैब में खुलेगा. यह समस्या टैब संदर्भ नाम उपलब्ध कराकर ठीक की जा सकती है. targetएट्रिब्यूट को केस-सेंसिटिव (बड़े और छोटे अक्षरों में अंतर) वैल्यू के साथ शामिल करने पर, जैसे कि <a href="registration.html" target="reg">Register Now</a>—इस लिंक पर पहला क्लिक करने से रजिस्ट्रेशन फ़ॉर्म नए reg टैब में खुलेगा. इस लिंक पर 15 बार और क्लिक करने से, reg के ब्राउज़िंग कॉन्टेक्स्ट में रजिस्ट्रेशन फिर से लोड हो जाएगा. इसके लिए, आपको कोई और टैब नहीं खोलना होगा.

rel एट्रिब्यूट की मदद से यह कंट्रोल किया जाता है कि लिंक किस तरह के लिंक बनाएगा. साथ ही, यह मौजूदा दस्तावेज़ और हाइपरलिंक में जुड़े संसाधन के बीच संबंध तय करता है. एट्रिब्यूट की वैल्यू, एक या एक से ज़्यादा rel एट्रिब्यूट की वैल्यू के स्कोर पर, स्पेस से अलग की गई सूची होनी चाहिए. यह वैल्यू, <a> टैग पर काम करती है.

स्पाइडर, लिंक को फ़ॉलो न करें. इसके लिए, nofollow कीवर्ड शामिल किया जा सकता है. external वैल्यू को जोड़कर यह पता लगाया जा सकता है कि लिंक किसी बाहरी यूआरएल पर ले जाता है, न कि मौजूदा डोमेन का कोई पेज. help कीवर्ड बताता है कि हाइपरलिंक से कॉन्टेक्स्ट के हिसाब से मदद मिलेगी. इस rel वैल्यू वाले लिंक पर कर्सर घुमाने पर, सामान्य पॉइंटर कर्सर के बजाय, सहायता कर्सर दिखेगा. सिर्फ़ सहायता कर्सर पाने के लिए इस वैल्यू का इस्तेमाल न करें. इसके बजाय, सीएसएस cursor प्रॉपर्टी का इस्तेमाल करें. prev और next वैल्यू का इस्तेमाल, किसी सीरीज़ के पिछले और अगले दस्तावेज़ पर ले जाने वाले लिंक के लिए किया जा सकता है.

<link rel="alternative"> की तरह ही, <a rel="alternative"> का मतलब दूसरे एट्रिब्यूट पर निर्भर करता है. आरएसएस फ़ीड के विकल्पों में type="application/rss+xml" या type="application/atom+xml भी शामिल होगा. अन्य फ़ॉर्मैट में type एट्रिब्यूट और अनुवाद में hreflang एट्रिब्यूट शामिल होगा. अगर शुरुआती और बंद टैग के बीच का कॉन्टेंट, दस्तावेज़ की मुख्य भाषा के अलावा किसी दूसरी भाषा में है, तो lang एट्रिब्यूट शामिल करें. अगर हाइपरलिंक किए गए दस्तावेज़ की भाषा किसी दूसरी भाषा में है, तो hreflang एट्रिब्यूट शामिल करें.

इस उदाहरण में, हम अनुवाद किए गए पेज के यूआरएल को href की वैल्यू के तौर पर शामिल करते हैं, rel="alternate" यह पता चलता है कि यह साइट का वैकल्पिक वर्शन है. hreflang एट्रिब्यूट, अनुवाद की भाषा के बारे में बताता है:

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

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

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

लिंक पर होने वाले क्लिक को ट्रैक करना

उपयोगकर्ता के इंटरैक्शन को ट्रैक करने का एक तरीका यह है कि जब भी किसी लिंक पर क्लिक किया जाए, तो यूआरएल को पिंग करें. अगर ping एट्रिब्यूट मौजूद है, तो उसमें सुरक्षित यूआरएल (जो https से शुरू होते हैं) की स्पेस से अलग की गई सूची शामिल होती है. अगर उपयोगकर्ता हाइपरलिंक को चालू करता है, तो इस बारे में उसे सूचना दी जानी चाहिए या उसे पिंग किया जाना चाहिए. ब्राउज़र, ping एट्रिब्यूट की वैल्यू के तौर पर लिस्ट किए गए यूआरएल को, मुख्य हिस्से PING के साथ POST अनुरोध भेजता है.

उपयोगकर्ता अनुभव से जुड़ी सलाह

• एचटीएमएल लिखते समय उपयोगकर्ता अनुभव को हमेशा ध्यान में रखें. लिंक में लिंक किए गए संसाधन के बारे में पूरी जानकारी होनी चाहिए, ताकि उपयोगकर्ता को पता चल सके कि वह किस चीज़ पर क्लिक कर रहा है.
• टेक्स्ट के किसी ब्लॉक में, पक्का करें कि आपके लिंक आस-पास के टेक्स्ट से काफ़ी अलग हों, ताकि उपयोगकर्ता आसानी से बाकी कॉन्टेंट से लिंक को पहचान सकें. यह भी पक्का करें कि सिर्फ़ रंग के ज़रिए ही टेक्स्ट और आस-पास के कॉन्टेंट के बीच अंतर किया जा सके.
• फ़ोकस स्टाइल हमेशा शामिल करें. इससे कीबोर्ड नेविगेटर को यह जानने में मदद मिलती है कि कॉन्टेंट पर टैब करने के दौरान वे कहां होते हैं.
• शुरुआती <a> और बंद होने वाले </a> के बीच का कॉन्टेंट ही डिफ़ॉल्ट रूप से ऐक्सेस किया जा सकने वाला लिंक का नाम होता है. इससे उपयोगकर्ता को लिंक के डेस्टिनेशन या मकसद के बारे में जानकारी मिलनी चाहिए. अगर किसी लिंक का कॉन्टेंट कोई इमेज है, तो alt ब्यौरा वह नाम होता है जिसे ऐक्सेस किया जा सकता है. चाहे ऐक्सेस किया जा सकने वाला नाम, alt एट्रिब्यूट से लिया गया हो या टेक्स्ट के किसी ब्लॉक में शब्दों के सबसेट से. यह पक्का करें कि इससे लिंक के डेस्टिनेशन के बारे में जानकारी मिली हो. लिंक टेक्स्ट "यहां क्लिक करें" या "ज़्यादा जानकारी" की तुलना में ज़्यादा जानकारी देने वाला होना चाहिए; यह आपके स्क्रीन रीडर उपयोगकर्ताओं और आपके सर्च इंजन के नतीजों के लिए ज़रूरी है!
• लिंक में, <button> या <input> जैसी इंटरैक्टिव कॉन्टेंट शामिल न करें. <button> या <label> में भी लिंक को नेस्ट न करें. हालांकि, एचटीएमएल पेज अब भी रेंडर होगा, लेकिन इंटरैक्टिव एलिमेंट में फ़ोकस करने लायक और क्लिक किए जा सकने वाले एलिमेंट को नेस्ट करने से, उपयोगकर्ता को खराब अनुभव मिलता है.
• अगर href एट्रिब्यूट मौजूद है, तो <a> एलिमेंट पर फ़ोकस करते समय Enter बटन दबाने से, वह चालू हो जाएगा.
• लिंक, एचटीएमएल तक सीमित नहीं होते. a एलिमेंट का इस्तेमाल SVG में भी किया जा सकता है, ताकि 'href' या 'xlink:href' एट्रिब्यूट के साथ लिंक बनाया जा सके.

लिंक और JavaScript

यह links एट्रिब्यूट, ऐसे HTMLCollection मिलते-जुलते a और area एलिमेंट दिखाता है जिनमें href एट्रिब्यूट मौजूद हो.

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

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

आपने जो सीखा है उसकी जांच करें

लिंक के बारे में अपनी जानकारी की जांच करें.

nofollow लिंक क्या करता है?

लिंक को क्लिक करने लायक नहीं बनाता.

फिर से कोशिश करें.

स्पाइडर को लिंक फ़ॉलो न करने के लिए कहता है.

सही जवाब!

साइट पर आपकी विज़िट ट्रैक नहीं की जा सकती.

फिर से कोशिश करें.

कौनसे लिंक आपको पेज के सबसे ऊपर ले जाएंगे?

#start

फिर से कोशिश करें.

#

सही जवाब!

#top

सही जवाब!