By WebNest Studio Engineering Team
HTML Tutorial
HTML Links and Navigation
The anchor element, <a>, is what makes the web a "web" — it creates clickable links between pages, resources, and locations within the same page. Understanding how link targets, URLs, and navigation behavior work is fundamental to building any usable site.
Why it matters
Links are what make the web a web. Getting the URL type wrong produces links that work on your machine and break when the site is deployed, and vague link text such as "click here" fails both screen-reader users and search engines. Links are simple, and they are also where many small, avoidable mistakes are made.
The href Attribute and URL Types
Every functional link needs an href attribute pointing to a destination. That destination can be an absolute URL (a complete web address including the protocol, like https://example.com/page) or a relative URL (a path relative to the current page's location, like /about or ../images/logo.png). Absolute URLs are necessary when linking to an external site; relative URLs are preferred for internal links because they keep working correctly if the site's domain changes.
Opening Links in a New Tab Safely
Setting target="_blank" makes a link open in a new tab or window. Doing this alone creates a subtle security and performance issue: the newly opened page gains partial access to the original page via window.opener, which a malicious destination could exploit. The fix is to always pair target="_blank" with rel="noopener noreferrer", which severs that connection and also prevents the referrer URL from being passed along.
Other Link Types and Uses
Links aren't limited to navigating between full pages. An href starting with # jumps to an element with a matching id on the same page (an in-page anchor). An href starting with mailto: opens the user's default email client with a pre-filled recipient, and tel: initiates a phone call on supporting devices.
<a href="#section2">— jumps to the element withid="section2"on the same page.<a href="mailto:info@example.com">— opens the default email client.<a href="tel:+15551234567">— initiates a phone call on mobile devices.
Example
Relative, absolute, and safely-opened external links
<a href="/services">Our Services</a> (relative internal link)
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
MDN Web Docs
</a> (external link opened safely in a new tab)
<a href="#contact">Jump to Contact Section</a>Renders three clickable links: one navigates within the same site, one opens MDN in a new tab without exposing window.opener, and one scrolls the page to the element with id="contact".Common Mistakes
- Using target="_blank" without rel="noopener noreferrer", leaving a security gap via window.opener.
- Hardcoding absolute URLs (including the domain) for internal links instead of using relative paths.
- Forgetting the "#" prefix or matching id when linking to an in-page anchor, so the link does nothing.
- Using a styled <span> or <div> with a click handler instead of a real <a> tag, which breaks keyboard navigation and accessibility.
Exercise
Create three links: a relative link to about.html with the text About us; an external link to https://developer.mozilla.org with the text MDN Web Docs that opens in a new tab safely; and an email link to hello@example.com with the text Email us.
Expected result: three working links, one per line, with descriptive text.
<!-- TODO: relative link to about.html -->
<!-- TODO: external link that opens in a new tab -->
<!-- TODO: email link -->Show hints
- A new tab is requested with
target="_blank", andrel="noopener noreferrer"should accompany it. - An email link uses the
mailto:scheme in thehref.
Show solution
<p><a href="about.html">About us</a></p>
<p><a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN Web Docs</a></p>
<p><a href="mailto:hello@example.com">Email us</a></p>Quick quiz
1. What does href="#contact" link to?
- A. The element on the same page whose id is contact
- B. The site's contact page
- C. An email address
- D. A file named #contact
Show answer
A. A fragment starting with # scrolls to the element with that id.
2. Why add rel="noopener" to a link with target="_blank"?
- A. It makes the link load faster
- B. It stops the new page from getting a reference to the page that opened it
- C. It is required for the link to open
- D. It hides the link from search engines
Show answer
B. Without it, the opened page could redirect the original tab through window.opener. Current browsers apply noopener by default, but stating it protects older ones.
3. Which link text is best?
- A. Click here
- B. Read more
- C. Download the 2026 price list (PDF)
- D. Link
Show answer
C. It makes sense when read out of context, which is how screen-reader users often hear links.
Interview questions
What is the difference between an absolute and a relative URL?
Show answer
An absolute URL contains the full address, including the scheme and domain, such as https://example.com/about; it points to the same place wherever it is used and is needed for links to other sites. A relative URL, such as about.html or ../images/logo.png, is resolved against the address of the current page, so it keeps working when the site moves to another domain. A URL beginning with / is relative to the root of the site.
When should you use a link and when a button?
Show answer
Use a link, <a href>, when activating it takes the user to another page or another place on the page. Use a button when it performs an action on the current page, such as submitting a form or opening a menu. The distinction matters to keyboard and screen-reader users, who expect a link to navigate and a button to act, and each has its own built-in keyboard behaviour.
Key Points to Remember
- The href attribute defines a link's destination — absolute for external sites, relative for internal pages.
- Always pair target="_blank" with rel="noopener noreferrer" for security.
- In-page anchors use href="#id" to jump to an element with a matching id.
- mailto: and tel: links trigger email clients and phone calls respectively.
Practice in the playground
Write and run your own code for this topic, or start from the exercise or an example. Shows a live preview of your HTML, CSS and JavaScript. Your code for each topic is kept in this browser.
Run the examples
Change an input, predict the result, then compare it with the output. Explain why the result changes.
Written by
WebNest Studio Engineering Team
Practical lessons from developers working with Java, Python, React, databases and production systems.
Led by Vansh Duggal, Founder, WebNest Studio · Full-stack & software engineering