Skip to content
SkillCodex
Menu

Link

Link

A named connection to another destination that preserves standard browser navigation behavior.

Try the component
Context, sources and actions
Sources and revision
Updated
Version
v1.0.26 · r2
Sources
5 sources
Status
Published
Read the sources

You may have searched for: go to the billing pageclick this text to open another articlea destination I can open in a new tab

All phrasings
Save and share

Recognize

Trigger or navigate

Try it

Does the control trigger an action, change location, or need to remain icon-only?

Shared trial context

A project screen lets the user trigger an operation or move to a destination from a control suited to the available space.

Link

Link navigates and has an href; Button performs an action, while Icon button remains an action even when represented only by an icon.

Which fits your need?

Link

Moving to another page or route

Button

Submitting or resetting a form

Which component will you use here?
Difference and sources

Link navigates and has an href; Button performs an action, while Icon button remains an action even when represented only by an icon.

Read the sources

Parts of the specimen

Position in the atlas

Relationship map

Locate the chapter, neighboring concepts, and the next useful decision.

  • Chapter

    Trigger or navigate

    Link belongs to this comparison group.

  • Do not confuse

    Button

    Choose Link if activation takes the user to another page or route that can open in a new tab. Choose Button if activation changes something here, such as submit, open, or delete.

    Compare this pair
  • Do not confuse

    Icon button

    Choose Link if activation goes to another page or route, even when only an icon is shown. Choose Icon button if activation does something in place, such as copy, close, or favorite.

    Compare this pair
  • Next step

    Compare the concepts in the chapter before choosing an implementation.

    Open the chapter

In your own words

Understand

What people describe

Documented aliases: hyperlink, text link, navigation link

  • go to the billing page
  • click this text to open another article
  • a destination I can open in a new tab
  • navigate to project settings
  • a text label with a real web address
  • take me back to the dashboard

Choose

Use it when

  • Moving to another page or route
  • Opening a downloadable or external destination with an honest label

Avoid it when

  • Running an in-place mutation
  • Using a click handler without a real destination

Compare

Compare similar concepts

Verification checklist

Try these actions in the lab, then check the same behaviours in your agent’s result. Adapt the example names to your interface.

  1. 1. Do this

    Focus the link with Tab, read its destination, then activate it with Enter.

    Expected result

    The link has a meaningful name and navigates to the promised location.

  2. 2. Do this

    Use the browser’s Open in new tab action or its usual modifier-click on the link.

    Expected result

    Native link behavior works because the destination is a real link, including when opening it separately.

  3. 3. Do this

    Read and focus the link among nearby text and controls in a narrow window.

    Expected result

    Its purpose and focus remain visible, its target does not overlap another control, and any unexpected new-window behavior is explained.

Full contract
  1. 1A real href points to the destination
  2. 2The label makes sense out of context
  3. 3Keyboard and browser link operations remain native
  4. 4Current or external state is exposed only when useful

Understand → Recognize → Choose → Compare

Pack for your agent

Pre-written instructions to paste into your agent. Copying executes nothing.

Full entry, saving and provenance

Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.

Pack digest: sha256:eb6541262c2cb55060c527f7172a5c2782d98678592622940cf7848a257a2b3b

In code

TechnologyPrimitiveVersionCaveat
Web platform

a[href]

NativeA link changes location and preserves browser features such as opening in a new tab, copying the address, and visited state.

Technical details

Behaviors

  • Navigate to a destination

    Activation changes the URL or moves to a named destination and preserves standard link behavior.

  • Follow with native link activation

    Pointer, touch, or Enter follows the link; Space keeps its native page-scrolling behavior.

States

  • Account summary

    Account summary

  • Billing details

    Billing details

State transitions

  • Account summary → Billing details

    Enter, pointer, or touch follows the Billing fragment link to the real details section.

  • Billing details → Account summary

    The Back to summary fragment link returns to the account summary as real navigation.

Test scenarios

Context
An account summary links to its Billing details section and an external service-status page.
Mission
Open Billing with Enter, return, then use the browser context menu on the external status link.
Primary state
Each descriptive link has a real destination and a focus style distinct from surrounding text.
Edge case
The external destination is identified in accessible text when opening behavior or context would otherwise surprise users.

Visual signals

  • Descriptive text label
  • Underlining or consistent link styling
  • Visited or current state where useful

