Vanilla Breeze

Link Relations

Treat the native HTML rel attribute as VB's first-class vocabulary for link intent. Authors get safer outbound links by default, semantic CSS hooks with no classes, and a JS-discoverable index of links by intent.

Why rel

The native rel attribute on <a> is standardised, ASCII-tokenised, machine-readable, and works directly with attribute selectors like a[rel~="external"]. Most sites under-use it — they reach for ad-hoc classes (.external-link, .tag-chip) or data attributes for things HTML already names. VB treats rel as the native vocabulary of link intent so authors don't have to invent one.

Doing so unlocks three concrete wins: safer outbound links by default, semantic CSS styling with zero classes, and a JS-discoverable index of links by intent that other VB features can build on.

The vocabulary

These are the high-value tokens VB styles or upgrades. All are defined by the HTML Standard and MDN.

Security and behavior

TokenMeaningVB treatment
noopenerNew window can't access window.openerAuto-added by JS to any <a target="_blank"> without an explicit opener policy
noreferrerSends no Referer header; implies noopenerAuto-added when <html data-link-privacy="strict">
openerExplicitly preserve window.openerHonored; suppresses the noopener upgrade
externalDestination is on another siteTrailing ↗ arrow via CSS (no class needed)
nofollowDon't endorse the destination for rankingNo styling — pure metadata

Document and support semantics

TokenMeaningVB treatment
helpContext-sensitive helpDotted-underline styling
licenseLicense under which the page is offeredMuted (smaller, slightly transparent) — footer-friendly
privacy-policyLink to the site's privacy policyMuted
terms-of-serviceLink to the site's termsMuted
searchLink to a search resource for this documentNo default styling — available as a CSS hook
authorLink to info about the authorAvailable for author-card components to discover
meLinked resource represents the current authorAvailable for identity / profile blocks to discover

Navigation and structure

TokenMeaningVB treatment
prevPrevious document in a seriesLeading ← arrow
nextNext document in a seriesTrailing → arrow
bookmarkPermalink to nearest <article> ancestorNo default styling — CSS hook only

Classification and alternates

TokenMeaningVB treatment
tagA tag (topic / facet) that applies to the pagePill-chip styling
alternateAlternate representation (PDF, translation, etc.)Pair with hreflang / type for language or media-type alternates; no default styling

Three rules

VB's link authoring discipline is just three rules. They let class, data-*, and rel each carry the kind of information they're best at without overlap.

1. rel is for link meaning

If a link has a meaningful relationship to the current document (it's external, it's the next chapter, it's the license, it's a tag), express that with rel. CSS and JS can then upgrade it without an extra class.

2. class is for visual variants

If the only thing you want to change is appearance — muted, plain, button-styled — that's a class concern. VB ships a[data-variant] hooks for the common ones; pick those first.

3. data-* is for app config

Anything app-specific (tracking IDs, analytics labels, behavior toggles) goes in data-*. Never overload rel as a styling hook — see the anti-patterns at the bottom.

CSS upgrades

All of these work with zero JavaScript. Just add the rel token in your HTML and the styling applies via src/utils/links.css.

JS upgrades

The init module at src/utils/links-init.js auto-runs on any page with a <a target="_blank">, and exports two helpers for direct use.

Safer outbound links by default

Every <a href target="_blank"> without an explicit opener policy (opener, noopener, or noreferrer) picks up rel="noopener" after the module runs. Idempotent — running twice is the same as running once.

Find links by intent

Other utilities can ask for "all the help links" or "all the tag links" on a page via collectLinksByRel:

Privacy mode

Sites that want stronger privacy on outbound links can opt in by setting data-link-privacy="strict" on the root <html> element. Upgraded links then also receive rel="noreferrer", which suppresses the Referer header on the outbound request.

This is opt-in because some site flows (referral analytics, affiliate tracking, server-side request filtering) legitimately depend on the Referer header. Don't enable it globally without understanding the consequences.

Anti-patterns

Don't use rel as a styling hook for things that aren't link relationships. The whole point of the three rules is that each attribute carries the kind of information it's best at.

Don't invent rel tokens

Don't use rel for app config

Don't fight the platform

Reference
↑