Links, Anchors, and Navigation

What Is It?

What Are HTML Links?

Links are what make the web a web. Without them, the internet would just be a bunch of disconnected pages floating alone. Links are the threads that connect every page to every other page. Click a link and you teleport to another page, another website, another continent, or even back to the same page at a different section.

Every link in HTML is made with the <a> tag (the 'anchor' tag). The href attribute inside it tells the browser where to go when the user clicks.

<a href="https://www.google.com">Go to Google</a>

This is the simplest kind of link. The text between the opening and closing tags is what the user sees and clicks on.

Why 'Anchor'?

The tag is called 'anchor' because in the very first version of the web, links were used to 'anchor' you to a specific place in a document. Over time, they became the primary way to jump between pages. But the name stuck, so we still call it the anchor tag.

Why Does It Matter?

Why Learn Links Properly?

1. Navigation Is the Backbone of the Web

Every website has a menu, a footer, and buttons that take you somewhere. All of these are links. Without links, a website would be one long scrolling page with no way to get around.

2. Linking to Other Pages Is Powerful

You can send users to any web page in the world with a single link. Share your favourite YouTube video, your project on GitHub, or your photo on Instagram — all with one <a> tag.

3. SEO Loves Good Links

Google uses links to understand the relationship between pages. If many websites link to your page, Google treats your page as important. Internal links between your own pages also help Google crawl your site.

4. Email and Phone Links

You can make email addresses and phone numbers clickable. On a phone, clicking a tel link dials the number. Clicking an email link opens the user's email app with the address pre-filled. Super handy for contact pages.

5. Anchor Links for Long Pages

If your page is long (like a FAQ or a tutorial), you can link to specific sections. Users click a table of contents link and jump directly to that section without scrolling. This is how Wikipedia's 'Contents' box works.

6. Professional Habits

Knowing when to use target="_blank", when to add rel="noopener noreferrer", and how to structure navigation menus are basic skills every web developer needs. Get them right from day one.

Detailed Explanation

Detailed Explanation

The Basic Anchor Tag

A link has two parts: the <a> tag with an href attribute, and the text (or other content) between the opening and closing tags.

<a href="URL_HERE">CLICKABLE_TEXT_HERE</a>

Examples:

• <a href="https://www.google.com">Google</a>
• <a href="about.html">About Us</a>
• <a href="#top">Back to top</a>

Internal Links (Relative Paths)

An internal link goes to another page within the same website. You use a relative path — a path relative to the current HTML file.

External Links (Absolute URLs)

An external link goes to another website. You use a complete URL starting with https:// or http://.

<a href="https://www.wikipedia.org">Wikipedia</a>

Always prefer https:// over http:// — it is the secure version.

target="_blank" — Opening Links in a New Tab

By default, clicking a link replaces the current page. To open the link in a new browser tab (so users can come back to your page), use target="_blank":

<a href="https://www.google.com" target="_blank">Google</a>

However, when you use target="_blank", there is a security and performance issue. The new tab gets access to the opener tab through the window.opener object, and some browsers may tie both tabs to the same process. To fix this, always add rel="noopener noreferrer":

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google</a>

noopener — prevents the new page from using window.opener to control the original page.
noreferrer — does not send the referring URL to the new page (adds extra privacy).

Anchor Links (Same-Page Navigation)

You can link to a specific section within the same page using an ID. First, give the destination element an id:

<h2 id="chapter-3">Chapter 3</h2>

Then link to it with # followed by the ID:

<a href="#chapter-3">Go to Chapter 3</a>

When clicked, the browser scrolls down to that heading. You can also link to an ID on a different page with page.html#chapter-3.

mailto: Links

A mailto: link opens the user's default email app with the address pre-filled:

<a href="mailto:priya@example.com">Email Priya</a>

You can even pre-fill the subject and body:

<a href="mailto:priya@example.com?subject=Hello&body=Hi%20Priya">Email Priya</a>

(Note: spaces in the URL need to be encoded as %20.)

tel: Links

A tel: link opens the phone dialler on mobile devices (on desktop it may not do much):

<a href="tel:+919876543210">Call Us</a>

Always include the country code starting with a plus sign. This makes the link work from any country.

The download Attribute

Adding the download attribute to a link makes the browser download the file instead of opening it:

<a href="resume.pdf" download>Download Resume</a>

You can also rename the downloaded file:

<a href="resume.pdf" download="Priya_Resume.pdf">Download</a>

The title Attribute

The title attribute creates a tooltip that shows when users hover over the link:

<a href="about.html" title="Learn more about us">About</a>

