Learning objectives
Write a hyperlink; connect a fragment to a unique ID; distinguish relative and absolute URLs.
Prerequisites
Understand elements, attributes, and a complete document.
Understand the markup
An a element becomes a hyperlink when it has an href attribute. The attribute contains a URL, while the element's content is the link label. A reader should understand the destination from that label and its surrounding context. Read the membership requirements is more useful than click here.
An absolute URL includes a scheme and host, such as https://example.org/guide/. A root-relative URL such as /guide/ starts at the current origin's root. A document-relative URL such as images/map.png is resolved against the document's base URL. Moving a document to another folder can therefore change where a relative URL points.
A fragment URL begins with # and identifies a location in a document. Give the target a unique id and use the same value after the hash. IDs are case-sensitive and should not contain spaces. A fragment link also changes the URL, allowing readers to share a particular section. Heading targets can be obscured by sticky headers; CSS scroll-margin-top can reserve enough space.
Opening a new tab is usually unnecessary. If a deliberate workflow uses target="_blank", explain the behavior in the label or nearby text. Modern browsers implicitly apply noopener to these links; explicitly adding rel="noopener" also documents the intended isolation. Use noreferrer only when you also intend to suppress the referrer. A link navigates; use a button for an action on the current page.
Try a working example
<h1>Reading guide</h1>
<a href="#hours">Jump to opening hours</a>
<h2 id="hours">Opening hours</h2>
<p>Tuesday: 10:00–18:00</p>Expected output
Activating the link moves to the Opening hours heading. The address gains #hours in a standalone document.
Another example
<p><a href="https://example.org/guide/">Read the visitor guide</a></p>
<p><a href="../contact.html">Contact the library</a></p>Common mistakes
An empty href can reload or navigate to the current page. Do not use href="#" as an action placeholder. Duplicate IDs make fragment destinations ambiguous.
Accessibility and browser notes
Links work with Tab and Enter. Do not remove visible focus styles or rely only on color to distinguish links in prose.
Check your work
Test your links from the location where the page will actually live. A path that works beside a local file can fail after upload when folder names or letter case differ. Test both keyboard activation and the browser Back button. For fragment links, copy the resulting URL into another tab to verify that the destination can be reached directly.
Practice
Add a link named Read the return policy that jumps to a heading with the ID returns.
Review the solution
<a href="#returns">Read the return policy</a>
<h2 id="returns">Return policy</h2>
<p>Return borrowed books within three weeks.</p>Related lesson
Choose ordered, unordered, and description lists
Specifications and further reading
Navigation, destinations, and security boundaries
A URL is resolved against a base URL, which is normally the document URL but can be changed by a base element. Introducing base can alter every relative link and form destination, including fragment-only links, so it should be an architectural decision rather than a quick fix for a broken folder path. Prefer correcting the resource relationship when only one asset is misplaced.
Do not put untrusted text into href without deciding which URL schemes your application permits. HTML escaping prevents attribute-boundary injection, but it does not turn a javascript: URL into an appropriate destination. Applications receiving links from users need scheme validation as well as output escaping. That validation is separate from choosing clear link text.
Downloads also have constraints: the download attribute is a hint with origin and browser restrictions, and the receiving server can influence handling through response headers. Do not promise that every external URL will download merely because download is present. Test the real file path, content type, filename, and browser behavior. A good link communicates the file type and approximate size when that information helps someone decide whether to activate it.