HTML Story Links

3.0 Hyperlinks

The anchor element <a> creates hyperlinks — the mechanism that makes the web a web. An anchor can link to another page, a section within the current page, a file download, an email address, or a telephone number.

<a href="https://example.com">Visit Example</a>

The href (hypertext reference) attribute is the link destination. The text or element between the opening and closing tags is the clickable link content.

3.1 URL Types

The value of href can be any of several URL forms:

URL forms

Form	Example	Notes
Absolute URL	`https://example.com/page.html`	Full URL including scheme and host. Works from anywhere.
Root-relative	`/docs/guide.html`	Starts from the site root. Works across directories on the same host.
Relative URL	`../chapter2.html`	Relative to the current page's path. Use `..` to go up a directory.
Fragment	`#section-title`	Jumps to an element with that `id` on the current page.
Cross-page fragment	`page.html#section`	Navigate to a page then scroll to an anchor within it.
mailto	`mailto:user@example.com`	Opens the user's default email client.
tel	`tel:+15551234567`	Initiates a phone call on mobile devices.
download (rel)	`href="file.pdf" download`	Browser downloads the resource instead of navigating to it.

3.2 Link Targets

The target attribute controls where the linked document opens:

<a href="page.html" target="_blank" rel="noopener noreferrer">Open in new tab</a>
<a href="page.html" target="_self">Open in same tab (default)</a>
<a href="page.html" target="_parent">Open in parent frame</a>
<a href="page.html" target="_top">Open in top-level frame</a>

When using target="_blank", always include rel="noopener noreferrer" to prevent the new page from accessing your page via window.opener, which is a known security vulnerability.

3.3 Fragment Anchors

To create an in-page jump target, give any element an id attribute:

<!-- jump target -->
<h2 id="installation">Installation</h2>

<!-- link to it -->
<a href="#installation">Go to Installation</a>

Browsers scroll smoothly to the target element and update the URL bar with the fragment. CSS scroll-behavior: smooth on html enables animated scrolling.

3.4 Navigation Patterns

A site navigation bar wraps a list of links inside a <nav> element, which signals its purpose to assistive technologies:

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about.html">About</a></li>
    <li><a href="/contact.html">Contact</a></li>
  </ul>
</nav>

Mark the currently active page with aria-current="page" on its link to inform screen readers which page is active.

3.5 Anchor Attributes Reference

Anchor attributes

Attribute	Effect
`href`	Destination URL. Required to make the element a link.
`target`	Browsing context: `_self` (default), `_blank`, `_parent`, `_top`, or a frame name.
`rel`	Relationship to the linked document. Use `noopener noreferrer` with `target="_blank"`.
`download`	Suggests downloading the resource rather than navigating. Optional value sets the filename.
`hreflang`	Language of the linked document.
`type`	MIME type hint for the linked resource.
`aria-current`	Set to `"page"` on the link matching the current page for screen readers.

3.6 References

Links References

Resource	Description
MDN: <a> element	Full attribute reference including security notes for target="_blank".
MDN: Creating links	Tutorial on absolute/relative URLs, best practices, and accessibility.
web.dev: Links	Modern HTML links lesson with security and accessibility coverage.
w3schools: HTML Links	Quick reference with live examples for all link types.

HTML Story: Links