Hyperlinks
Master the anchor element and its key attributes — building links to other pages, sections, email addresses, and phone numbers, and understanding the security implications of opening links in a new tab.
Hyperlinks are the defining feature of the web — the 'links' that turn a collection of separate documents into a connected, navigable web of pages. Nearly every interactive element you click on the internet is, underneath, an HTML anchor element. This lesson covers the anchor tag in depth: how to link to other pages using absolute and relative URLs, how to jump to a specific point within a page, how to create email and phone links, how to offer a file for download, and the security best practice you should apply any time a link opens in a new tab.
The Anchor Element and the href Attribute
A hyperlink is created with the <a> (anchor) element. Its most important attribute is href (short for 'hypertext reference'), whose value is the destination the link points to — a URL, a fragment identifier, or a special protocol like mailto: or tel:. The text (or other content) placed between the opening <a> and closing </a> tags becomes the clickable link.
An <a> element without an href attribute is not a functional link at all — it renders as plain, unstyled, unclickable text. This is a common source of confusion for beginners who forget the attribute and wonder why their 'link' doesn't do anything.
Absolute vs. Relative URLs
An absolute URL specifies the full address of a resource, including the protocol and domain — for example, https://example.com/about.html. Absolute URLs always point to the same destination no matter what page they're used on, which makes them necessary when linking to an entirely different website.
A relative URL specifies a path relative to the current page's location, without repeating the protocol or domain — for example, about.html, or ../images/logo.png. Relative URLs are the standard choice for linking between pages within your own site, because they keep working correctly even if the site is moved to a different domain (like from a staging URL to a production one) — the relationships between your own files stay the same.
A relative URL that starts with a slash, like /contact.html, is root-relative: it always resolves from the domain's root, regardless of which folder the current page is in. A relative URL without a leading slash, like contact.html, resolves relative to the current page's own folder.
Fragment Links, Email Links, and Telephone Links
A fragment link points to a specific element within a page, using a hash symbol followed by that element's id attribute — for example, <a href="#contact">Contact</a> jumps to whichever element on the page has id="contact". This is how 'back to top' links and in-page table-of-contents navigation work. A fragment can also be combined with a page URL, like about.html#team, to jump to a specific section on a different page.
An email link uses the mailto: protocol in the href value, such as <a href="mailto:[email protected]">Email us</a>. Clicking it opens the user's default email application with a new message addressed to that address. You can also pre-fill a subject line using a query parameter, like mailto:[email protected]?subject=Support%20Request.
A telephone link uses the tel: protocol, such as <a href="tel:+15551234567">Call us</a>. On a phone, this typically opens the dialer pre-filled with that number — extremely useful for mobile users browsing a business's contact page.
The download Attribute
The download attribute tells the browser to download the linked resource as a file instead of navigating to it or displaying it in the browser. For example, <a href="report.pdf" download>Download Report</a> will prompt the browser to save the PDF file rather than opening it in a PDF viewer tab. Giving the download attribute a value, like download="annual-report.pdf", suggests a specific filename for the saved file.
Opening Links in a New Tab: target and the Security Risk of rel
The target attribute controls where a link opens. The value _blank opens the linked page in a new browser tab or window, leaving the current page open — commonly used for external links so users don't lose their place on your site.
Using target="_blank" introduces a subtle but real security and performance issue: by default, the newly opened page gains partial access to the original page through a JavaScript property called window.opener. A malicious destination page could use this access to redirect the original tab to a phishing page, all while the user's attention is on the new tab — an attack known as 'tabnabbing.'
The fix is to always pair target="_blank" with rel="noopener noreferrer". The noopener keyword prevents the new page from being able to access window.opener at all, closing off the attack. The noreferrer keyword additionally prevents the browser from sending referrer information (which page linked to this one) to the destination site, which is a privacy benefit. Modern browsers apply noopener behavior automatically for target="_blank" links, but explicitly including rel="noopener noreferrer" remains the recommended, defensive best practice since it does not rely on that automatic behavior in every browsing context.
Anchor Element Syntax
href is required for the element to function as a link at all. Always pair target="_blank" with rel="noopener noreferrer" as a security best practice.
<a href="https://example.com">Absolute link to another site</a>
<a href="about.html">Relative link to a page on this site</a>
<a href="#contact">Jump to the Contact section</a>
<a href="mailto:[email protected]">Send an email</a>
<a href="tel:+15551234567">Call us</a>
<a href="report.pdf" download>Download the report</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Opens safely in a new tab</a>Code Examples
A basic relative link pointing to another page in the same site, assumed to sit in the same folder as the current page. Expected result: Displays the underlined, colored text 'About'; clicking it navigates the browser to about.html.
A fragment link that jumps to the element with id="contact" further down the same page, without a full page reload.
The href value #contact must exactly match the id value contact on the target element (note: the # only appears in the href, not in the id attribute itself).
Common mistake: A common mistake is writing id="#contact" on the target element — the # symbol belongs only in the href value, never in the id attribute itself.
Three special-purpose links: an email link that opens the user's mail app, a telephone link that opens a dialer on mobile devices, and a download link that saves a PDF file under a friendly, custom filename.
download="company-brochure.pdf" both triggers a file download and renames the saved file, even if the original file on the server was named something else like report_v3_final.pdf.
A realistic navigation bar mixing a root-relative internal link, a relative internal link, and an external link opened safely in a new tab, followed by contact links for email and phone — the kind of link variety a real business site uses on nearly every page. The external partner link correctly combines target="_blank" with rel="noopener noreferrer" to prevent the new tab from gaining any control over the original page.
<a href="about.html">About</a><a href="#contact">Contact</a>
<!-- further down the same page -->
<h2 id="contact">Contact Us</h2>
<p>Reach out any time.</p><a href="mailto:[email protected]">Email</a>
<a href="tel:+15551234567">Call us: (555) 123-4567</a>
<a href="brochure.pdf" download="company-brochure.pdf">Download our brochure</a><nav>
<a href="/">Home</a>
<a href="/products.html">Products</a>
<a href="https://partner-site.com" target="_blank" rel="noopener noreferrer">
Our Partner (opens in new tab)
</a>
</nav>
<p>
Questions? <a href="mailto:[email protected]">Email support</a> or
<a href="tel:+18005551234">call us</a>.
</p>Absolute vs. Relative URL Resolution
The same relative href resolves differently depending on the current page's own location in the site.
Current page: https://example.com/blog/post.html
href="https://other.com/x" -> absolute, always https://other.com/x
href="archive.html" -> relative, resolves to https://example.com/blog/archive.html
href="/contact.html" -> root-relative, resolves to https://example.com/contact.html
href="#top" -> fragment, stays on https://example.com/blog/post.html, jumps to id="top"Important Rules
Every functional link must have an href attribute — without it, <a> renders as plain text.
Use relative URLs for links within your own site so the site stays portable across domains.
A fragment link's href value (#name) must exactly match the target element's id attribute value (name), without a # in the id itself.
Always pair target="_blank" with rel="noopener noreferrer" to prevent the new page from gaining control over the original tab.
Use mailto: and tel: links to make contact information directly actionable, especially for mobile users.
Why noopener Matters
The tabnabbing risk isn't theoretical — it's been used in real phishing campaigns: a user clicks a seemingly harmless target="_blank" link (say, to a shared document or an ad), and while they're looking at the new tab, JavaScript on that new page silently rewrites the original tab's location to a fake login page mimicking a bank or email provider. When the user switches back, they may not notice the URL has changed and could type in their credentials. rel="noopener" closes off exactly this vector by preventing the new page from touching the original tab at all.
<a href="https://example.com" target="_blank">Visit our site</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit our site</a>
Omitting rel="noopener noreferrer" on a target="_blank" link leaves the newly opened page with a way to access and potentially redirect the original tab — a known phishing technique called tabnabbing.
<a href="/">Home</a> An anchor element with no href attribute is not a real link — it renders as plain, unclickable text with no default link styling.
[Choose the Correct Syntax] Which link correctly opens an external site in a new tab while following current security best practice? A. <a href="https://example.com" target="_blank">Visit</a> B. <a href="https://example.com" newtab="true">Visit</a> C. <a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit</a> D. <a href="https://example.com" open="newtab" rel="noopener">Visit</a>
C. <a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit</a> — target="_blank" opens the link in a new tab, and rel="noopener noreferrer" is the recommended pairing that prevents the new page from gaining access to (and potentially hijacking) the original tab, while also withholding referrer information. newtab and open are not real HTML attributes.
Build a small contact section with: a link to an About page using a relative URL, a fragment link to a 'Team' section further down the same page, an email link to [email protected], and a link to an external partner site that opens safely in a new tab.
<a href="about.html">About</a> <a href="#team">Our Team</a> <a href="mailto:[email protected]">Email Us</a> <a href="https://partner.com" target="_blank" rel="noopener noreferrer">Our Partner</a>
Remember rel="noopener noreferrer" on the external link's target="_blank".