लिंक

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

एचटीएमएल एलिमेंट पर लेबल किए गए ओपनिंग टैग, एट्रिब्यूट, और क्लोज़िंग टैग.

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

टिम बर्नर्स-ली ने अगस्त 1991 में, वेब और <a> टैग के बारे में पहली बार बताया था. तब से, वेब और <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:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

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

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

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

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

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

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

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"] का इस्तेमाल, ऐप्लिकेशन टाइप के हिसाब से स्टाइल को टारगेट करने के लिए किया जा सकता है.

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

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

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

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

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

अगर आपको स्पाइडर को लिंक फ़ॉलो करने की अनुमति नहीं देनी है, तो 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 एलिमेंट का इस्तेमाल एसवीजी में भी किया जा सकता है. इससे 'href' या 'xlink:href' एट्रिब्यूट के साथ लिंक बनता है.

links एट्रिब्यूट, a और area एलिमेंट से मैच करने वाला HTMLCollection दिखाता है. साथ ही, यह 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
सही!