HTML links aur navigation kisi bhi website ka ek mahatvapurn hissa hote hain. Yeh users ko ek page se dusre page tak ya kisi external website tak pahunchne ki suvidha dete hain. Links ka sahi tarike se upyog karna ek achhi user experience aur SEO ke liye bhi zaroori hota hai. Chaliye, is topic ko detail me samajhte hain.
HTML Links Kya Hote Hain?
HTML links, jinhe hyperlinks bhi kaha jata hai, ek webpage ko kisi doosre webpage ya kisi specific resource se connect karne ke liye use hote hain. Yeh website navigation ka ek important part hain, jo users ko ek page se doosre page tak le jaane me madad karte hain.
<a href="https://www.google.com">Google par jaayein</a>
Output :
Explanation:
- <a>: Anchor tag ka use link banane ke liye hota hai.
- href: Is attribute me destination URL di jati hai.
- “Google par jaayein”: Ye text clickable hoga.
Types of Links in HTML :
1. Absolute URL Links kya hote hai ?
Absolute URL links wo hote hain jo ek complete web address (full URL) provide karte hain, jisme protocol (http://
ya https://
), domain name, aur specific page ka path hota hai.
<a href="https://www.facebook.com">Facebook Visit karein</a>
2. Relative URL Links kya hote hai ?
Relative URL links wo hote hain jo ek webpage ke andar kisi doosre page ya resource ka path specify karte hain bina full website address (absolute URL) diye. Ye links sirf current website ya project ke andar work karte hain.
<a href="/about.html">About Page</a>
3. Email Links (mailto) kya hota hai ?
Email links wo special hyperlinks hote hain jo kisi bhi email client (Gmail, Outlook, Yahoo Mail, etc.) ko open karke ek naya email compose karne ke liye use kiye jate hain. Inhe HTML me <a> tag aur mailto: attribute ke saath likha jata hai.
<a href="mailto:[email protected]">Hume Email karein</a>
4. Telephone Links (tel) kya hota hai ?
Telephone links wo special links hote hain jo kisi phone number ko dial karne ke liye use kiye jate hain.
Ye links HTML me <a> tag ke saath tel: protocol ke through banaye jate hain, jo users ko directly phone number dial karne ka option dete hain.
<a href="tel:+919876543210">Call Karein</a>
Is link par click karne se phone number dial ho jayega (agar device me call feature supported ho).
Opening Links in a New Tab (target=”_blank”):
HTML me target=”_blank” attribute ka use karke aap kisi link ko naye tab me open karne ke liye specify kar sakte hain. Ye feature mainly external links ke liye use hota hai, jisse users current page ko leave kiye bina doosre page ko open kar sakein.
<a href="https://www.example.com" target="_blank">Visit Example</a>
Creating Bookmark Links (Anchor Links) kya hoti hai ?
Bookmark links ya anchor links wo special links hote hain jo page ke kisi specific section ko target karte hain.
Inhe id attribute aur anchor tag <a> ke combination se create kiya jata hai. Isse aap kisi page ke ek part ko quickly access kar sakte hain bina page ko scroll kiye.
<a href="#section1">Go to Section 1</a>
Navigation (Menu) Kya Hota Hai?
Navigation ek aise system ko kehte hain jo kisi website me pages ke beech aasani se move karne me madad karta hai. Jab aap kisi website par jaate hain, to aapko us website ke alag-alag sections ya pages tak pohonchne ke liye ek asaan aur organized system chahiye hota hai, jise navigation kaha jata hai. Ye website ki usability ko improve karta hai aur user ko ek structured aur smooth experience deta hai.
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
Explanation:
- <nav>: Navigation menu ko represent karta hai.
- <ul>: Unordered list (Bullet points) banane ke liye use hota hai.
- <li>: List item hai, jo ek ek menu option ko represent karta hai.
- <a href=””>: Har menu option ek clickable link hai jo doosre pages tak le jata hai.
Quiz: Test Your Knowledge on Links and Navigation Tags
Bonus: Practical Application!
Try Adding Links and Navigation Tags to Your Webpage Today!
Choose tags like <a>
, <nav>
, <ul>
, and <li>
, and structure your content for better navigation.