Advanced Links

💡 The Concept

You already know that <a href=""> is how you make a link in HTML. If you want a refresher on the basics, see HTML Links: Mastering the Anchor Tag. This lesson goes further and covers four specialized link types: opening links in a new tab, email links, phone and text links, and anchor links that jump to a specific section on the same page.

Opening Links in a New Tab

By default, clicking a link opens it in the same browser tab. You can change this with the target="_blank" attribute. Use it when linking to a different website so the visitor does not lose their place on yours.

<a href="https://github.com/smetoxen" target="_blank">GitHub</a>

Email Links

You can create a link that opens the visitor’s email app with the address already filled in. Use the mailto: protocol in the href:

One thing to keep in mind: mailto: links only work if the visitor has an email client configured on their device. On a phone this is usually fine — most people have a mail app set up. On a desktop or laptop, though, many users rely on webmail like Gmail and have never configured a desktop email app. When they click a mailto: link, nothing happens, which can be frustrating. For that reason, it is good practice to display the email address as visible text alongside the link, so visitors can copy it manually if the link does not work for them.

<a href="mailto:susan.metoxen@saintpaul.edu">Email me</a>

Phone Links

A tel: link lets mobile visitors tap to call directly from their phone. This matters more than ever: according to StatCounter, more than 60% of website traffic now comes from mobile devices, and that number is even higher for local businesses and service providers. If a phone number on a mobile site is not clickable, visitors have to memorize it, switch apps, and dial manually — which most people will not bother to do. A tel: link makes calling a single tap.

<a href="tel:952-270-7784">952-270-7784</a>

Text Message Links

Similarly, an sms: link opens the visitor’s messaging app with the number ready to go. Many people prefer texting over calling, especially for quick questions or appointment requests. These links are most useful in footers and contact sections where mobile visitors are looking for a fast way to reach you.

<a href="sms:952-270-7784">Text me!</a>

Anchor Links

An anchor link jumps the browser to a specific section on the same page. Long pages often use anchor links at the top as a table of contents, or at the bottom as a “Back to top” link.

First, mark the destination by adding an id attribute to any element:

<h2 id="contact">Contact</h2>

Then link to it using # followed by the id:

<a href="#contact">Jump to Contact</a>

Anchor links can also point to a section on a different page by combining the file path and the anchor:

<a href="about.html#contact">Contact section on the About page</a>

🎬 Video Demonstration

This video walks through opening links in new tabs and creating email, phone, and text links.

Exercise: Try It Yourself

Build a footer using all four link types from this lesson. The finished result should look like this:

Step 1. Open your template file and find the <footer> element. If your template does not have one yet, add <footer></footer> before the closing </body> tag.

Step 2. Inside the footer, add a paragraph with a link to an external website of your choice — your school, a business, or another site. Add target="_blank" so it opens in a new tab.

Step 3. Below that, add a second paragraph with three links separated by •: an email link using mailto:, a phone link using tel:, and a text link using sms:. Use Email, Call, and Text as the link text.

Step 4. Add this copyright line below the links, replacing the name with your own:

<small>&copy; Copyright 2026 Your Name</small>

Step 5. Add this CSS to your stylesheet:

footer {
  text-align: center;
  border-top: 5px solid purple;
  padding-top: 20px;
}

💡 If you are making a website template: The advanced link types in this lesson — opening in a new tab, telephone links, and SMS links — can go in the footer of your website template. When you are done in JSFiddle, copy your HTML into the footer section of your index.html and your CSS into style.css. See the full website template guide for reference.

❓ Frequently Asked Questions

★ Key Takeaways

Links can do more than connect web pages. This lesson covered four specialized link types: opening links in a new tab with target="_blank", email links with mailto:, phone and text links with tel: and sms:, and anchor links that jump to a section on the same page. Next comes Advanced CSS Selectors, where you will learn ways to target elements that go beyond simple class and ID selectors.

← Back to Links and Navigation Lessons

← Back to All Lessons