🟢 Foundation · Lesson 09
Links – Anchor Tag
Links – Anchor Tag
The Anchor Tag — the tag that makes the web a "web"
<a href="https://codekafunda.in">Visit CodeKaFunda</a>
│ │ │
tag destination (href) clickable textVisit CodeKaFunda ← blue, underlined, cursor becomes a hand
Without links, every page would be an island — you would type a full address for every single page. The anchor tag is the bridge between islands; the "web" in World Wide Web literally means pages woven together by these links.
a = anchor, href = hypertext reference (the destination).Internal vs External Links
<!-- EXTERNAL: full URL with https:// - goes to another website -->
<a href="https://www.google.com">Google</a>
<!-- INTERNAL: just the path - stays on YOUR site -->
<a href="about.html">About Us</a> (same folder)
<a href="/tutorial/html/">HTML Tutorial</a> (from site root)
<a href="images/gallery.html">Gallery</a> (inside a subfolder)| Internal | External | |
|---|---|---|
| href looks like | about.html, /contact/ | https://site.com/... |
| Goes to | Your own pages | Another website |
| SEO role | Spreads ranking within your site | Cites sources, builds trust |
The paths chapter (coming soon in this course) covers relative vs absolute paths deeply — for now: no https:// = staying home; https:// = leaving the site.
Opening in a New Tab — and the security rule
<a href="https://youtube.com" target="_blank" rel="noopener">
Watch on YouTube
</a>target="_blank"→ opens in a new tab; your page stays open behind it.rel="noopener"→ the security seatbelt: without it, the new page gets a JavaScript handle back to YOUR page (window.opener) and a malicious site can redirect your tab to a fake login page (called tabnabbing).
Professional rule: target="_blank" and rel="noopener" always travel together. When to use _blank at all? External sites and PDFs — yes (don't lose your visitor); your own internal pages — no (multiple tabs of the same site annoy users).
mailto, tel and Bookmark Links
<!-- Opens the email app with address pre-filled -->
<a href="mailto:info@codekafunda.in">Email Us</a>
<!-- On mobile: starts dialing! Perfect for school/business sites -->
<a href="tel:+919876543210">Call: 98765 43210</a>
<!-- BOOKMARK: jump to a section on the SAME page -->
<h2 id="fees">Fee Structure</h2> ← the target has an id
<a href="#fees">Jump to Fees</a> ← # + that id
<!-- Bookmark on ANOTHER page -->
<a href="admission.html#documents">Required Documents</a>Bookmark links power every "Table of Contents" you have ever clicked — including the one on THIS page (look left/up: those chapter links are all
href="#id" jumps). The pattern: give the destination an id, link to it with #.Image as a Link
<a href="/">
<img src="logo.png" alt="CodeKaFunda home">
</a>Wrap an <img> inside <a> — the whole image becomes clickable. This is exactly how every website's top-left logo takes you back to the homepage. Anything between <a> and </a> becomes clickable: text, images, even a whole card.
Exam Corner
Q: Full form of href? Hypertext reference.
Q: How to open a link in a new tab?
Q: Link that jumps to a section on the same page? Give the section
Q: What does href="#" alone do? Jumps to the top of the page — often used as a placeholder during development.
Q: Make a phone number dialable on mobile?
Q: How to open a link in a new tab?
target="_blank" — and add rel="noopener" for security.Q: Link that jumps to a section on the same page? Give the section
id="x", link with href="#x".Q: What does href="#" alone do? Jumps to the top of the page — often used as a placeholder during development.
Q: Make a phone number dialable on mobile?
<a href="tel:+91...">.
Anchor Tag — वह tag जो web को "web" बनाता है
<a href="https://codekafunda.in">Visit CodeKaFunda</a>
│ │ │
tag destination (href) clickable textVisit CodeKaFunda ← नीला, underline, cursor हाथ बन जाता है
Links न होते तो हर page एक टापू होता — हर page का पूरा address type करना पड़ता. Anchor tag टापुओं के बीच का पुल है; World Wide Web का "web" का मतलब ही है इन links से बुने हुए pages.
a = anchor, href = hypertext reference (मंज़िल).Internal vs External Links
<!-- EXTERNAL: https:// wala poora URL - doosri website par jata hai -->
<a href="https://www.google.com">Google</a>
<!-- INTERNAL: sirf path - AAPKI site par hi rehta hai -->
<a href="about.html">About Us</a> (same folder)
<a href="/tutorial/html/">HTML Tutorial</a> (site root se)
<a href="images/gallery.html">Gallery</a> (subfolder ke andar)| Internal | External | |
|---|---|---|
| href दिखता है | about.html, /contact/ | https://site.com/... |
| जाता है | आपके अपने pages पर | दूसरी website पर |
| SEO role | आपकी site के अंदर ranking बांटता है | Sources cite करता है, trust बनाता है |
Paths वाला chapter (इसी course में आगे) relative vs absolute गहराई से समझाएगा — अभी के लिए: https:// नहीं = घर में ही; https:// = site से बाहर.
नए Tab में खोलना — और security rule
<a href="https://youtube.com" target="_blank" rel="noopener">
Watch on YouTube
</a>target="_blank"→ नए tab में खुलता है; आपका page पीछे खुला रहता है.rel="noopener"→ security की seatbelt: इसके बिना नए page को आपके page का JavaScript handle (window.opener) मिल जाता है और malicious site आपके tab को नकली login page पर redirect कर सकती है (इसे tabnabbing कहते हैं).
Professional rule: target="_blank" और rel="noopener" हमेशा साथ चलते हैं. _blank कब लगाएं? External sites और PDFs — हां (visitor खोइए मत); अपने internal pages — नहीं (एक ही site के कई tabs users को चिढ़ाते हैं).
mailto, tel और Bookmark Links
<!-- Email app khulti hai, address pehle se bhara hua -->
<a href="mailto:info@codekafunda.in">Email Us</a>
<!-- Mobile par: dial hone lagta hai! School/business sites ke liye perfect -->
<a href="tel:+919876543210">Call: 98765 43210</a>
<!-- BOOKMARK: USI page ke kisi section par jump -->
<h2 id="fees">Fee Structure</h2> ← target ke paas id
<a href="#fees">Jump to Fees</a> ← # + wahi id
<!-- DOOSRE page ka bookmark -->
<a href="admission.html#documents">Required Documents</a>Bookmark links ही हर "Table of Contents" चलाते हैं जिस पर आपने कभी click किया — इस page वाला भी (बाएं/ऊपर देखिए: वे chapter links सब
href="#id" jumps हैं). Pattern: मंज़िल को id दीजिए, # से link कीजिए.Image को Link बनाना
<a href="/">
<img src="logo.png" alt="CodeKaFunda home">
</a><img> को <a> के अंदर लपेटिए — पूरी image clickable हो जाती है. हर website का top-left logo homepage पर ऐसे ही ले जाता है. <a> और </a> के बीच जो भी है, clickable बनता है: text, images, यहां तक कि पूरा card.
Exam Corner
Q: href की full form? Hypertext reference.
Q: Link नए tab में कैसे खोलें?
Q: उसी page के section पर jump करने वाला link? Section को
Q: अकेला href="#" क्या करता है? Page के top पर jump — development के दौरान अक्सर placeholder की तरह use होता है.
Q: Mobile पर phone number dial होने लायक कैसे बनाएं?
Q: Link नए tab में कैसे खोलें?
target="_blank" — और security के लिए rel="noopener" जोड़िए.Q: उसी page के section पर jump करने वाला link? Section को
id="x" दीजिए, href="#x" से link कीजिए.Q: अकेला href="#" क्या करता है? Page के top पर jump — development के दौरान अक्सर placeholder की तरह use होता है.
Q: Mobile पर phone number dial होने लायक कैसे बनाएं?
<a href="tel:+91...">.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.