Links
Links are what make the web a web. The <a> ("anchor") element connects a page to other pages, to sections of the same page, to files, email addresses and phone numbers. This lesson covers how to write them and how URLs work.
A basic link
The href ("hypertext reference") attribute holds the destination; the content between the tags is the clickable text, called the link text.
Absolute and relative URLs
| Type | Example | Points to |
|---|---|---|
| Absolute | https://example.com/about.html | A full address, anywhere on the web |
| Relative to this file | about.html | A file in the same folder |
| Into a subfolder | blog/first-post.html | A file inside blog/ |
| Up a folder | ../index.html | A file in the parent folder |
| Root-relative | /contact.html | From the site's root, wherever this page is |
Given this structure:
site/
├── index.html
├── about.html
└── blog/
├── index.html
└── first-post.html
From blog/first-post.html, a link to the home page could be href="../index.html" (relative) or href="/index.html" (root-relative). Use relative links within your own site — they keep working if the domain changes. Root-relative links don't work when opening files directly from your disk (file://), only on a server.
Writing good link text
Screen-reader users often list all links on a page out of context, and search engines use link text to understand the destination. "Click here" and "read more" say nothing on their own. Describe where the link goes, and mention the file type and size for downloads.
Linking to sections of a page
Give the target element an id, then link to it with #:
The part of a URL after # is called a fragment. You can combine it with another page: href="recipes.html#method". href="#" on its own jumps to the top of the page.
Opening in a new tab
target="_blank" opens the link in a new tab or window. Use it sparingly — it takes control away from the user, who can always choose to open a new tab themselves. When you do use it, mention it in the link text. Modern browsers apply rel="noopener" automatically, but adding it explicitly keeps older browsers from giving the new page access to yours.
Links to email, phone and files
mailto: opens the user's email app (with an optional subject); tel: dials on phones. The download attribute tells the browser to save the linked file instead of opening it, optionally with a suggested file name.
Links can wrap other content
An <a> can contain images and even block elements, making whole cards clickable. It can't contain another link or a button.
Links vs buttons
Use <a href> when something navigates — to another page, section or file. Use <button> when something does an action on the current page — submits a form, opens a menu, plays a video. Assistive technologies announce them differently, and they respond to different keys, so the right choice matters.