HTML Link Generator
Builds an anchor tag with the rel value a new tab needs, the attributes screen readers use, and nothing that only looks like good practice.
<a href="https://example.com/pricing">See the pricing</a>
Output is valid and updates as you type.
Fix the highlighted fields to update the output.
Two things about an anchor tag are worth getting right, and the rest is typing.
target="_blank" needs rel="noopener". Without it, the page you open gets a reference to yours through
window.opener and can navigate it somewhere else. Modern browsers imply noopener for target="_blank"
now, and writing it anyway costs nothing and covers the older ones still in use.
And a link that opens a new tab should say so. The reader loses the back button, which is the thing they know how to use, and a screen reader announces nothing about it unless you put it in the link. A hidden span inside the link is how that is normally done.
How to use
- Put in the URL and the link text. The text is the part that matters.
- Tick the new tab box only if there is a reason, and set
reltonoopenerwhen you do. - Add
nofollow,sponsoredorugctorelif the link is one you do not vouch for.
Example
The default is the whole tag when nothing special is needed:
<a href="https://example.com/pricing">See the pricing</a>A paid external link in a new tab, with the announcement:
<a href="https://partner.example.org/offer?ref=us"
rel="noopener nofollow"
target="_blank"
class="link link--external">Read the partner's terms<span class="screen-reader-text"> (opens in a new tab)</span></a>Everything is escaped on the way in, so a quote or an angle bracket in any field becomes an entity rather than an attribute:
<a href="https://example.com/search?q=a&b="1"&c=<2>"
class="a" onmouseover="alert(1)">O'Brien's "quoted" </a></a>Pitfalls
“Click here” is not link text. A screen reader can list the links on a page, and a list of “click here” tells the user nothing. Write what is on the other side: “See the pricing”, “Download the 2026 price list”.
New tabs are a decision made for the reader. They break the back button and multiply windows. Anyone who wants a new tab can middle-click or use the context menu, and they know that. There are reasons to do it, mostly forms in progress and documentation opened alongside, and “it keeps them on our site” is not one.
title is almost never the answer. It does not appear on touch devices, screen readers treat it
inconsistently, and repeating the link text in it adds nothing. If information is needed, put it in the
visible text.
aria-label replaces the link text for assistive technology. So it must contain the visible words, or
a voice-control user asking for “click See the pricing” fails. Leave it empty unless the text genuinely
cannot carry the meaning.
download only works same-origin. On a cross-origin URL the browser ignores it and navigates, and the
download attribute cannot rename a file you do not serve.
rel="noreferrer" hides your referrer too. That breaks the other site’s analytics and your own
attribution of outbound traffic. noopener alone does the security job.
A bare domain without a scheme is a relative path. href="example.com" points at
yoursite.com/example.com, which is the commonest broken link on the web. Include https://.
nofollow, sponsored and ugc are different claims. sponsored for paid placement, ugc for
user-submitted content, nofollow for a link you simply do not endorse. Search engines ask for the
specific one, and using nofollow for everything is accepted and less informative.
Compatibility
Everything runs in the browser: nothing is uploaded and nothing is stored.
Every value is HTML-escaped, so quotes, angle brackets and ampersands become entities and cannot break out of the attribute. The hostile fixture in the test suite includes a class value crafted to inject an event handler, and the expected output shows it inert.
Attributes are omitted entirely when their field is empty rather than written as class="", so the output
is the tag you would have written by hand.
rel="noopener" is implied by browsers for target="_blank" since 2021 in Chrome, Firefox and Safari.
Writing it explicitly matters for older browsers and for anything embedded in a webview, and it documents
the intent for the next person reading the markup.
The download attribute works in every current browser, same-origin only, and is ignored elsewhere. The
screen-reader-text class is the WordPress convention; if your theme does not define it, any
visually-hidden utility class will do, and the hidden text must not be set to display: none, which
removes it from the accessibility tree as well.
Frequently asked questions
Do I still need rel=”noopener”?
target="_blank", which imply it. Write it anyway: it is one word, it covers
older browsers and webviews, and it states the intention.Should links open in a new tab?
How do I mark an affiliate link?
rel="sponsored", or rel="sponsored nofollow" if you want both. It is a disclosure to search engines and
it is not a substitute for the disclosure your readers and the regulator need.What is the difference between aria-label and title?
aria-label replaces the accessible name and is reliably supported. title produces a tooltip on hover
only, is unavailable on touch, and is announced inconsistently. Prefer visible text to either.Is <a> without href valid?
button.