Do not rely on this for important information — mobile users cannot see tooltips.

Building a Navigation Menu

A navigation menu is just a list of links, usually inside a <nav> element:

<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contact</a>
</nav>

The <nav> tag is a semantic element that tells browsers and screen readers 'this is the main navigation'. CSS (which you will learn later) makes the menu look pretty.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Links</title>
</head>
<body>
  <h1>Priya's Favourite Links</h1>
  <h2>Internal Links (Same Site)</h2>
  <p><a href="about.html">About Me</a></p>
  <p><a href="projects.html">My Projects</a></p>
  <p><a href="contact.html">Contact</a></p>
  <h2>External Links (Other Websites)</h2>
  <p><a href="https://www.google.com">Google</a></p>
  <p><a href="https://www.wikipedia.org">Wikipedia</a></p>
  <p><a href="https://learn.modernagecoders.com">Modern Age Coders</a></p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>External Resources</title>
</head>
<body>
  <h1>Helpful External Resources</h1>
  <p>These open in a new tab so you do not lose this page:</p>
  <p><a href="https://www.wikipedia.org" target="_blank" rel="noopener noreferrer">Wikipedia (new tab)</a></p>
  <p><a href="https://www.github.com" target="_blank" rel="noopener noreferrer">GitHub (new tab)</a></p>
  <p><a href="https://www.stackoverflow.com" target="_blank" rel="noopener noreferrer">Stack Overflow (new tab)</a></p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Tutorial</title>
</head>
<body>
  <h1>HTML Tutorial</h1>

  <h2>Table of Contents</h2>
  <ul>
    <li><a href="#intro">Introduction</a></li>
    <li><a href="#tags">Tags</a></li>
    <li><a href="#attributes">Attributes</a></li>
    <li><a href="#conclusion">Conclusion</a></li>
  </ul>

  <h2 id="intro">Introduction</h2>
  <p>HTML stands for HyperText Markup Language. It is used to build web pages.</p>

  <h2 id="tags">Tags</h2>
  <p>Tags are the building blocks of HTML. Examples include p, h1, and img.</p>

  <h2 id="attributes">Attributes</h2>
  <p>Attributes add extra information to tags, like href on an anchor tag.</p>

  <h2 id="conclusion">Conclusion</h2>
  <p>HTML is easy to learn and the foundation of the web.</p>
  <p><a href="#">Back to Top</a></p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Rohan</title>
</head>
<body>
  <h1>Contact Rohan Gupta</h1>
  <p>Choose your preferred way to contact:</p>
  <ul>
    <li>Email: <a href="mailto:rohan@example.com">rohan@example.com</a></li>
    <li>Phone: <a href="tel:+919876543210">+91 98765 43210</a></li>
    <li><a href="https://via.placeholder.com/150" download="Rohan_Avatar.png">Download my avatar</a></li>
  </ul>
  <h2>Email with Subject and Body</h2>
  <p><a href="mailto:rohan@example.com?subject=Hello%20Rohan&body=Hi%20Rohan%2C%20I%20saw%20your%20website.">Email with pre-filled message</a></p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ananya's Site</title>
</head>
<body>
  <nav>
    <a href="index.html">Home</a> |
    <a href="about.html">About</a> |
    <a href="projects.html">Projects</a> |
    <a href="blog.html">Blog</a> |
    <a href="contact.html">Contact</a>
  </nav>

  <h1>Welcome to Ananya's Site</h1>
  <p>Use the navigation menu above to explore different pages.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Paths Example</title>
</head>
<body>
  <h1>Different Relative Paths</h1>
  <h2>Links with Tooltips</h2>
  <p><a href="about.html" title="Learn more about Vikram">About Me</a></p>
  <p><a href="projects.html" title="See my coding projects">Projects</a></p>

  <h2>Links to Other Folders</h2>
  <p><a href="pages/gallery.html">Gallery (in pages folder)</a></p>
  <p><a href="../parent-page.html">Parent Page (go up one folder)</a></p>
  <p><a href="./same-folder.html">Same Folder (explicit)</a></p>
</body>
</html>

Common Mistakes

<a>Click Me</a>

<a href="https://www.google.com">Click Me</a>

<a href="https://example.com" target="_blank">Example</a>

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

<a href="www.google.com">Google</a>

<a href="https://www.google.com">Google</a>

<a href="#contact-section">Go to Contact</a>
<!-- But there is no element with id="contact-section" -->

<a href="#contact-section">Go to Contact</a>
<h2 id="contact-section">Contact</h2>

<a href="mail:priya@example.com">Email</a>

<a href="mailto:priya@example.com">Email</a>

Summary