← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 9 of 26

HTML Links

Imagine visiting a library where all the books are locked in separate cages, and there are no signs or doors connecting the rooms. You would never find the information you need. HTML links are the hallways and doors of the internet. They connect different documents and web platforms, allowing you to jump from page to page with a single click. Without links, the World Wide Web would just be isolated, unreachable islands of text. Links let you construct user navigation menus, direct users to download resources, or launch email composers automatically.

In this page:

  1. The Anchor Element and Link Paths
  2. Absolute vs. Relative Links
  3. Opening Links in New Browser Tabs
  4. Linking to Specific Page Sections
  5. Triggering Local Email and Dialer Apps
  6. The rel Attribute
  7. Email and Phone Links
  8. The download Attribute
  9. All Target Attribute Values Explained
  10. Skip Navigation Links for Accessibility

The Anchor Element and Link Paths

Links form the pathways of the World Wide Web. In HTML, you create hyperlinks using the a (anchor) element paired with the href (Hypertext Reference) attribute, which defines the path or web address the user navigates to when they click.

Note: Use descriptive, natural text inside your links instead of generic strings like 'click here'.

Warning: If you leave the href attribute empty, clicking the link may cause the browser to reload your current page, disrupting user state.

Example: The Anchor Element and Link Paths

markup 
<a href="https://example.com">Visit our site</a>

Absolute vs. Relative Links

An absolute link specifies the complete, secure domain address starting with a protocol (e.g., https://). A relative link targets files on your own server relative to the current file location, omitting the domain prefix.

Note: Use relative paths for internal files to keep your pages working even if you change your root domain name.

Warning: Forgetting the protocol (https://) on an external absolute link will cause the browser to look for that file on your local server, resulting in a 404 page error.

Example: Absolute vs. Relative Links

markup 
<a href="https://example.com/page.html">Absolute link</a>
<a href="page.html">Relative link</a>

Opening Links in New Browser Tabs

By default, browsers load links in the same active window. You can force links to open in a new tab by using the target="_blank" attribute. This keeps your users from losing their spot on your active tool page when navigating away.

Note: Always pair target="_blank" with rel="noopener noreferrer" to protect your site against tab-nabbing security risks.

Warning: Do not over-use target="_blank" because launching endless tabs can clutter your user's tab strip and reduce navigation speed.

Example: Opening Links in New Browser Tabs

markup 
<a href="https://example.com" target="_blank">Opens in a new tab</a>

Linking to Specific Page Sections

If you have a long webpage, you can build links that jump directly to specific sections on the same page. You do this by targeting the ID attribute of the destination element inside your href link, prefixed with a hash symbol (#).

Note: Use the CSS property scroll-behavior: smooth; to make your page slide gently to the destination instead of jumping abruptly.

Warning: Ensure your target element has an ID that matches the link hash reference exactly, as IDs are highly case-sensitive.

Example: Linking to Specific Page Sections

markup 
<a href="#section2">Jump to Section 2</a>
<h2 id="section2">Section 2</h2>

Triggering Local Email and Dialer Apps

Links can do more than just navigate pages. By prefixing your href with special protocols like mailto: or tel:, you can instruct the user's operating system to launch their local mail application or mobile phone dialer directly with preset contact data.

Note: You can pre-fill subject lines inside your mailto links by appending query strings to the path.

Warning: Mailto links can occasionally trigger blank browser screens on computers that do not have a default email client set up.

Example: Triggering Local Email and Dialer Apps

markup 
<a href="mailto:[email protected]">Email us</a>
<a href="tel:+15551234567">Call us</a>

The rel Attribute

The rel attribute describes the relationship between your page and the linked page. It is important for SEO and security especially when linking to external sites.

Note: Always add rel=noopener when using target=_blank to prevent security vulnerabilities.

Warning: Without noopener, a new tab opened by your page can access and manipulate your page via JavaScript.

Example: The rel Attribute

markup 
<a href="https://example.com" rel="noopener">External link</a>

Email and Phone Links

HTML links are not just for web pages. You can create links that open the user's email app or dial a phone number directly using special URL schemes.

Note: Phone links are especially useful on mobile where users can tap to call directly.

Warning: mailto links expose your email address to spam bots — consider using a contact form instead.

Example: Email and Phone Links

markup 
<a href="mailto:[email protected]">Send email</a>
<a href="tel:+15551234567">Call now</a>

The download Attribute

The download attribute tells the browser to download a linked file instead of navigating to it or opening it in a new tab. You can even give the downloaded file a custom name that is different from the original file name on the server.

Note: The download attribute only works reliably for same-origin links — cross-origin downloads may still just open in the browser depending on server headers.

Warning: download does not work on links to pages, only to actual files like PDFs, images, or zip archives.

Example: The download Attribute

markup 
<a href="report.pdf" download="annual-report.pdf">Download report</a>

All Target Attribute Values Explained

The target attribute controls where a linked page opens. _blank opens a new tab, _self (the default) opens in the same tab, _parent opens in the parent frame if the page is inside an iframe, and _top breaks out of all frames to open in the full browser window.

Note: Named targets like target="toolFrame" let multiple links open into the same specific iframe, which is handy for tabbed interfaces.

Warning: _parent and _top only matter when your page is embedded inside frames or iframes — outside of that context they behave the same as _self.

Example: All Target Attribute Values Explained

markup 
<a href="page.html" target="_blank">_blank: new tab</a>
<a href="page.html" target="_self">_self: same tab</a>
<a href="page.html" target="_parent">_parent: parent frame</a>
<a href="page.html" target="_top">_top: full window</a>

Skip Navigation Links for Accessibility

A skip link is a hidden link at the very top of the page that becomes visible when focused with the keyboard, letting users jump straight to the main content without tabbing through the entire navigation menu first. This is a small addition that makes a huge accessibility difference for keyboard and screen reader users.

Note: Style the skip link to be visually hidden by default but appear clearly when it receives keyboard focus.

Warning: A skip link that is hidden with display:none instead of an off-screen technique will not be reachable by keyboard at all — screen readers and keyboards cannot focus display:none elements.

Example: Skip Navigation Links for Accessibility

markup 
<a href="#main-content" style="position: absolute; left: -9999px;">
  Skip to main content
</a>
<main id="main-content">Main content</main>
Common Mistakes
  1. Omitting the protocol (https://) from external absolute URLs, making them render as broken internal relative links.
  2. Failing to add rel="noopener noreferrer" alongside target="_blank", creating performance and security loopholes.
  3. Using generic links like 'Click Here' which ruins accessibility parsing and hurts SEO rankings.
Chapter Summary
  • HTML links are built using the a tag containing target destination references inside the href attribute.
  • Relative links target local internal directories, while absolute links target complete web domain addresses.
  • Use mailto and tel prefixes to launch email composers or device dialers automatically.
Browser Support

The anchor element and core link protocols are fully supported by all web browsers natively.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML CSS Next Lesson → HTML Link Colors

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.