What are Links?
Links are clickable text or images that take you from one page to another.
The
"a" stands for "anchor" (like a ship's anchor that connects to something)
Without
hrefattribute, it's just plain text
What is
The target attribute tells the browser where to open the link.
ALL Target Values Explained:
Target Value | What it does | When to use | Example |
|---|---|---|---|
| Opens in new tab | External links (Google, YouTube, other websites) |
|
| Opens in same tab | Internal links (your own pages) |
|
| Opens in parent frame | When page is inside an iframe |
|
| Opens in full window | To break out of iframes |
|
| Opens in specific iframe | When you have named iframes |
|
Complete Link Examples with ALL Targets:
1<!-- 1. target="_blank" - Opens in NEW TAB (MOST COMMON for external links) -->
2<a href="https://dtechinnovations.in" target="_blank" rel="noopener noreferrer">DTeh Innovations (New Tab)</a>
3
4<!-- 2. target="_self" - Opens in SAME TAB (DEFAULT - you don't need to write it) -->
5<a href="about.html" target="_self">About Us (Same Tab)</a>
6<!-- Or simply (same thing): -->
7<a href="about.html">About Us</a>
8
9<!-- 3. target="_parent" - Opens in PARENT FRAME (for iframes) -->
10<!-- If your page is inside an iframe, this opens link in the parent frame -->
11<a href="https://example.com" target="_parent">Open in Parent Frame</a>
12
13<!-- 4. target="_top" - Opens in FULL WINDOW (breaks out of iframes) -->
14<!-- If your page is inside an iframe, this opens link in full browser window -->
15<a href="https://example.com" target="_top">Open in Full Window</a>
16
17<!-- 5. target="framename" - Opens in SPECIFIC IFRAME -->
18<!-- First, create an iframe with a name -->
19<iframe name="myFrame" src="page1.html" width="600" height="400"></iframe>
20<!-- Then, link to that iframe -->
21<a href="page2.html" target="myFrame">Load page2 in the iframe above</a>
22
23<!-- Other link types (can use any target) -->
24<a href="#contact" target="_self">Jump to Contact Section (Same Page)</a>
25<a href="mailto:me@example.com" target="_blank">Email Me (New Tab)</a>
26<a href="tel:+911234567890" target="_self">Call Us (Same Tab)</a>
27<a href="resume.pdf" download target="_blank">Download Resume (New Tab)</a>Why
Security reason: Without rel="noopener", the new page can control your page (change location, inject code).
Privacy reason: Without rel="noreferrer", the other website can see that you came from your site.
Complete safe external link:
1<a href="https://othersite.com" target="_blank" rel="noopener noreferrer">Safe External Link</a>All Link Types (without target):
1<!-- External website -->
2<a href="https://google.com">Google</a>
3
4<!-- Internal page -->
5<a href="about.html">About Us</a>
6
7<!-- Jump to section on same page -->
8<a href="#contact">Go to Contact</a>
9<h2 id="contact">Contact Us</h2>
10
11<!-- Email -->
12<a href="mailto:me@example.com">Send Email</a>
13
14<!-- Phone -->
15<a href="tel:+911234567890">Call Us</a>
16
17<!-- Download -->
18<a href="resume.pdf" download>Download Resume</a>SECURITY TIP: Always use
rel="noopener noreferrer"withtarget="_blank"for external links!