1 Overview of the anchor element

The anchor element, written as the <a> tag, is one of the fundamental building blocks of HTML. It creates hyperlinks, allowing users and software to move from one resource to another within a document, across websites, or between different kinds of content. Because of this role, it is central to the structure of the web.

1.1 Definition and purpose

An anchor element defines a clickable reference that points to a destination identified by its href attribute. The destination may be a web page, a section within the same page, a file, an email address, or another resource that a browser or application can handle. In practice, the element provides a standard way to connect documents and information.

1.2 Role in web navigation

Anchors organize web navigation by turning text, images, or other content into links. They support movement between pages, within long documents, and to external services. This linking function helps form the interconnected structure that distinguishes hypertext from linear text.

1.3 Historical background

The anchor element has been part of HTML since the early development of the web. It reflects the original idea of hypertext: documents should contain references that let readers jump directly to related material. Over time, browsers added support for more link targets, more attributes, and richer user interactions, but the basic concept has remained stable.

2 Syntax and usage

The anchor element is usually simple in form, but its behavior depends heavily on the value of its attributes. Most commonly, it is used with href, though it can appear without one when serving as a placeholder for scripting or interactive behavior.

2.1 Basic tag structure

A typical anchor contains opening and closing tags with link text or other inline content inside. The href attribute supplies the destination. For example, a text link can be written as an anchor around a short phrase, making the phrase act as the clickable part of the document.

2.2 Linking to URLs

The most familiar use of an anchor is linking to a URL. The address may be absolute, including a scheme and domain name, or relative, pointing to another file or location within the same site. Relative links are widely used in site organization because they are flexible and easier to maintain.

2.3 Linking to page fragments

Anchors can also jump to a specific part of a page by using a fragment in the link target. This makes them useful for headings, footnotes, and other internal destinations.

2.3.1 Fragment identifiers

A fragment identifier is the portion of a URL that follows a hash symbol. It identifies a target element within a document, commonly by matching an element’s id value. When activated, the browser scrolls to that location or otherwise focuses it as appropriate.

2.3.2 In-page navigation

In-page navigation is especially common in long articles, documentation, and reference pages. It lets readers skip directly to sections of interest. Tables of contents often rely on fragment links to create this behavior.

2.4 Linking to non-web resources

Anchors can point to resources beyond ordinary web pages. Common examples include email links using the mailto: scheme, telephone links using tel:, and downloads or local files in environments where such access is permitted. Support depends on the browser, operating system, and user settings.

3 Attributes of the anchor element

Anchor behavior is shaped by a set of attributes that control destination, browsing context, metadata, and transfer details. Some are widely used, while others are specialized for specific situations.

3.1 href

href is the primary attribute of the anchor element. It specifies the target resource and usually determines whether the anchor behaves as a hyperlink. Without it, the element does not function as a standard link.

3.2 target

The target attribute tells the browser where to open the linked resource. It may load in the same tab, a new tab, or another named browsing context. This affects how users move between documents and how much the original page remains available.

3.2.1 Common target values

Common values include _self, which opens the link in the current context, and _blank, which opens it in a new one. Named targets can direct links to a specific frame or browsing window when such a context exists.

When a link opens in a new browsing context, the original page remains available. This can be useful for leaving supporting material accessible, though it should be used thoughtfully because it changes the user’s navigation flow.

3.3 rel

The rel attribute describes the relationship between the current document and the linked resource. It is used for both informational and security-related purposes, and its meaning depends on the values supplied.

Some rel values help reduce risks associated with opening external links, especially when a link uses a new browsing context. These values can limit access between the linked page and the original page.

3.3.2 Relationship values

Other values express document relationships such as navigation sequences, alternate representations, or referenced resources. They are useful for browsers, search tools, and accessibility technologies that interpret link meaning.

3.4 download

The download attribute suggests that the linked resource should be downloaded rather than displayed in the browser. It may also provide a default filename. Support and exact behavior can vary depending on the resource type and browser policies.

3.5 hreflang

hreflang indicates the language of the linked resource. It does not change the browser’s language, but it can help search systems and user agents understand what language the destination uses.

3.6 type

The type attribute identifies the media type of the linked resource. This can give browsers or processing tools a hint about the content format, such as HTML, PDF, or image data.

3.7 referrerpolicy

referrerpolicy controls how much referrer information is sent when the link is followed. It is used to manage privacy and request behavior by limiting or shaping the data included in the outgoing request.

Browsers treat anchors as interactive elements with well-defined default behavior. That behavior includes pointer activation, keyboard support, history integration, and context-sensitive options.

4.1 Default click behavior

When activated, an anchor typically navigates to the target specified by href. The browser may update the address bar, load a new document, or move to a fragment within the current page. If the link is prevented by script, the default action may not occur.

4.2 Keyboard interaction

Anchors are generally focusable and can be activated using the keyboard, making them usable without a pointing device. This is a key part of their accessibility and aligns them with other built-in interactive controls.

4.3 Context menu actions

Browsers usually provide link-specific context menu commands such as opening in a new tab, copying the link address, or saving the target. These actions support user choice and make links more flexible than plain text references.

