← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 9 of 26

HTML Links

कल्पना कीजिए एक library में जाना जहां सारी books अलग-अलग cages में locked हैं, और rooms को जोड़ने वाले कोई signs या doors नहीं हैं। आपको वह information कभी नहीं मिलेगी जिसकी आपको जरूरत है। HTML links इंटरनेट के hallways और doors हैं। वे अलग-अलग documents और web platforms को जोड़ते हैं, जिससे आप एक click से page से page पर कूद सकते हैं। links के बिना, World Wide Web सिर्फ isolated, unreachable islands of text होगा। Links आपको user navigation menus बनाने, users को resources download करने के लिए direct करने, या email composers को अपने आप launch करने देते हैं।

In this page:

  1. Anchor Element और Link Paths
  2. Absolute बनाम Relative Links
  3. नए Browser Tabs में Links खोलना
  4. Specific Page Sections से Link करना
  5. Local Email और Dialer Apps को Trigger करना
  6. rel Attribute
  7. Email और Phone Links
  8. download Attribute
  9. सभी Target Attribute Values समझाए गए
  10. Accessibility के लिए Skip Navigation Links
Syntax
markup 
<a href="url" target="_blank">Link text</a>

Anchor Element और Link Paths

Links World Wide Web के रास्ते बनाते हैं। HTML में, आप a (anchor) element को href (Hypertext Reference) attribute के साथ जोड़कर hyperlinks बनाते हैं, जो user के click करने पर नेविगेट होने वाला path या web address define करता है।

Note: अपने links के अंदर 'click here' जैसी generic strings के बजाय descriptive, natural text का उपयोग करें।
Warning: अगर आप href attribute को खाली छोड़ देते हैं, तो link पर click करने से browser आपके current page को reload कर सकता है, जिससे user state बिगड़ जाता है।

उदाहरण: The Anchor Element and Link Paths

markup 
<a href="https://example.com">Visit our site</a>

Absolute बनाम Relative Links

