Xerobit

HTML Text to Link: Anchor Tag Generator

Enter a URL and the text you want people to click, and get a ready-to-paste anchor tag. Choose new tab, noopener, nofollow, sponsored or ugc, or build mailto and tel links. Everything is escaped and runs in your browser.

Adds rel="noopener" so the new page cannot reach back to yours.

Stops the browser sending the Referer header to the target.

Result

<a href="https://example.com/guide?ref=docs&amp;lang=en" target="_blank" rel="noopener noreferrer">Read the guide</a>
  • href
    https://example.com/guide?ref=docs&lang=en
  • rel
    noopener noreferrer
  • Opens in
    new tab

The tag is escaped for use inside an HTML page.

How to turn HTML text to link markup

Turning html text to link markup takes one element: <a href="URL">text</a>. The href attribute holds the destination and the text between the tags is what the visitor clicks. To make text a link html needs nothing else, but real pages usually add target, rel and title.

This generator builds the tag in the order most style guides use: href, target, rel, title. Characters that would break the markup, such as quotes, ampersands and angle brackets, are escaped in both the address and the visible text.

The rel values: noopener, noreferrer, nofollow, sponsored, ugc

The rel attribute describes the relationship between your page and the target. Each option does something different.

ValueWhat it doesUse it when
noopenerCuts the new tab's access to window.openerAny link with target="_blank"
noreferrerHides the referring page and implies noopenerYou do not want the target to see where visitors came from
nofollowAsks search engines not to pass endorsementYou do not vouch for the page
sponsoredMarks paid or affiliate linksYou were paid or given something for the link
ugcMarks user-generated contentComments, forum posts and reviews

Values combine with spaces, so a paid link in a new tab can read rel="noopener noreferrer sponsored". Modern browsers already treat target="_blank" as noopener, but writing it out keeps older browsers and linters happy.

Link text, accessibility and SEO

Descriptive link text helps both screen reader users, who often navigate by a list of links, and search engines, which read the anchor text as a hint about the target. "Read the pricing guide" says more than "click here". Keep the text short, make it make sense out of context and avoid using a bare URL unless the address itself is the point.

The title attribute shows a tooltip on hover but is not reliably announced, so never put essential information only there. If you also need to turn pasted prose into paragraphs with links, use the text to HTML converter, and to check how the result looks, paste it into the HTML viewer.

Common mistakes with anchor tags

  • Forgetting the scheme: href="example.com" is a relative path on your own site, not a link to example.com.
  • Writing a raw ampersand in a query string. It usually works, but &amp; is the valid form and this tool writes it.
  • Using target="_blank" everywhere. Open new tabs only for external destinations that interrupt a task.
  • Marking affiliate links as plain nofollow only. Search engines ask for sponsored on paid links.
  • Putting block elements such as <div> inside the anchor in older HTML. HTML5 allows it, but keep short links to text.

To escape other text for use in markup, the HTML escape tool handles entities in both directions.

Worked examples

ExampleInputResult
External link, new tabLink type: web; URL, email address or phone number: https://example.com/docs; Link text: Documentation; Open in a new tab (target="_blank"): yes; Add noreferrer: yes; Add nofollow: no; Add sponsored (paid links): no; Add ugc (user-generated content): nohref: https://example.com/docs; rel: noopener noreferrer; Opens in: new tab
Paid linkLink type: web; URL, email address or phone number: https://shop.example.com/?aff=42&sku=7; Link text: Buy the book; Open in a new tab (target="_blank"): yes; Add noreferrer: yes; Add nofollow: yes; Add sponsored (paid links): yes; Add ugc (user-generated content): nohref: https://shop.example.com/?aff=42&sku=7; rel: noopener noreferrer nofollow sponsored; Opens in: new tab
Email with subjectLink type: email; URL, email address or phone number: help@example.com; Link text: Contact support; Email subject (email links only): Question about my order; Open in a new tab (target="_blank"): no; Add noreferrer: no; Add nofollow: no; Add sponsored (paid links): no; Add ugc (user-generated content): nohref: mailto:help@example.com?subject=Question%20about%20my%20order; rel: none; Opens in: same tab
Phone linkLink type: phone; URL, email address or phone number: +1 (555) 123-4567; Link text: Call us; Open in a new tab (target="_blank"): no; Add noreferrer: no; Add nofollow: no; Add sponsored (paid links): no; Add ugc (user-generated content): nohref: tel:+15551234567; rel: none; Opens in: same tab

FAQ

How do I make text a link in HTML?

Wrap the text in an anchor element: <a href="https://example.com">your text</a>. This generator builds that tag for you and escapes special characters.

How do I open a link in a new tab?

Add target="_blank" and rel="noopener". The new-tab option here adds both, plus noreferrer if you tick it.

When should I use nofollow, sponsored or ugc?

Use sponsored for paid or affiliate links, ugc for links inside user comments and posts, and nofollow when you do not want to endorse the target for any other reason.

Can I create a mailto or tel link?

Yes. Switch the link type to Email or Phone. An optional subject is encoded for you, and phone numbers are cleaned to digits with an optional leading plus sign.

Why was my javascript: link rejected?

Links that start with javascript: run code on click and are a common XSS vector. Use a normal address, and attach behaviour with an event listener instead.

Is the URL sent to a server?

No. The tag is generated in your browser and nothing is uploaded.

Sources and references