Tag

When to use it

• For a topic on an article: a country, a state, a company, a scheme.
• For a filter the reader can switch on and off.

• Do not use it as a section label above a headline. That is the kicker.
• Do not colour tags by section. Tags are neutral; if every tag is coloured the page becomes confetti.

<a class="p234-tag" href="#">Visa</a>
<a class="p234-tag" href="#">Canada</a>
<a class="p234-tag" href="#">Work permit</a>
<button class="p234-tag" type="button" aria-pressed="true">Markets</button>

Link or button

A tag that navigates is an anchor. A tag that toggles a filter in place is a button with aria-pressed, which is what announces the state to a screen reader. The pressed style is a brand tint with an inset brand ring, so the state does not rely on the fill alone.

In an article

<div class="p234-prose">
  <p>The list sets out which passports qualify for the youth mobility pool next year.</p>
</div>
<div style="display:flex;gap:var(--p234-space-3);flex-wrap:wrap;margin-top:var(--p234-space-6)">
  <a class="p234-tag" href="#">Canada</a>
  <a class="p234-tag" href="#">Work permit</a>
  <a class="p234-tag" href="#">Youth mobility</a>
</div>

How many

Three to six. A wall of tags is the same failure as a wall of related links: it tells the reader nothing about which one matters. Visa articles are auto-tagged with travel and country tags by a database trigger, so the count can grow without anyone deciding to grow it. Cap it in the template.