एक absolute link पूरा, secure domain address specify करता है जो किसी protocol (जैसे, https://) से शुरू होता है। एक relative link current file location के relative आपके own server पर files को target करता है, domain prefix को छोड़ते हुए।

Note: internal files के लिए relative paths का उपयोग करें ताकि अगर आप अपना root domain name बदलें तो भी आपके pages काम करते रहें।
Warning: किसी external absolute link पर protocol (https://) भूल जाने से browser उस file को आपके local server पर ढूंढेगा, जिसके परिणामस्वरूप 404 page error होगा।

उदाहरण: Absolute vs. Relative Links

markup 
<a href="https://example.com/page.html">Absolute link</a>
<a href="page.html">Relative link</a>

नए Browser Tabs में Links खोलना

By default, ब्राउज़र links को उसी active window में load करते हैं। आप target="_blank" attribute का उपयोग करके links को force कर सकते हैं कि वे एक नए tab में खुलें। यह users को navigating away के दौरान आपके active tool page पर अपनी जगह खोने से बचाता है।

Note:
  • अपनी site को tab-nabbing security risks से बचाने के लिए हमेशा target="_blank" को rel="noopener noreferrer" के साथ जोड़ें।
  • Accepted values:
  • target — _self | _blank | _parent | _top | named browsing context
  • _blank के साथ rel="noopener noreferrer" की सलाह दी जाती है
Warning: target="_blank" का overuse न करें क्योंकि endless tabs launch करने से आपके user का tab strip clutter हो सकता है और navigation speed कम हो सकती है।

उदाहरण: Opening Links in New Browser Tabs

markup 
<a href="https://example.com" target="_blank">Opens in a new tab</a>

Specific Page Sections से Link करना

अगर आपका webpage लंबा है, तो आप ऐसे links बना सकते हैं जो सीधे उसी page के specific sections पर jump करें। ऐसा करने के लिए आप अपने href link के अंदर destination element के ID attribute को target करते हैं, जो hash symbol (#) से prefixed होता है।

Note: अपने page को destination पर अचानक jump करने के बजाय आराम से slide कराने के लिए scroll-behavior: smooth; CSS property का उपयोग करें।
Warning: सुनिश्चित करें कि आपके target element का ID link hash reference से बिल्कुल मेल खाता हो, क्योंकि IDs highly case-sensitive होते हैं।

उदाहरण: Linking to Specific Page Sections

markup 
<a href="#section2">Jump to Section 2</a>
<h2 id="section2">Section 2</h2>

Local Email और Dialer Apps को Trigger करना

Links सिर्फ pages navigate करने से कहीं ज़्यादा कर सकते हैं।

अपने href को mailto: या tel: जैसे special protocols से prefix करके, आप user के operating system को उसका local mail application या mobile phone dialer preset contact data के साथ सीधे launch करने का निर्देश दे सकते हैं।

Note:
  • आप path में query strings जोड़कर अपने mailto links के अंदर subject lines को pre-fill कर सकते हैं।
  • Accepted values:
  • mailto:address — mail client खोलता है; optional ?subject=, &cc=, &bcc=, &body=
  • tel:+number — dialer खोलता है
  • sms:number — messaging app खोलता है
Warning: Mailto links उन computers पर कभी-कभी blank browser screens trigger कर सकते हैं जिनमें default email client set up नहीं है।

उदाहरण: Triggering Local Email and Dialer Apps

markup 
<a href="mailto:[email protected]">Email us</a>
<a href="tel:+15551234567">Call us</a>

rel Attribute

rel attribute आपके page और linked page के बीच के relationship का वर्णन करता है। यह SEO और security के लिए महत्वपूर्ण है, खासकर external sites को link करते समय।

Note:
  • security vulnerabilities को रोकने के लिए target=_blank उपयोग करते समय हमेशा rel=noopener जोड़ें।
  • Accepted values:
  • rel — noopener | noreferrer | nofollow | external | ugc | sponsored | author | bookmark | help | license | next | prev | tag
  • कई tokens space-separated होते हैं
Warning: noopener के बिना, आपके page द्वारा खोले गए नए tab के पास JavaScript के जरिए आपके page को access और manipulate करने की क्षमता होती है।

उदाहरण: The rel Attribute

markup 
<a href="https://example.com" rel="noopener">External link</a>

Email और Phone Links

HTML links सिर्फ web pages के लिए नहीं हैं। आप special URL schemes का उपयोग करके ऐसे links बना सकते हैं जो user के email app को खोलें या सीधे कोई phone number dial करें।

Note:
  • Phone links खासकर mobile पर उपयोगी हैं जहां users सीधे call करने के लिए tap कर सकते हैं।
  • Accepted values:
  • mailto:address — mail client खोलता है; optional ?subject=, &cc=, &bcc=, &body=
  • tel:+number — dialer खोलता है
  • sms:number — messaging app खोलता है
Warning: mailto links आपके email address को spam bots के सामने expose करते हैं — इसके बजाय एक contact form का उपयोग करने पर विचार करें।

उदाहरण: Email and Phone Links

markup 
<a href="mailto:[email protected]">Send email</a>
<a href="tel:+15551234567">Call now</a>

download Attribute

download attribute ब्राउज़र को किसी linked file को navigate करने या नए tab में खोलने के बजाय download करने का निर्देश देता है। आप downloaded file को server पर मौजूद original file name से अलग एक custom name भी दे सकते हैं।

Note:
  • download attribute सिर्फ same-origin links के लिए reliably काम करता है — cross-origin downloads server headers के आधार पर फिर भी सिर्फ ब्राउज़र में खुल सकते हैं।
  • Accepted values:
  • download — boolean (कोई value नहीं) या एक suggested filename
  • सिर्फ same-origin URLs, blob: और data: URLs के लिए काम करता है
Warning: download pages के links पर काम नहीं करता, केवल PDFs, images, या zip archives जैसी actual files पर काम करता है।

उदाहरण: The download Attribute

markup 
<a href="report.pdf" download="annual-report.pdf">Download report</a>

सभी Target Attribute Values समझाए गए

target attribute नियंत्रित करता है कि कोई linked page कहां खुलता है। _blank एक नया tab खोलता है, _self (default) उसी tab में खुलता है, _parent अगर page किसी iframe के अंदर है तो parent frame में खुलता है, और _top पूरा browser window खोलने के लिए सभी frames से बाहर निकल जाता है।

Note:
  • target="toolFrame" जैसे named targets कई links को एक ही specific iframe में खोलने देते हैं, जो tabbed interfaces के लिए उपयोगी है।
  • Accepted values:
  • _self — same browsing context (default)
  • _blank — नया tab या window
  • _parent — parent browsing context
  • _top — top-level browsing context
  • name — iframe name जैसा named browsing context
Warning: _parent और _top तभी matter करते हैं जब आपका page frames या iframes के अंदर embedded हो — उस context के बाहर वे _self जैसा ही व्यवहार करते हैं।

उदाहरण: All Target Attribute Values Explained

markup 
<a href="page.html" target="_blank">_blank: new tab</a>
<a href="page.html" target="_self">_self: same tab</a>
<a href="page.html" target="_parent">_parent: parent frame</a>
<a href="page.html" target="_top">_top: full window</a>

Accessibility के लिए Skip Navigation Links

एक skip link page के बिल्कुल ऊपर एक hidden link है जो keyboard से focus करने पर दिखाई देने लगता है, जिससे users पूरे navigation menu में tab किए बिना सीधे main content पर jump कर सकते हैं।

यह एक छोटा सा addition है जो keyboard और screen reader users के लिए accessibility में बहुत बड़ा अंतर लाता है।

Note: skip link को default रूप से visually hidden रखें, लेकिन जब उसे keyboard focus मिले तो उसे स्पष्ट रूप से दिखाएं।
Warning: एक skip link जो display:none से hidden है, off-screen technique के बजाय, keyboard से बिल्कुल भी पहुंचा नहीं जा सकेगा — screen readers और keyboards display:none elements पर focus नहीं कर सकते।

उदाहरण: Skip Navigation Links for Accessibility

markup 
<a href="#main-content" style="position: absolute; left: -9999px;">
  Skip to main content
</a>
<main id="main-content">Main content</main>
Live Example
Related Topics

HTML CSS · HTML Images · HTML Colors · HTML RGB Colors

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML CSS Next Lesson → HTML Link Colors

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.