HTML Links
Links (hyperlinks) are the threads that connect web pages — without links, the Internet wouldn't be a "web". With the <a> tag, you can navigate between pages, jump to specific sections within a page, download files, or send emails.
Basic Link Syntax
A link is defined by the <a> tag (anchor), where the href attribute (hypertext reference) specifies the destination address:
Example
<a href="https://web-tutorial.com/">Visit Example Site</a>
The code above renders as clickable text "Visit Example Site" in the browser, styled by default as blue text with an underline. When clicked, the browser navigates to the URL specified in href.
Opening Behavior: the target Attribute
By default, links open in the current page (replacing it). Use the target attribute to open in a new tab or window:
Example
<a href="https://web-tutorial.com/" target="_blank">Open in New Tab</a>
<a href="/html/index.html" target="_self">Open in Current Page (Default)</a>
Common target values:
_self: Default — opens in the current page_blank: Opens in a new tab or window_parent: Opens in the parent frame (used in iframe scenarios)_top: Opens in the full window (breaks out of all frames)
target="_blank", it's recommended to add rel="noopener" or rel="noreferrer" to the link. This prevents the new page from accessing the original page's object via window.opener, avoiding potential security risks: <a href="..." target="_blank" rel="noopener">Link</a>.
Absolute vs. Relative Paths
Link destinations can be absolute paths or relative paths. The difference is simple — absolute paths include the full URL, while relative paths specify a location relative to the current page:
- Absolute path: Starts with a protocol (
https://), pointing to an external or full internal URL - Relative path: Starts with a filename or
./,../, pointing to a location relative to the current file - Root path: Starts with
/, locating from the site's root directory, e.g./html/index.html
Example
<!-- Absolute path: full URL -->
<a href="https://www.google.com">Visit Google</a>
<!-- Relative path: relative to current file -->
<a href="basics.html">HTML Basics</a>
<!-- Relative path: parent directory -->
<a href="../index.html">Back to Home</a>
Anchor Links: Jump Within a Page
Anchor links let you jump directly to a specific section on the same page — perfect for long pages with "Back to Top" or table-of-contents navigation. It takes just two steps: assign an id to the target element, then link to it with #id.
Example
<!-- Table of contents -->
<a href="#section-intro">Jump to Introduction</a>
<a href="#section-details">Jump to Details</a>
<!-- Target sections (with height set to visualise the jump) -->
<h2 id="section-intro">Introduction</h2>
<p style="min-height:600px;background:#f0f0f0;">Introduction content here...</p>
<h2 id="section-details">Details</h2>
<p style="min-height:600px;background:#f0f0f0;">Detailed information here...</p>
Anchors also support cross-page jumps — just specify both the page and anchor in the link, e.g. <a href="basics.html#section-head">View Header Structure</a>. The browser will open that page and automatically scroll to the specified position.
Image Links & More Uses
Links aren't limited to text — put an <img> tag inside an <a> tag and the image becomes clickable. The <a> tag can also be used to download files and send emails:
Example
<!-- Image link -->
<a href="https://www.example.com">
<img src="/assets/images/tutorials/html-banner-example.webp" alt="Click for details">
</a>
<!-- Download link -->
<a href="document.pdf" download>Download PDF Document</a>
<!-- Email link -->
<a href="mailto:support@example.com">Send Us an Email</a>
- Image links: Click an image to navigate; the
alttext is critical for accessibility - Download links: Adding the
downloadattribute causes the browser to download the file rather than opening it - Email links: Using the
mailto:protocol opens the system's default email client
<a> tag also has a commonly-used title attribute that displays tooltip text on hover: <a href="..." title="Click to view full tutorial">HTML Tutorial</a>. This tooltip is also friendly to assistive technologies like screen readers.
❓ FAQ
rel="noopener" when using target="_blank"?target="_blank", the new page can access the original page's window object via window.opener, potentially allowing malicious pages to tamper with your content or perform phishing attacks. Adding rel="noopener" severs this access, protecting your page. Add rel="noopener" or rel="noreferrer" to all target="_blank" links.https://example.com/page.html) and point to external resources or when you need explicit domain specification. Relative paths use positions relative to the current file (like ./about.html or ../index.html) for same-site navigation. Root paths (like /html/index.html) start from the site root, ideal for large websites. Rule of thumb: relative paths for internal links, absolute paths for external links.id attribute; 2) The id value is misspelled (case-sensitive); 3) The id isn't unique on the page (browser jumps to the first match); 4) The target element is hidden with display:none. Debug method: In the browser console, type document.getElementById("yourId") — if it returns null, the id doesn't exist.📖 Summary
- Links use the
<a>tag; thehrefattribute specifies the destination target="_blank"opens in a new tab — recommended to pair withrel="noopener"- Absolute paths are complete URLs; relative paths are based on the current file's location
- Anchor links use
#idto jump within a page and also work across pages - Nesting
<img>inside<a>creates image links;downloadtriggers a download;mailto:sends email
📝 Exercises
- Create a link: Write a link to
https://www.google.comthat opens in a new tab, with the link text "Search on Google". - Anchor navigation: Create a "Back to Top" link at the bottom of a page that points to the top (hint: add an
idto<body>or use#with a top-level element). - Self-review: Look at the source code of a page you've written, find all
<a>tags, and examine how theirhrefandtargetattributes are set — can you tell where each link will open?