HTML Anchor Tag () क्या है और इसका उपयोग कैसे करें?

Web development सीखते समय जो सबसे पहला magic आप experience करते हैं, वह है एक page से दूसरे page पर navigate करना। Web पर billions of pages एक-दूसरे से connected हैं, और इस पूरे network (World Wide Web) को जोड़ने वाली सबसे बुनियादी चीज़ है Hyperlink। HTML में इन links को बनाने का काम Anchor Element करता है, जिसे tag से दर्शाया जाता है। अगर आप सोच रहे हैं कि HTML Anchor Tag क्या है, तो यह बेसिक building block है जो पूरे इंटरनेट को आपस में कनेक्ट करता है।

Vivaa Technologies में हम अपने beginner students को हमेशा समझाते हैं कि semantic HTML और सही attributes की नॉलेज होना एक skilled frontend developer बनने की पहली सीढ़ी है। आज के इस guide में हम HTML Anchor Tag की basic working से लेकर इसके मुख्य attributes को detail में समझेंगे।

HTML Anchor Tag क्या है?

HTML Anchor Tag एक ऐसा HTML tag है जो एक web page को किसी दूसरे web page, file, email address या किसी specific section से link करने के लिए use किया जाता है। जब कोई user इस link पर click करता है, तो browser उसे destination location पर ले जाता है।

इसका basic syntax कुछ इस प्रकार दिखता है:

HTML

Click Here to Visit

यहाँ href एक मुख्य attribute है, जिसके बिना HTML Anchor Tag अधूरा रहता है।

Anchor Tag के प्रमुख Attributes

HTML Anchor Tag को अधिक powerful और controllable बनाने के लिए हम विभिन्न attributes का use करते हैं। आइए उनके बारे में जानते हैं:

1. href Attribute (Hypertext Reference)

यह attribute decide करता है कि link पर click करने के बाद user को कहाँ भेजा जाएगा।

• External Links: जब आप किसी दूसरी website का पूरा URL देते हैं, जैसे href="[https://www.google.com](https://www.google.com)"

• Relative Links: जब आप अपनी ही website के किसी दूसरे page को जोड़ते हैं, जैसे href="/about.html"

• Anchor Links (Page Jump): जब आप उसी same page के किसी section पर jump करना चाहते हैं, जैसे href="#contact"

2. target Attribute

यह decide करता है कि linked document कहाँ खुलेगा।

• target="_self": यह default value है, जो link को उसी browser tab में खोलती है।

• target="_blank": यह link को एक नए browser tab या window में खोलती है।

जब भी आप target="_blank" का use करें, तो security reasons से rel="noopener noreferrer" का use करना best practice माना जाता है।

HTML

Visit External Site

3. download Attribute

यदि आप चाहते हैं कि किसी link पर click करने पर file browser में खुलने के बजाय user के computer पर download हो जाए, तो download attribute का use किया जाता है।

HTML

Download Resume

4. mailto: और tel: Special Links

HTML Anchor Tag से आप सीधे email भेजने या phone call करने की facility भी दे सकते हैं:

• Email Link: Send Email

• Phone Link: Call Us

SEO और Accessibility के लिए Best Practices

एक developer के तौर पर आपको यह ध्यान रखना चाहिए कि HTML Anchor Tag का use सही तरीके से किया जाए:

• Descriptive Link Text: कभी भी link text में केवल "Click Here" न लिखें। इसके बजाय meaningful words चुनें, जैसे "Download Full Stack Syllabus"।

• Use Buttons for Actions: केवल navigation के लिए tag का use करें। अगर कोई form submit करना हो या JavaScript action perform करना हो, तो tag का use करें।

Conclusion

HTML Anchor Tag छोटा ज़रूर दिखता है, लेकिन यह पूरे web ecosystem को आपस में जोड़े रखने का मुख्य pillar है। सही तरीके से tag का use करने से आपकी website का user experience और SEO ranking दोनों बेहतर होते हैं।

अगर आप web development के ऐसे ही core concepts को basic से लेकर advanced level तक practical projects के साथ सीखना चाहते हैं, तो Vivaa Technologies के MERN Stack और Full-Stack Development programs में आज ही join करें।