HTML Link Generator: Create <a href> Tags with Rel and Target
Preview
FREE TOOL · NO SIGN-UP
This HTML link generator builds a clean <a href> tag from a URL and anchor text, with optional title, new-tab and rel settings. It is for bloggers, marketers, SEOs and email designers who need correct link code without hand typing attributes. Enter the link details, tick the options you need, and copy the HTML or Markdown version.
The code and a live preview update as you type. Special characters in your URL or text are escaped automatically, so the link will not break your page.
How the HTML Anchor Tag Works
The anchor element, written <a>, is what turns text or an image into a hyperlink. Every link on the web, from navigation menus to footnotes, is an anchor tag.
href, text and attributes
The href attribute holds the destination. The text between the opening and closing tags is the anchor text people see and click. A basic link looks like <a href="https://fhseohub.com/">Free SEO tools</a>. Optional attributes add behavior. title shows a tooltip on hover. target="_blank" opens the link in a new tab. rel describes the relationship to the linked page, such as nofollow or sponsored. download tells the browser to save the file instead of opening it. Search engines read the href to discover pages and use the anchor text as a clue to what the target page is about.
Absolute vs relative URLs
An absolute URL includes the full address, like https://example.com/blog/post/. A relative URL leaves out part of it, such as /blog/post/, which the browser resolves against the current site. Relative links are shorter and survive a domain change, but they break when content is copied to another site, an email or an RSS feed. Use absolute URLs for emails, syndicated content and anything that might be read outside your website. Within your own site, either works, as long as you stay consistent.
How to Generate an HTML Link
The generator has three fields and a handful of checkboxes.
Step 1: Enter URL and anchor text
Paste the destination into Link URL and type the clickable words into Anchor text. Use a full address starting with https:// for external links. Add a title attribute only if it gives extra context, because screen readers and touch devices often ignore it. If you leave the anchor text empty, the URL is used as the text.
Step 2: Choose target
Tick “Open in new tab” if the link should open in a new browser tab. The tool adds target="_blank" and, for safety, rel="noopener noreferrer" at the same time. Leave it unticked for most internal links, because users can choose a new tab themselves.
Step 3: Pick rel values
Tick nofollow, sponsored or ugc when they apply. You can combine them, for example rel="sponsored nofollow". The preview shows the final rel value, or “followed link” when none is set. Tick download if the link points to a file people should save.
Step 4: Copy the code
Copy the HTML for web pages, WordPress Custom HTML blocks or email templates. Copy the Markdown version for README files, documentation, forums and editors that accept Markdown. The HTML can also be downloaded as a small file.
Choosing the Right rel Attribute
Google asks site owners to qualify certain outbound links. Getting this right protects you from link scheme issues and gives search engines useful context.
nofollow, sponsored, ugc
Use rel="sponsored" for paid links, affiliate links and any link you received money, products or other value for. Use rel="ugc" for links inside user-generated content, such as blog comments and forum posts. Use rel="nofollow" when you do not want to vouch for a page or associate your site with it, and no other value fits. Google treats all three as hints rather than strict commands, and you can combine them. Normal editorial links to sources you trust need no rel value at all. Track the balance of your anchors with the Anchor Text Ratio Calculator.
noopener and noreferrer security
When a page opens in a new tab, older browsers let it access the original page through window.opener and could redirect it to a phishing page. noopener blocks that access. Modern browsers apply it by default for target="_blank", but adding it explicitly protects older browsers too. noreferrer also stops the browser sending the referring URL, so the destination’s analytics will see the visit as direct traffic. That is why the tool adds both together.
Accessible Links That Users Trust
Good links tell people where they are going before they click.
Descriptive anchor text
Screen reader users often jump from link to link, hearing only the anchor text. “Click here” or “read more” says nothing out of context. Write anchors that describe the destination, such as “download the 2026 price list” or “compare plans”. Descriptive anchors also help search engines understand the target page, so the same habit serves accessibility and SEO.
Signalling new tabs
Opening a new tab without warning can confuse people, especially on mobile or with screen readers, because the back button stops working as expected. If a link must open in a new tab, say so in the text, for example “pricing guide (opens in new tab)”, or add a small icon with hidden text that explains it.
Special Links: Email, Phone and Downloads
The same anchor tag handles more than web pages.
mailto and tel
An href starting with mailto: opens the visitor’s email app, and one starting with tel: starts a phone call on mobile. For email links with a subject, body or CC, use the Mailto Link Generator. Write phone numbers in international format, like tel:+923001234567.
download attribute
The download attribute tells the browser to save the linked file instead of opening it. It works for same-origin files such as PDFs, images and CSVs. Browsers usually ignore it for files hosted on other domains.
Linking Mistakes to Avoid
These small errors cost clicks, trust or rankings.
“Click here” anchors
Generic anchors waste a ranking signal and fail accessibility checks. Describe the destination in the link text.
Unmarked paid links
Affiliate and sponsored links without rel="sponsored" or nofollow can be treated as link schemes. Mark every paid link.
Broken relative paths
A relative path like page.html without a leading slash resolves from the current folder, which breaks when content moves. Use root-relative or absolute URLs.
Paste Clean, Correct Links Every Time
Fill in the fields above and copy a correct, safe link in HTML or Markdown. For campaign tracking, add parameters with the UTM Builder. For chat links, try the WhatsApp Link Generator, and use the HTML Entity Encoder / Decoder for special characters in text. See every free tool on FHSEO Hub.