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:

<a href="https://www.example.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:

<a href="https://www.example.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)

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: 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>

• 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

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.

<!-- 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:

<!-- Image link -->
<a href="https://www.example.com">
  <img src="banner.jpg" 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 alt text is critical for accessibility
• Download links: Adding the download attribute causes the browser to download the file rather than opening it
• Email links: Using the mailto: protocol opens the system's default email client

📖 Summary

• Links use the <a> tag; the href attribute specifies the destination
• target="_blank" opens in a new tab — recommended to pair with rel="noopener"
• Absolute paths are complete URLs; relative paths are based on the current file's location
• Anchor links use #id to jump within a page and also work across pages
• Nesting <img> inside <a> creates image links; download triggers a download; mailto: sends email

📝 Exercises

1. Create a link: Write a link to https://www.google.com that opens in a new tab, with the link text "Search on Google".
2. Anchor navigation: Create a "Back to Top" link at the bottom of a page that points to the top (hint: add an id to <body> or use # with a top-level element).
3. Self-review: Look at the source code of a page you've written, find all <a> tags, and examine how their href and target attributes are set — can you tell where each link will open?