INSTACK 360

6. Links & Navigation Mastery

Internet ka base 'Hyperlinks' hain. Relative/Absolute routing, targets, aur action links ke logic ko samjhein.

Intermediate 5 min read

1. Anchor Tag (a) - Web Ka Core

Basic: Ek page se dusre page tak jane ke liye <a href="link"> use hota hai.

Pro: Web ki poori philosophy hi 'Hyperlinking' par based hai. Google ka PageRank algorithm poori tarah anchors (backlinks) ko measure karke chalta hai. Agar kisi site mein anchors properly internally linked nahi hain (Orphan pages), toh crawlers unhe kabhi index nahi kar payenge.

2. Absolute vs Relative Routing Strategies

Pro:
Absolute URL (https://api.site.com/auth): External resources ko link karte waqt protocol (http/https) aur domain zaruri hai. DNS resolution requires hoti hai.
Relative URL: Internal pages linking mein best practice hai. Agar aap leading slash use karte hain (href="/about"), browser use Root domain se count karta hai. Bina slash ke (href="about"), current URL path se aage append karta hai. Yeh difference SPA routing (React Router) mein bohot errors deta hai agar concept clear na ho.

3. Target Attribute & Security Fix (Tabnabbing)

Basic: target="_blank" se link ek naye (new) tab mein khulta hai.

Pro: Pehle, jab aap kisi untrusted site ko new tab mein kholte the, toh naya tab background mein chal rahe purane tab ko window.opener.location JS ka use karke kisi phishing site par redirect kar sakta tha. Ise Reverse Tabnabbing attack kehte the. Isliye hamesha rel="noopener noreferrer" attribute sath lagana ek professional security practice ban gayi. (Though modern browsers ab implicitly isey block karte hain).

4. Action Links: Call, Mail, Download

  • href="mailto:info@site.com?subject=Inquiry&body=Hi": Email client default details ke sath open karta hai.
  • href="tel:+919876543210": Mobile devices par dialer trigger karta hai. User experience (UX) ke liye bohot zaruri.
  • href="invoice.pdf" download="MyBill.pdf": File ko open karne ki bajaye seedha client system mein download karta hai, aur uska default file name set karta hai.

5. Internal Hashes (Bookmark Routing)

Pro: Kisi lambe webpage ke bottom section par upar se jump karna ho toh: href="#section-id". URL mein hash add hone par page reload nahi hota, DOM wahan scroll karta hai jahan us ID ka element maujood ho. Single Page Applications (SPAs) initially isi Hash Routing technique se page badalte the.