Behavioral signals

  • Activation changes location
  • Context menu exposes link operations
  • Modifier click opens a new tab according to browser behavior

Accessibility

Role
a[href]
Accessible name
The primary control or named region for Link has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus
Every link has a visible focus indicator and its hit area does not overlap adjacent links.
Dismissal
Not applicable: navigation is handled by browser history rather than dismissing the link.
Scroll
Route or fragment navigation scrolls to a meaningful destination predictably, and focus is managed when context changes.
Announcement
Link text names the destination, while current, external, download, or language changes are exposed when relevant.
Keyboard
  • Tab focuses the link
  • Enter follows the destination
  • Browser modifier keys preserve native new-tab behavior

Bindings

Open the HTML, ARIA, Radix, and shadcn matrix
  • a[href]

    implementationKind
    native
    nativeElement
    a[href]
    ariaPattern
    link
    radixPrimitive
    Not applicable
    shadcnRecipe
    Not applicable
    runtimeDependency
    Not applicable
    packageName
    Not applicable
    exportName
    Not applicable
    exactVersion
    Not applicable
    status
    verified
    sourceId
    source-ui-html-link
    deprecationStatus
    active
    replacement
    Not applicable
    validFrom
    Not applicable
    validUntil
    Not applicable

    Equivalence caveat: A link changes location and preserves browser features such as opening in a new tab, copying the address, and visited state.

    Verify binding source

Sources

  • WHATWG HTML: The a element
    sourceId
    source-ui-html-link
    kind
    standard
    canonicalUrl
    https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element
    publisher
    WHATWG
    sourceRevision
    http-last-modified:2026-07-19T13:52:46Z
    consultedAt
    2026-07-19
    license
    Not stated
    contentDigest
    sha256:fe0a3d4315ccdf4f171cbb0c61ee6188b0db2dfe13a7c7f1f04f6b37528661f6
    status
    verified

    Claim covered: Link: normative native semantics, states, attributes, and browser behavior for a[href].

  • WCAG 2.2: Focus Appearance
    sourceId
    source-ui-wcag-understanding-focus-appearance
    kind
    documentation
    canonicalUrl
    https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
    publisher
    W3C WAI
    sourceRevision
    http-last-modified:2026-07-02T10:07:49Z
    consultedAt
    2026-07-19
    license
    Not stated
    contentDigest
    sha256:fdcf316a1f0e3cc758eda9618322d132862124ff0a3f3b1a3acbf20daf804ff0
    status
    verified

    Claim covered: Link: informative WCAG guidance for evaluating visible keyboard focus appearance.

  • WAI-ARIA 1.2: Roles Model
    sourceId
    source-ui-wai-aria-roles
    kind
    standard
    canonicalUrl
    https://www.w3.org/TR/wai-aria-1.2/#roles
    publisher
    W3C WAI
    sourceRevision
    W3C-REC-wai-aria-1.2-20230606
    consultedAt
    2026-07-19
    license
    Not stated
    contentDigest
    sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
    status
    verified

    Claim covered: Link: normative ARIA role definitions and constraints for the stated accessible role.

  • WHATWG HTML: The button element
    sourceId
    source-ui-html-button
    kind
    standard
    canonicalUrl
    https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element
    publisher
    WHATWG
    sourceRevision
    http-last-modified:2026-07-19T13:52:46Z
    consultedAt
    2026-07-19
    license
    Not stated
    contentDigest
    sha256:418a8f9ce1e8690c6d458121120b0b3b7cd907aa92b2101b85f82f7e02d5ac2f
    status
    verified

    Claim covered: Link: normative native semantics, states, attributes, and browser behavior for button.

  • WAI-ARIA APG: Button Pattern
    sourceId
    source-ui-aria-button
    kind
    documentation
    canonicalUrl
    https://www.w3.org/WAI/ARIA/apg/patterns/button/
    publisher
    W3C WAI
    sourceRevision
    http-last-modified:2026-07-09T07:07:36Z
    consultedAt
    2026-07-19
    license
    Not stated
    contentDigest
    sha256:863329ea659a53439b0953eec0bd0af7c6219e372d0e878f75e57d263924704c
    status
    verified

    Claim covered: Link: informative APG guidance for the button pattern: roles, states, relationships, and keyboard interaction.