MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Welcome back! In the previous lesson, you learned how to connect web pages using the <a> (anchor) tag.
Now, imagine this real-life scenario:
A student is reading your school's website to prepare for their upcoming final exams. In your notes, you provide a helpful link to the official CBSE Board Exam Sample Papers.
When the student clicks that link:
Wouldn't it be so much better if clicking the link opened a brand new tab in their browser, keeping your school website safely open right behind it?
That is exactly what the target attribute does! But opening new tabs also has a sneaky cyber security risk that every young programmer must know how to defend against. Let's learn both!
target Attribute 🎯The target attribute tells the browser where the linked webpage should be displayed when clicked.
There are four official values you can give to the target attribute:
| Target Value | Where It Opens | When Should You Use It? |
|---|---|---|
_blank | In a brand new browser tab or window. | External websites, user manuals, and documents you want users to view without leaving your site. |
_self | In the same tab (replaces current page). | Internal pages of your own website (Default behavior if you omit target). |
_parent | In the parent frame. | Used when working with embedded web boxes (<iframe>). |
_top | In the full, top-level body of the window. | Used to break out of nested frames or embed boxes completely. |
target="_blank" vs target="_self"target="_blank" (The New Tab Superpower 🆕)When you add target="_blank", clicking the link leaves your current tab untouched and pops open a fresh new tab:
target="_self" (The Same Tab Default 🔄)By default, all links act as target="_self" even if you don't write it:
about.html, contact.html), let them open in the same tab (_self). Opening 20 new tabs for your own pages annoys visitors!
- For external websites (like Wikipedia, YouTube, or government portals), always open them in a new tab (_blank).Now, here is a secret that many amateur web developers don't know: Opening links in new tabs without precautions can expose your visitors to cyber hackers!
Imagine you are sitting in your school classroom studying quietly. You send a friend out into the hallway to fetch a library book from another building.
But while opening the door, you accidentally hand your friend a duplicate master key to your classroom!
While your friend is away, an imposter sneakily uses that master key to walk into your classroom, picks up your real notebook, and swaps it with a fake lookalike notebook designed to steal your secrets!
In web browsers, when you open an external website using target="_blank" alone:
The new tab secretly gains a digital bridge back to your original page through a JavaScript feature called window.opener.
A malicious hacker on the external website can run a sneaky piece of code:
When the user finishes browsing the external site and switches back to their first tab, they suddenly see a fake login page that looks identical to Google, Gmail, or your school portal! Thinking they got logged out, they type their password—and the hacker steals it!
This cyber trick is called Reverse Tabnabbing.
rel="noopener noreferrer" 🛡️Fortunately, web security experts gave us a simple, 100% effective defense: the rel attribute!
Whenever you write target="_blank", you should always include:
$$\text{rel="noopener noreferrer"}$$
noopener (Locks the Door 🔒):window.opener to null.noreferrer (The Privacy Mask 🎭):noopener in the background when you use target="_blank". However, professional software companies still explicitly write rel="noopener noreferrer" to guarantee protection for users on older browsers, mobile phones, or smart TVs!download Attribute 📥What if you want a link to download a file straight to the student's computer or phone (like a PDF syllabus, homework sheet, or school song MP3), instead of displaying it in the browser?
Use the download attribute:
If you put a name inside download="MyName.pdf", the browser will automatically rename the downloaded file to that exact clean name on the user's computer!
title Attribute (Helpful Hover Tooltips 💬)You can add a small, helpful hover note to any link using the title attribute:
When a user rests their mouse cursor over the link for a split second, a little yellow tooltip box pops up displaying your helpful hint!
target="blank" instead of target="_blank"Notice the missing underscore (_)!
_blank (with an underscore) is a special browser keyword that opens a new tab every time.blank (without an underscore) becomes a custom tab name. If the user clicks three different links, all three will reload inside that one single tab!Never put target="_blank" on regular internal links (about.html, contact.html). A user visiting your site shouldn't end up with 30 open tabs!
rel="noopener noreferrer" on External LinksAlways treat target="_blank" and rel="noopener noreferrer" as inseparable best friends!
target attribute controls where a linked page will open.target="_blank" opens the link in a fresh, brand new browser tab.target="_self" is the default setting that opens the page in the same tab.rel="noopener noreferrer".download attribute to trigger automatic file downloads (like PDFs, sample papers, or forms).title attribute to show friendly hover tooltips for accessibility.Test your understanding with these multiple-choice questions:
target="_blank" without security attributes?target="blank" (without the leading underscore)?Open VS Code and create a file named student-downloads.html.
Create a "Student Resources & Downloads Portal" for your school:
https://cbse.gov.in) and NCERT (https://ncert.nic.in).target="_blank".rel="noopener noreferrer".title attribute.<a href="math-sample-paper.pdf" download="Class10-Maths-Sample-2026.pdf">.index.html opening in the same tab (_self).Congratulations! You have mastered Chapter 6: Links! You now know how to build fully connected, multi-page websites and keep your users 100% safe from cyber tricks!
In the next lesson, we will continue your web development journey with Unordered & Ordered Lists (Lists).
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| Links & Hyperlinks | Unordered & Ordered Lists |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.