The anchor element

Definition

An a element with an href creates a hyperlink to another resource or a location within a resource.

Syntax

<a href="/workshops.html">Browse upcoming workshops</a>

Important attributes

href supplies the destination. hreflang, type, and download can add information for specific links. Use target="_blank" only for a justified experience and explain unexpected new windows.

Relative URLs such as /workshops.html stay on the current origin and survive a domain change. Fragment URLs such as #schedule identify an element on the current page. Fully qualified URLs are appropriate for external destinations. Choose the URL form deliberately and test it from the final route depth.

Accessibility

Link text should identify purpose without depending on nearby “click here” phrases. Do not remove focus styles. An anchor without href is not a normal keyboard link.

When several links are read outside their surrounding paragraph, each should remain distinguishable. “Workshop schedule” is more useful than repeated “Learn more.” If a link opens a document type, download, or new context unexpectedly, include that consequence in visible wording.

Navigation, crawling, and state

Use anchors for navigation to another URL and buttons for actions that change local state. Real href values support keyboard activation, browser history, copy link, open in new tab, crawling, and no-script operation. A click handler on a generic element does not supply that full contract.

The current page may be identified with aria-current="page" in a navigation set. Disabled-looking navigation should usually be plain text rather than an anchor that goes nowhere.

External-link safety

Modern browsers generally protect a page opened with target="_blank", but rel="noreferrer" or rel="noopener" can make the isolation and referrer choice explicit when appropriate. Do not add nofollow to every external link; use relationship values only when they truthfully describe the link.

Validate user-supplied destinations before rendering them. Reject dangerous schemes, escape attribute values, and do not construct JavaScript URLs from untrusted text.

Common misuse

Do not use a link to toggle local state when a button is appropriate. Avoid JavaScript URLs and invalid nesting of interactive controls.

Verification checklist

• Activate every link with keyboard and pointer input.
• Check internal, fragment, external, mail, phone, and download destinations.
• Confirm focus remains visible and returns predictably with browser Back.
• Review link text in a links-only screen-reader list.
• Crawl the production site for broken URLs, redirects, and orphan pages.