DevKit Tools

Hyperlink Generator

Generate anchor markup with target, rel, download and title attributes, with safe defaults for external links.

Content/Hyperlink

Anchor markup with safe defaults for external links (noopener/noreferrer).

Live preview

<a href="https://example.com/docs" target="_blank" rel="noopener noreferrer">Visit our docs</a>

About the hyperlink generator

A link opened with target="_blank" gives the new page a reference back to yours through window.opener, which is a genuine security hole. rel="noopener" closes it, and this generator adds it automatically.

rel="nofollow" is separate: it tells search engines not to pass ranking credit, which matters for user-submitted or paid links.

How to use it

  1. 1Write the link text and destination.
  2. 2Enable new tab if it should leave your site, and noopener is added for you.
  3. 3Add nofollow for untrusted or paid links.
  4. 4Copy the HTML.

Questions

Why is rel="noopener" needed?

Without it the opened page can reach back through window.opener and redirect your original tab. noopener severs that link.

Should external links open in a new tab?

Opinions differ. It keeps people on your site, but it also takes control away from the user. If you do it, make it visually obvious.

What does the download attribute do?

It tells the browser to save the file instead of navigating to it. It only works for same-origin URLs unless the server sends the right headers.

More HTML tools