HTML के पहले कदम - पाठ 4 - लिंक (हाइपरलिंक)

10/10/2025, by Ivan

हम अब HTML की सबसे मूलभूत चीज़ — यानी हाइपरलिंक्स (या सरल शब्दों में लिंक) — तक पहुँच गए हैं। लिंक विभिन्न दस्तावेज़ों के बीच संबंध स्थापित करने का एक तरीका हैं। मान लीजिए आपके पास 100000 टेक्स्ट फाइलें हैं। यदि आप उनके लिए श्रेणियाँ (categories) बनाएँ, और हर श्रेणी में 200 दस्तावेज़ हों, तो आपको लगभग 500 श्रेणियों की आवश्यकता होगी। इन 500 श्रेणियों को ब्राउज़ करने और आवश्यक जानकारी खोजने में बहुत समय लगेगा। ऐसे में लिंक हमारी ज़िंदगी को आसान बना देते हैं।

लिंक दो HTML दस्तावेज़ों को एक-दूसरे से जोड़ते हैं। हर HTML दस्तावेज़ का एक नाम (यानी यूनिक एड्रेस) होता है, जिससे हम एक पेज से दूसरे पेजों पर जा सकते हैं — उदाहरण के लिए, किसी पेज से 10 अन्य संबंधित पेजों पर। इससे आवश्यक जानकारी तक पहुँचने की संभावना बढ़ जाती है।

इंटरनेट पर भी यही सिद्धांत लागू होता है। वेबसाइट के प्रत्येक पृष्ठ का एक अद्वितीय नाम होता है जिसे URL (Uniform Resource Locator) कहा जाता है — यानी संसाधन का पता। जिस पेज पर आप लिंक बनाना चाहते हैं, उसका पता <a></a> टैग के href गुण में लिखा जाता है। इसका सामान्य रूप इस प्रकार है:

<a href="unique_path">लिंक का पाठ</a>

यहाँ href <a> टैग का एक गुण (attribute) है। पिछले पाठ में हमने गुणों के बारे में चर्चा की थी। अब चलिए उसी फ़ोल्डर में, जहाँ आपका index.html है, एक नई फ़ाइल बनाएँ जिसका नाम रखें file.html और उसमें निम्न कोड लिखें:

<html>
  <head>
    <title>मेरा दूसरा HTML दस्तावेज़</title>
  </head>
  <body>   
    <h1>मेरा दूसरा HTML दस्तावेज़</h1>
  </body>
</html>

अब index.html में यह कोड जोड़ें:

<html>
  <head>
    <title>मेरा पहला HTML दस्तावेज़</title>
  </head>
  <body>   
    <h1>मेरा पहला HTML दस्तावेज़</h1>
    <p>
      <a href="file.html">दूसरे दस्तावेज़ का लिंक</a>
    </p>
  </body>
</html>

अब जब आप index.html को ब्राउज़र में खोलेंगे, तो आपको एक लिंक दिखाई देगा जो file.html पेज पर ले जाएगा। अब हम लिंक के पथ (path) लिखने का अभ्यास करेंगे। जब दोनों फाइलें एक ही फ़ोल्डर में होती हैं, तो हमें केवल फ़ाइल का नाम लिखना होता है। लेकिन अगर हम फाइलों को अलग-अलग फ़ोल्डरों में रखें, तो हमें सापेक्ष पथ (relative path) का उपयोग करना होगा।

सापेक्ष पथ (Relative Paths)

सापेक्ष पथ इसलिए कहलाते हैं क्योंकि वे वर्तमान फाइल की स्थिति के सापेक्ष निर्धारित होते हैं। चलिए एक फ़ोल्डर files बनाते हैं और उसमें file.html को रखते हैं। अब यदि हम index.html में पुराने लिंक से जाएँ, तो ब्राउज़र file.html को नहीं ढूंढ पाएगा, क्योंकि अब वह एक अलग फ़ोल्डर में है।

किसी फ़ोल्डर को दर्शाने के लिए स्लैश / का प्रयोग किया जाता है। उदाहरण:

/Program Files/MSOffice/

पथ की शुरुआत दर्शाने के लिए हम ./ (डॉट-स्लैश) लिखते हैं। इस प्रकार files फ़ोल्डर तक पहुँचने का पथ इस तरह होगा:

