Hyperlink Generator

Build HTML <a> tags with target, rel and a11y attributes

Link

HTML output

DevTools

About

Build an HTML <a> tag from a form: link URL, visible text, target window, rel attributes (noopener/noreferrer for safe _blank links), an optional CSS class, id, and aria-label. Outputs clean, copy-ready HTML. Runs in your browser.

    Examples

    Build a safe external link

    Input
    url: https://example.com
    label: Example
    target: _blank
    rel: noopener noreferrer
    Output
    <a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

    target=_blank always pairs with rel=noopener noreferrer to prevent tab-nabbing and stop the external site from reading your page's URL via window.opener.

    Generate a mailto link

    Input
    url: mailto:hello@example.com?subject=Hi
    label: Email us
    Output
    <a href="mailto:hello@example.com?subject=Hi">Email us</a>

    mailto: opens the user's mail client with the address and an optional subject pre-filled. URL-encode any special characters in the subject or body.

    About this tool

    The Hyperlink Generator composes safe, accessible HTML <a> tags from a form. It handles href, target, rel, id, class, title, download, type, hreflang, and aria-label, and applies the safe-by-default rel="noopener noreferrer" pair whenever target=_blank is selected — the combination that prevents tab-nabbing and Referer leakage.

    It works with any URL — http(s), mailto:, tel:, relative paths, and bare anchors — and URL-encodes mailto fields correctly. Generation runs entirely in your browser; URLs and labels never leave your device.

    How to use

    1. Enter the URL and label

      Paste the destination URL (http, https, mailto, tel, or relative) and the visible link text.

    2. Set attributes

      Choose the target, toggle the safe rel pair, and add id/class/title/aria-label as needed for styling and accessibility.

    3. Copy the tag

      Click Copy to copy the final <a> tag, then paste it straight into your HTML.

    Use cases

    Composing safe external links

    Generate <a> tags for outbound links with the right target and rel combination in one step, instead of remembering the noopener noreferrer rule every time.

    Building email and phone links

    Produce clean mailto: and tel: anchors with properly URL-encoded fields so special characters don't break the link.

    Adding accessible link attributes

    Set aria-label and title on links to non-descriptive URLs so screen readers describe the destination clearly.

    Common mistakes

    Mistake:Using target="_blank" without rel="noopener noreferrer".

    Fix:Without noopener, the new page can read window.opener and redirect the original tab (tab-nabbing). Without noreferrer, it leaks the originating URL in the Referer header.

    Mistake:Forgetting to URL-encode mailto fields.

    Fix:Special characters in the subject or body of a mailto link must be percent-encoded (& -> %26, space -> %20), or the user's mail client will misinterpret the link.

    Mistake:Using javascript: links for navigation.

    Fix:javascript: URLs break middle-click, accessibility, and CSP. Use a real <a href> or a button with a click handler instead.

    Frequently asked questions

    References & standards