By the end of this tutorial, you’ll confidently use the anchor element in real-world projects.
Write valid <a> elements with correct opening, closing, and nesting rules.
Master href, target, rel, download, and more.
Create external links, internal routes, email links, phone links, and file downloads.
Style default, hover, focus, and visited states for accessible, beautiful links.
Build smooth in-page jumps with fragment identifiers and scroll behavior.
Apply security, SEO, and accessibility best practices used by top websites.
<a> Tag?The anchor element (<a>) is one of HTML’s most important tags. It creates a hyperlink — a clickable connection between the current document and another resource: a webpage, file, email address, phone number, or a specific section on the same page.
Historically, links “anchored” one document to another. Today, the term still applies when jumping to a fixed point within a page using #section-id.
Without the <a> tag, the web wouldn’t be a web. Search engines crawl links, users navigate through them, and SPAs still rely on anchor semantics under the hood.
The basic structure of an anchor element is straightforward:
<!-- Basic anchor syntax -->
<a href="URL">Link Text</a>href is the destination — required for the link to function (except placeholder links).<a />) is not valid in HTML.<a
href="https://developer.mozilla.org"
target="_blank"
rel="noopener noreferrer"
>
MDN Web Docs
</a>| Use Case | Code Snippet | Result |
|---|---|---|
| External link | <a href="https://example.com">Visit</a> | Visit |
| Same-page link | <a href="#top">Back to top</a> | Back to top |
| Email link | <a href="mailto:hi@example.com">Email</a> | |
| Phone link | <a href="tel:+15551234567">Call</a> | Call |
| Download file | <a href="file.pdf" download>PDF</a> | Triggers download |
| New tab | <a href="..." target="_blank" rel="noopener">Open</a> | Opens new tab safely |
Attributes modify link behavior, security, and accessibility. Here are the most important ones:
href Required*The URL or fragment the link points to. Use #id for in-page anchors, mailto:, tel:, or absolute/relative paths.
<a href="/about">About</a>target OptionalWhere to open the linked document. Common value: _blank (new tab/window).
<a href="..." target="_blank">Open</a>rel SecurityRelationship hint. Use noopener noreferrer with target="_blank" to prevent tab-nabbing.
rel="noopener noreferrer"download OptionalForces download instead of navigation. Optional filename value overrides the saved name.
<a href="report.pdf" download="Q1.pdf">title A11yAdvisory tooltip text. Supplement — not a replacement — for accessible link text.
title="Opens in a new tab"hreflang SEOHints the language of the linked resource (e.g. hreflang="fr").
hreflang="en-US"type OptionalMIME type advisory for the linked resource (rarely needed in practice).
type="application/pdf"referrerpolicy PrivacyControls how much referrer info is sent. E.g. no-referrer, strict-origin.
referrerpolicy="no-referrer"* href can be omitted for placeholder links (href="#" or href=""), but always provide a meaningful destination in production.
Real-world anchor patterns with copy-ready code, live previews, and hands-on practice.
The href attribute specifies the destination URL or location the hyperlink points to. It can be an absolute address (https://…), a relative path (/about), a fragment (#section), or a special scheme like mailto:.
<a href="https://codetofun.com">Visit CodeToFun.com</a>The target attribute controls where the linked page opens. Common values are _self (same tab, default) and _blank (new tab or window). When using _blank for external sites, add rel="noopener noreferrer" for security.
<a href="https://codetofun.com" target="_blank" rel="noopener noreferrer">Visit CodeToFun.com in a new tab</a>Here are the most frequent ways developers use the <a> tag in real projects.
The primary role of the <a> tag is to create basic hyperlinks that take users to another page. Use clear anchor text so visitors know what they will find when they click.
<a href="https://codetofun.com/css">Visit CSS Tutorial</a>Set href to a fragment identifier (an id prefixed with #) to link to a specific section on the same page. Combine a path with a fragment—href="/about#team"—to jump to a section on another page.
<a href="#section">Jump to Section</a>The href attribute supports URL schemes beyond ordinary web addresses. Use mailto:, tel:, sms:, and the download attribute to save files.
A mailto: link opens the visitor’s default email client with the address pre-filled. You can also add a subject or body using query parameters: mailto:user@example.com?subject=Hello.
<a href="mailto:hello@codetofun.com">Email CodeToFun</a>A tel: link lets mobile users tap to call a phone number. Use the international format for best results: tel:+18005551234.
<a href="tel:+18005551234">Call +1 (800) 555-1234</a>The download attribute tells the browser to save the linked file instead of navigating to it. Optionally set a filename: download="report.pdf".
<a href="/files/honey-bee.pdf" download="honey-bee.pdf">Download PDF</a>Once you know href and target, these patterns separate a good anchor tutorial from a great one: clickable images, SEO-aware rel values, and accessible link design.
Wrap an <img> inside <a> to make a logo, thumbnail, or banner clickable. Always provide meaningful alt text so screen readers describe the destination.
<a href="https://codetofun.com">
<img src="/images/logo/logo/logo-128.png" alt="CodeToFun logo — visit homepage" width="128" height="128">
</a>The rel attribute describes the relationship between the current page and the linked resource. Use noopener noreferrer with target="_blank" for security. For SEO, Google recognizes nofollow, sponsored, and ugc.
<a href="https://example.com" rel="nofollow">Untrusted user link</a>
<a href="https://partner.com" rel="sponsored noopener noreferrer" target="_blank">Sponsored ad</a>
<a href="https://forum.com/post" rel="ugc nofollow">Forum comment link</a>Links must work for keyboard and screen-reader users. Use descriptive text, aria-label for icon-only links, visible :focus-visible outlines, and skip links that let users jump past navigation.
<a href="#main-content" class="skip-link">Skip to main content</a>
<a href="/html/tags" aria-label="Browse all HTML tags">
<span aria-hidden="true">☰</span>
</a>Like tel:, the sms: scheme opens the device’s messaging app. Pre-fill the body with a query: sms:+18005551234?body=Hello. Support varies by device and browser.
<a href="sms:+18005551234">Text +1 (800) 555-1234</a>
<a href="sms:+18005551234?body=Hello%20from%20CodeToFun">Text us with a pre-filled message</a>Links have four key pseudo-classes. Style each for clarity and accessibility:
:link Unvisited:visited Already seen:hover Mouse over:focus-visible Keyboard focus/* Base link */
a {
color: #2563eb;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s ease;
}
/* Visited */
a:visited {
color: #7c3aed;
}
/* Hover */
a:hover {
color: #1d4ed8;
}
/* Keyboard focus — never remove without a replacement */
a:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 3px;
border-radius: 2px;
}Live styled links
The browser reads the href value on the <a> element to determine the destination.
Absolute URLs load a new document. Relative paths resolve against the current page. Fragments (#id) scroll within the same page.
_self (default) replaces the current tab. _blank opens a new browsing context. Use rel with _blank for security.
The <a> tag connects pages into the hyperlinked web. It is an inline element—wrap text, images, or block content (in HTML5) to make any of it clickable.
The <a> tag has been supported since the earliest browsers and remains a baseline HTML feature.
From legacy Internet Explorer to the latest Chromium builds — the anchor tag is one of the most universally supported HTML elements ever created.
These work in all modern browsers but may lack support in very old ones.
download Chrome 15+ · Firefox 20+ · Safari 10.1+referrerpolicy Modern browsers · Not in IEBottom line: Ship links with confidence. The core <a> element is safe to use in every production environment today.
The HTML <a> tag is deceptively simple yet incredibly powerful. Whether you’re building a personal blog, a SaaS dashboard, or an e-commerce store, links are how users and search engines discover and move through your content.
Master the syntax, respect accessibility, apply thoughtful CSS, and your links will feel invisible in the best way — fast, clear, and trustworthy. Use the quick reference above and experiment until creating links becomes second nature.
rel="noopener noreferrer" with target="_blank"mailto: and tel: for contact actionshref values in production<a><a>Bookmark these before you ship — they’ll make every link you write faster, safer, and more accessible.
The <a> tag creates hyperlinks — the invisible threads that turn isolated pages into a connected web.
href defines where a link goes. Always point to a real, purposeful URL — never leave users guessing.
Use #id fragments for same-page navigation. Pair with smooth scrolling for a polished UX.
Design :link, :visited, :hover, and :focus-visible — keyboard users depend on visible focus.
Always add rel="noopener noreferrer" when using target="_blank" to prevent tab-nabbing attacks.
<a> (anchor) tag creates hyperlinks. Users click it to navigate to other pages, download files, send email (mailto:), or jump to sections on the same page.href is the destination. target controls where it opens—_self (same tab, default), _blank (new tab), _parent, or _top.target="_blank" and rel="noopener noreferrer". The noopener value prevents the new page from accessing window.opener.id, then set href="#that-id" on your anchor. The browser scrolls to the matching element.href="mailto:address@example.com". The browser opens the user’s email client. Add ?subject= or &body= for pre-filled content.href="tel:+18005551234". On mobile devices, tapping the link starts a call. Include the country code for international numbers.download to an <a> tag to suggest saving the linked resource. Use download="filename.pdf" to set the saved filename. Most reliable for same-origin URLs.<img> inside <a> to make the image clickable. Add meaningful alt text on the image for accessibility.rel="nofollow" tells search engines not to pass ranking credit to the linked page. Use it for untrusted user content. For paid ads use rel="sponsored"; for forum posts and comments use rel="ugc".aria-label for icon-only links, style :focus-visible for keyboard users, and include skip links (href="#main-content") on navigation-heavy pages.sms: link opens the device messaging app, similar to tel: for phone calls. Example: href="sms:+18005551234?body=Hello". Works best on mobile devices.Open the HTML editor, write your own anchor links, and see the result instantly.
12 people found this page helpful