HTMLmarkup~15 mins

Opening links in new tab in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Opening Links in a New Tab

📖 Scenario: You are creating a simple webpage with links to useful websites. You want these links to open in a new browser tab when clicked, so users don't lose your page.

🎯 Goal: Build a webpage with three links that open in new tabs when clicked.

📋 What You'll Learn

Create an HTML skeleton with <!DOCTYPE html>, <html>, <head>, and <body> tags

Add three links with exact URLs and text

Make sure each link opens in a new tab using the correct attribute

Use semantic HTML and include a page title

💡 Why This Matters

🌍 Real World

Opening links in new tabs is common on websites to keep users on the original page while letting them explore external content.

💼 Career

Web developers must know how to safely open links in new tabs to improve user experience and maintain security.

Progress0 / 4 steps

Create the basic HTML structure

Write the basic HTML skeleton with <!DOCTYPE html>, <html lang="en">, <head> containing a <meta charset="UTF-8"> and a <title>Useful Links</title>, and an empty <body> tag.

HTML




    
    Useful Links

Need a hint?

Start by typing the basic HTML page structure with the required tags and a title.

Add three links inside the body

Inside the <body> tag, add three links with these exact URLs and link texts:
1. URL: https://www.google.com, text: Google
2. URL: https://www.wikipedia.org, text: Wikipedia
3. URL: https://www.github.com, text: GitHub.

HTML




    
    Useful Links

Need a hint?

Use the <a> tag with the href attribute for each link inside the body.

Add the attribute to open links in a new tab

Add the attribute target="_blank" to each of the three <a> tags so that clicking them opens the link in a new browser tab.

HTML




    
    Useful Links

Need a hint?

Add target="_blank" inside each <a> tag to open links in new tabs.

Add security attribute to links

Add the attribute rel="noopener noreferrer" to each <a> tag along with target="_blank" to improve security and privacy when opening links in new tabs.

HTML




    
    Useful Links

Need a hint?

Adding rel="noopener noreferrer" prevents security risks when opening links in new tabs.