Links: Hyperlinks and Navigation in HTML

World Wide Web (WWW) का "Web" शब्द इसी concept पर बना है कि pages एक दूसरे से interconnected (जुड़े हुए) हैं। एक webpage से दूसरे webpage पर जाने के process को Navigation कहते हैं, और जो element यह काम करता है उसे Hyperlink कहते हैं।

HTML में Links create करना सबसे powerful feature है। अगर links न हों, तो user को हर page का URL browser के address bar में manually type करना पड़ेगा, जो कि practically impossible है।

1. The Anchor Tag (<a>)

HTML में Links create करने के लिए हम Anchor Tag यानी <a> tag का use करते हैं।

• Concept: इसे "Anchor" इसलिए कहते हैं क्योंकि यह page के अंदर specific content पर "anchor" (लंगर) डालने जैसा काम करता है जो user को एक location से दूसरी location पर connect करता है।

• Container Tag: Anchor tag एक container element है। इसका मतलब है कि इसमें Opening tag <a> और Closing tag </a> दोनों होते हैं।

• Clickable Area: <a> और </a> के बीच में जो भी content (Text या Image) लिखा जाता है, वह Clickable बन जाता है।

Basic Syntax:

HTML

<a href="url">Link Text</a>

2. The href Attribute

सिर्फ <a> tag लिखने से link create नहीं होता। Browser को यह भी बताना पड़ता है कि click करने पर user को कहाँ (Where) जाना है। यह address या destination बताने का काम href attribute करता है।

• Full Form: href का मतलब है Hypertext Reference।

• Function: यह link का destination URL hold करता है। अगर href attribute नहीं होगा, तो <a> tag click नहीं होगा और यह एक normal text की तरह behave करेगा।

Types of URLs in href:

href attribute में हम दो तरह के URLs (paths) दे सकते हैं:

A. Absolute URL:

जब हम internet पर मौजूद किसी external website का पूरा address देते हैं। इसमें protocol (http:// या https://) लिखना ज़रूरी होता है।

• Use Case: जब आप अपनी website से Google, Facebook, या Wikipedia जैसी किसी दूसरी site पर link दे रहे हों।

• Example: href="https://www.google.com"

B. Relative URL:

जब हम अपनी ही website के एक page से दूसरे page पर link देते हैं। इसमें पूरा address (https://...) लिखने की ज़रूरत नहीं होती, सिर्फ file का नाम काफी है।

• Use Case: Home page से Contact Us page पर जाने के लिए।

• Example: href="contact.html" या href="images/pic.jpg"

3. Opening Links in New Tabs (target Attribute)

Default रूप से, जब आप किसी link पर click करते हैं, तो browser उसी Same Tab (Current Window) में new page open कर देता है। इससे purana page replace हो जाता है।

लेकिन कई बार हम चाहते हैं कि user हमारी website को leave न करे और external link एक New Tab में open हो। इसके लिए हम target attribute का use करते हैं।

target attribute की values:

1. _self (Default):

   यह document को उसी window/tab में open करता है जिसमें user ने click किया है। अगर आप target attribute नहीं लिखते हैं, तो browser automatically इसे ही use करता है।

2. _blank (Most Important):

   यह document को एक New Window या New Tab में open करता है।

   • Syntax: <a href="url" target="_blank">Link Text</a>

   • Benefit: User आपकी original site पर भी रहता है और नई site भी देख लेता है।

4. Link States (Colors)

Browser links को default रूप से कुछ specific colors देता है ताकि user पहचान सके कि कौन सा link click किया जा चुका है और कौन सा नहीं।

• Unvisited Link: (जो link अभी तक click नहीं किया गया है) - यह Blue color और Underlined दिखता है।

• Visited Link: (जो link user पहले visit कर चुका है) - यह Purple color का हो जाता है।

• Active Link: (जिस moment पर link click किया जा रहा है) - यह Red color का दिखता है।

(Note: CSS का use करके हम इन colors को change कर सकते हैं, लेकिन HTML में ये default होते हैं।)

5. Other Types of Links

HTML links सिर्फ webpages के लिए नहीं होते, हम इनसे और भी काम कर सकते हैं:

A. Image as a Link (चित्र लिंक)

हम text की जगह image को भी clickable बना सकते हैं। इसके लिए <img> tag को <a> tag के अंदर nest (fit) करना होता है।

• Syntax:

HTML

<a href="https://www.google.com">
    <img src="logo.png" alt="Google Logo" width="100">
</a>

B. Email Link (mailto:)

जब आप चाहते हैं कि link पर click करते ही user का default email app (जैसे Outlook या Gmail) open हो जाए, तो mailto: का use करते हैं।

• Syntax:

HTML

<a href="mailto:support@example.com">Send Email</a>

Complete Example Code

नीचे दिए गए code में Absolute URL, Relative URL, और Target attribute का practical use दिखाया गया है।

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlinks Example</title>
</head>
<body>

    <h2>HTML Links Demo</h2>

    <p>
        Visit Google (Same Tab):
        <a href="https://www.google.com">Click here for Google</a>
    </p>

    <p>
        Visit Wikipedia (New Tab):
        <a href="https://www.wikipedia.org" target="_blank">Click here for Wikipedia</a>
    </p>

    <p>
        Go to About Page:
        <a href="about.html">About Us</a>
    </p>

    <p>Click the image below to go to Google:</p>
    <a href="https://www.google.com" target="_blank">
        <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" width="150">
    </a>

</body>
</html>

Summary Table

Attribute/Tag	Description (विवरण)
<a>	Anchor tag, used to define a hyperlink.
href	Most Important. destination address (URL) specify करता है।
target="_blank"	Link को new browser tab में open करता है।
target="_self"	Link को same tab में open करता है (Default behavior).
Link Text	वह visible text जिस पर user click करता है।

User Note: Exam में href का full form (Hypertext Reference) और target="_blank" का use case अक्सर Viva या Objective questions में पूछा जाता है।