4.4 Browser history and navigation

Following a link usually adds a new entry to the browser history. This lets users move backward and forward through visited pages. Fragment navigation may also affect scrolling position and, in some cases, history state.

5 Accessibility considerations

Accessible link design helps all users understand where a link leads and how it behaves. Clear presentation and meaningful text are especially important in assistive technology contexts.

5.1 Accessible link text

Link text should be descriptive enough to make sense out of context. Phrases such as “Read the guide” or “Download the report” are more informative than vague labels like “Click here.” Good text helps both sighted users and screen reader users.

5.2 Screen reader behavior

Screen readers commonly announce anchors as links and may also read associated metadata such as the destination, visited state, or language cues. This allows users to scan pages by link and understand the structure of a document more quickly.

5.3 Focus states

Visible focus indicators show which link is currently selected by keyboard navigation. These indicators are essential for users who do not use a mouse and are often styled to stand out clearly against the page design.

Links and buttons serve different purposes. Anchors are intended for navigation, while buttons usually trigger actions within the current page or application. Confusing the two can lead to poor usability and inconsistent keyboard behavior.

6 Styling the anchor element

Anchors are commonly styled with CSS to match a site’s visual design. Even with extensive customization, they should remain recognizable as interactive links.

6.1 CSS pseudo-classes

CSS pseudo-classes allow different visual states for links depending on user interaction or visit history. They are widely used to refine appearance without changing the underlying semantics.

:link applies to unvisited anchors that have a valid href. It is often used to define the default appearance of links before they are followed.

6.1.2 :visited

:visited targets links that the browser considers previously visited. Browsers impose restrictions on which styles can change for privacy reasons, so visual differences are limited.

6.1.3 :hover

:hover applies when the pointer is over the link. It is often used to provide a subtle visual signal that the element is interactive.

6.1.4 :focus

:focus styles the element when it receives keyboard or programmatic focus. It is especially important for navigation accessibility and often complements hover styling.

6.2 Text decoration and color

Links are traditionally shown with underlining and distinct color, though modern designs may alter both. Despite customization, the visual treatment should preserve clarity and enough contrast to distinguish links from surrounding text.

Designers may style anchors as buttons, cards, icons, or block-level components. Such treatments are common in user interfaces, but the element’s link semantics should remain evident so that accessibility tools and user expectations are not undermined.

7 Security and best practices

Because anchors connect users to external resources and may interact with browser features, careful use helps avoid confusion and reduce risk.

7.1 Preventing reverse tabnabbing

When links open in a new browsing context, the linked page should not be able to manipulate the original page in unsafe ways. Appropriate rel values are commonly used to limit this risk.

External links should clearly indicate when users are leaving the site or opening outside content. This is especially helpful when the destination may use different navigation patterns, policies, or file types.

7.3 Avoiding misleading link text

Link text should match the destination and purpose of the link. Misleading labels can confuse users, reduce trust, and create accessibility problems, particularly when links are skimmed out of context.

7.4 Handling downloadable content

When linking to files for download, the file type and expected behavior should be apparent. Clear labeling helps users decide whether to open or save the file and reduces surprise when a browser handles the resource differently than a web page.

8 Common use cases

Anchors appear throughout websites and documents because they provide a simple and reliable way to connect content.

8.1 Navigation menus

Site navigation menus often use anchors for primary destinations such as home pages, product sections, help pages, or account areas. Their consistent behavior makes them well suited to menus and headers.

Long articles and reference works frequently use anchor links in tables of contents. These links let readers move directly to a section instead of scrolling through the entire document.

Special link schemes can start an email composition window or a phone call on compatible devices. These links are especially useful on mobile platforms and in contact pages.

Bookmark-style links point to fragments within a document, letting users return to specific headings, notes, or sections. They are common in documentation, glossaries, and legal or technical references.

8.5 Social and external references

Anchors are used to cite external sources, share resources, or connect to social profiles and media platforms. They serve as the basic mechanism for building outward connections from a page to related material.

The anchor element works within a broader ecosystem of web standards that define addresses, document structure, and script-driven behavior.

9.1 Hypertext and URLs

Hypertext is the system of linked documents that underlies the web, and URLs provide the address format used to identify resources. Anchors bring these concepts together by creating navigable paths between content locations.

Several other HTML elements relate to linking, navigation, or interactive controls. Each has a different role, even when they are sometimes used in similar visual patterns.

The <link> element belongs in the document head and associates the page with external resources such as stylesheets or alternate versions. It does not create visible hyperlinks for users.

9.2.2 <nav>

The <nav> element identifies a section of navigation links. It does not create links itself, but it often contains multiple anchors that form a navigation area.

9.2.3 <button>

The <button> element performs an action rather than navigating to a new resource. It is commonly used for form submission, interface controls, and scripted operations.

9.3 JavaScript interaction with anchors

Scripts can modify anchor behavior, alter destinations, or intercept clicks for custom interfaces. This allows developers to implement dynamic routing, analytics, modal dialogs, and other interactive patterns while still using the anchor element as a semantic foundation.