Link generator cropped

What is the HTML Link Generator?

The HTML Link Generator is a free online tool that builds an HTML link — an anchor tag — for you, with the safety and accessibility details done right. You set the link text, the destination, how it opens, and the relationship attributes, and the tool gives you clean anchor markup to paste into your page. It is made for anyone who writes links and wants them to be correct: bloggers linking to sources, site owners adding external links, and beginners learning how the <a> tag actually works.

The important part is the “safe” in the description. Only safe URL schemes are allowed — http, https, mailto, tel and relative URLs. A javascript: URL or any other dangerous protocol is rejected outright and never generated. And when a link opens in a new tab, the tool adds rel="noopener noreferrer" automatically, which stops the new page from reaching back into yours.

Everything runs in your browser. There is no sign-up, and nothing you type leaves your device.

How to use the HTML Link Generator

  1. Set the Link text. This is the visible, clickable text — the default is “Visit our website”. Write text that says where the link goes: “Read the HTML guide” beats “Click here”.
  2. Set the Destination URL. Paste the full address, an email address (mailto:), a phone number (tel:) or a relative URL to another page on your own site.
  3. Choose the Target behaviour. “Same tab” opens the link in the current tab; “New tab” opens it in a new one; “Parent frame” and “Whole window” are for pages inside frames. The default is “New tab”.
  4. Add a Title attribute (optional). This is the tooltip readers see when they hover over the link. The default is “All About HTML — learn HTML, CSS and JavaScript”. Keep it short — it should add information the link text does not already give.
  5. Set the Relationship attributes (rel). noopener and noreferrer are ticked by default and should stay ticked for links that open in a new tab. Tick nofollow only when you do not want search engines to follow the link or pass ranking credit to it — for paid links or untrusted user content, for example.
  6. Make it a download link (optional). Tick “Download link” and the browser saves the file instead of opening it. You can also suggest a filename. Note that the download attribute only works for links to files on your own site; browsers ignore it for links to other sites.
  7. Watch the live preview. The preview on the right shows the link as a reader will see it. It runs in a sandboxed frame, so links do not navigate from the preview.
  8. Copy or download. Click Copy to take the HTML, or Download to save it as link.html. Clear wipes the settings; Reset restores the defaults.

Worked example

Take the default settings: link text “Visit our website”, destination https://allabouthtml.com/, target “New tab”, and noopener and noreferrer ticked. The Generated HTML box gives you:

<a href="https://allabouthtml.com/" target="_blank" rel="noopener noreferrer" title="All About HTML — learn HTML, CSS and JavaScript">Visit our website</a>

Try it yourself: change the text to “Read the CSS guide”, set the URL to https://allabouthtml.com/, and the output updates at once. Then tick nofollow and watch nofollow join the rel attribute. If you type javascript:alert(1) as the URL, the tool refuses it — that is the safety check working, not a bug.

Where a link generator actually helps

External links on a blog. Every source link in a blog post should open in a new tab so the reader stays on your page, and it should carry noopener noreferrer for safety. Doing that by hand on every link is slow and error-prone — it is easy to forget the rel attribute. Build the link here once and the safety attributes are included automatically.

Email and phone links. A mailto: link opens the reader’s email app with the address filled in; a tel: link dials the number on a phone. Both are simple to get wrong by hand — a missing colon, a space in the number. Type the address or number in the tool, and the URL is built correctly.

Download links. When you offer a file — a PDF guide, a spreadsheet, a zip of resources — a download link tells the browser to save it instead of opening it. Tick the download option, suggest a filename, and the reader gets the file with a sensible name instead of a random one.

Tips for better links

  • Write link text that makes sense on its own. Screen reader users often jump from link to link without reading the surrounding text, and search engines use link text to understand the destination. “Download the 2026 pricing guide” is good link text; “click here” is not.
  • Use target=”_blank” only for other sites. A link to another page on your own site should open in the same tab — that is what readers expect, and the back button still works. Save “New tab” for links that leave your site.
  • Always pair _blank with noopener. A page opened with target="_blank" can reach back into the page that opened it unless noopener is set. The tool ticks it by default — leave it ticked. noreferrer also stops the new page from seeing where the reader came from.
  • Do not add a title attribute that repeats the link text. A tooltip that says the same thing as the link is noise. Use the title only when it adds something — “Opens as a PDF, 2 MB”, for example. If it adds nothing, leave it empty and the tool leaves the attribute out.
  • Use nofollow deliberately. It tells search engines not to pass ranking credit to the destination. That is right for paid links, sponsored content and links in user comments. It is wrong for a normal link to a source you are recommending — that link deserves to pass credit.

Frequently asked questions

Why does the tool reject javascript: URLs?

Because a javascript: URL runs code when clicked, and it is a classic way to smuggle a harmful action into a page — especially in links pasted from untrusted sources. The tool only allows http, https, mailto, tel and relative URLs. If you genuinely need to run JavaScript on a click, that belongs in a script with a proper event handler, not in a link’s href.

What do noopener and noreferrer actually do?

noopener stops the page you opened from accessing your page through window.opener — without it, the new page could redirect your page somewhere else. noreferrer stops the browser from sending your page’s address to the destination as the referrer, so the other site does not learn where the reader came from. Both are standard practice for links that open in a new tab, and the tool adds them by default.

When should I use nofollow?

When you do not want to vouch for the destination or pass it ranking credit: paid links, affiliate links, sponsored posts, and links in comments or other user-generated content. Search engines treat nofollow as a hint not to follow or credit the link. Do not use it on ordinary links to sources you trust and recommend.

Why does the download option not work for links to other sites?

That is a browser rule, not a tool limitation. The download attribute is only honoured for files on the same origin — your own site. For a link to another site, the browser ignores the attribute and opens the file instead. If you need readers to download a file you do not host, upload it to your own site first.

Why does the preview link not navigate when I click it?

The preview runs in a sandboxed frame, deliberately. A live link inside a tool preview could take you away from the page, or worse, load an untrusted site inside the tool. The preview shows you what the link looks like; the generated HTML is what you paste into your own page, where it works normally.

Conclusion

A link looks simple — one tag, one address — but the details around it are where the safety and accessibility live: the right target, the right rel attributes, text that means something, and a URL scheme that cannot hurt anyone. The HTML Link Generator above gets all of that right in seconds. Try it with your own link, then use the HTML Button Generator when that link needs to look like a button instead of plain text.

Related Tools