./files/

अब इसके अंत में फ़ाइल का नाम जोड़ते हैं:

./files/file.html

तो अब हम index.html में पथ को इस प्रकार लिखेंगे:

<html>
  <head>
    <title>मेरा पहला HTML दस्तावेज़</title>
  </head>
  <body>   
    <h1>मेरा पहला HTML दस्तावेज़</h1>
    <p>
      <a href="./files/file.html">दूसरे दस्तावेज़ का लिंक</a>
    </p>
  </body>
</html>

अब दस्तावेज़ को सेव करें और ब्राउज़र में पेज को रिफ्रेश करें। लिंक फिर से काम करने लगेगा। आप चाहें तो इसे इस तरह भी लिख सकते हैं:

<a href="files/file.html">दूसरे दस्तावेज़ का लिंक</a>

यह भी ठीक काम करेगा। लेकिन अगर आप पथ की शुरुआत / से करते हैं:

<a href="/files/file.html">दूसरे दस्तावेज़ का लिंक</a>

तो यह एक पूर्ण (absolute) पथ होगा, और अब यह index.html के सापेक्ष नहीं रहेगा।

वापसी लिंक (Back Link)

अब हम file.html से index.html पर लौटने के लिए लिंक बनाएँगे। सापेक्ष पथ दर्शाने के लिए हम ./ से शुरू करते हैं, और एक स्तर ऊपर जाने के लिए ../ लिखते हैं:

./../

अब इसके बाद फ़ाइल का नाम जोड़ते हैं:

./../index.html

इस पथ को अब हम file.html में जोड़ते हैं:

<html>
  <head>
    <title>मेरा दूसरा HTML दस्तावेज़</title>
  </head>
  <body>   
    <h1>मेरा दूसरा HTML दस्तावेज़</h1>
    <p>
      <a href="./../index.html">पहले दस्तावेज़ का लिंक</a>
    </p>
  </body>
</html>

अब आप दोनों पेजों के बीच आगे-पीछे जा सकते हैं और ब्राउज़र के एड्रेस बार में URL बदलते देख सकते हैं।

पूर्ण पथ (Absolute Paths)

पूर्ण पथ वेबसाइटों पर उपयोग किए जाते हैं। उदाहरण के लिए, Drupal जैसे CMS में सभी पृष्ठ एक ही index.php से लोड होते हैं। ऐसे मामलों में / साइट के मूल (root) से पथ को दर्शाता है। जब आप स्थानीय (local) कंप्यूटर पर काम करते हैं, तो यह आपके ड्राइव के मूल फ़ोल्डर से शुरू होता है।

पूर्ण पथ आमतौर पर इस प्रकार दिखते हैं:

/index.html

/files/file.html

/files2/file2.html

इस प्रकार, यदि आप index.html और file.html दोनों से file2.html पर लिंक करना चाहें, तो दोनों में एक जैसा कोड होगा:

<a href="/files2/file2.html">लिंक</a>

target गुण

target गुण यह निर्धारित करता है कि लिंक किस प्रकार खुलेगा:

_blank — नए टैब या विंडो में;
_self — उसी टैब में (डिफ़ॉल्ट व्यवहार);
_parent — पैरेंट फ्रेम में (पुराने फ्रेम उपयोग के लिए);
_top — पूरे ब्राउज़र विंडो में।

आमतौर पर हम केवल _blank का उपयोग करते हैं:

<a href="/files2/file2.html" target="_blank">लिंक</a>

rel गुण

rel गुण वर्तमान दस्तावेज़ और लिंक किए गए दस्तावेज़ के बीच संबंध को दर्शाता है। इसका सबसे सामान्य मान है rel="nofollow", जो सर्च इंजनों (Google, Yandex आदि) को लिंक को इंडेक्स न करने का निर्देश देता है।

उदाहरण के लिए, यदि आप किसी बाहरी वेबसाइट पर लिंक दे रहे हैं, तो आप उसे इस तरह लिख सकते हैं:

<a href="/files2/file2.html" target="_blank" rel="nofollow">लिंक</a>

एक्स्ट्रा ब्लॉक टाइप्स (EBT) - नया लेआउट बिल्डर अनुभव❗

❗एक्स्ट्रा पैराग्राफ टाइप्स (EPT) - नया पैराग्राफ्स अनुभव