The anchor element <a> creates hyperlinks. The href attribute determines the destination; link text should describe the target without surrounding fluff.
URL shapes
- Absolute:
https://example.com/path—scheme + host + path. - Protocol-relative (legacy):
//cdn.example.com/file.js—inherits scheme; avoid when possible. - Root-relative:
/assets/logo.svg—starts at site origin. - Relative to document:
../images/photo.jpg—walks directories. - Fragment:
#faqjumps within the page when matchingid.
Non-HTTP schemes
mailto:user@example.comopens mail clients; includesubject/bodyquery params sparingly.tel:+15551234567triggers dialers on capable devices.- Custom schemes (
slack://, app deep links) require installed handlers.
Security and UX attributes
target="_blank"should pair withrel="noopener"(and oftennoreferrer) for external windows.downloadhints filename for same-origin or CORS-enabled downloads.rel="nofollow sponsored"communicates crawling hints when required.
<a href="/css/intro">Continue to the CSS introduction</a>Rendered output
Open the HTML reference desk (in-app link)
MDN: the <a> element ↗
External link uses target="_blank" + rel="noopener noreferrer".
Accessibility
- Write unique, descriptive link text (“Download Q3 report PDF”).
- If multiple “Read more” links exist, ensure surrounding context differentiates them.
- For icon-only links, provide visually hidden text or
aria-label—but visible text is usually clearer.
Security and reality checks
target="_blank"+rel="noopener": mitigateswindow.openerattacks on cross-origin navigations.- Gifted URLs: user-supplied
hrefinvitesjavascript:/data:vectors—sanitize allowlists server-side. - Sponsored / tracking links: document
relusage with SEO/comms—implement consistently, not whimsically.
Accessibility test script (links)
- Tab path check: press Tab 3 times in the rendered output card and verify each link receives a visible focus style.
- Expected screen reader phrase: each link should be announced with meaningful text (for example, “Open the HTML reference desk, link”).
- 200% zoom check: zoom to 200% and ensure link text does not overlap or truncate so destination meaning stays clear.
Pitfalls juniors hit repeatedly
- Using
<a href="#">as fake buttons—breaks semantics, hurts keyboard UX, pollutes history. Preferbutton type="button"unless navigation truly occurs. - Links styled like buttons confuse expectations—anchors should navigate or jump; buttons trigger actions in-page.
- Download attributes on cross-origin URLs may be ignored without proper CORS +
Content-Disposition—never promise downloads you cannot honor.
<a> vs router frameworks
SPAs intercept clicks for client routing, but SSR + progressive enhancement paths still rely on sane hrefs for open-in-new-tab, copy link, prefetch, SEO, and no-JS fallbacks.
Important interview questions and answers
- Q: When should you use `strong` vs `b`?
A: Use `strong` for semantic importance; use `b` only for stylistic offset without importance semantics. - Q: Why is `target="_blank"` usually paired with `rel="noopener"`?
A: It blocks the opened page from controlling the opener via `window.opener`, improving security. - Q: Why avoid fake buttons built with ``?
A: Anchors are for navigation; actions should use `
Challenge
Accessible link text
- Create two links: one descriptive, one vague (“click here”).
- Rewrite the vague link so it makes sense out of context.
Done when: both links work and the descriptive one needs no surrounding sentence to be understood.