An anchor tag (<a>) is an HTML element that creates a hyperlink to another web page, a file, an email address, or a specific section of the same page. It is the fundamental building block of web navigation, connecting individual documents into the World Wide Web. For SEO practitioners, the anchor tag is the primary vehicle for internal linking and backlink profile development.
What is an Anchor Tag?
The anchor tag, or "anchor element," uses the href attribute to define the destination of a link. While the tag itself is a technical instruction for the browser, the clickable content inside (anchor text) provides context to both users and search engines about the destination's topic.
Beyond standard web pages, anchor tags can trigger specific browser behaviors, such as starting a phone call, opening an email client, or initiating a file download.
Why Anchor Tag matters
- Search Engine Crawling: Search engines like Google use anchor tags to discover new pages and understand your site's structure.
- Context and Relevance: Meaningful anchor text improves the relevance and keyword targeting of your content for indexing purposes.
- User Navigation: Links allow users to move through menus, sidebars, and body content to find related information.
- Accessibility: Properly formatted links enable screen readers and other assistive technologies to navigate a page efficiently.
- Lead Generation: Functional links using
mailto:ortel:schemes allow immediate contact from mobile and desktop devices.
How Anchor Tag works
To create a functional link, you must include at least two components: the <a> tag with an href attribute and the link text.
- Opening Tag:
<astarts the element. - Destination (
href): Thehref="URL"attribute specifies where the link goes. - Visible Content: The text or image between the tags is what the user clicks.
- Closing Tag:
</a>signals the end of the link.
When a user clicks the link, the browser checks the href value and navigates to that location. If no href is present, the tag acts only as a placeholder.
Types of Anchor Tag
| Type | Purpose | Example Syntax |
|---|---|---|
| Absolute URL | Links to external websites. | <a href="https://google.com"> |
| Relative URL | Links to pages on the same site. | <a href="/about-us"> |
| Jump Link | Links to a specific section on the same page. | <a href="#contact-form"> |
| Functional | Launches an app (email, phone, SMS). | <a href="mailto:[email protected]"> |
| Download | Forces a file to save to the device. | <a href="file.pdf" download> |
Best practices
Use descriptive anchor text. Avoid vague phrases like "click here." Instead, use text that describes the destination, as this helps both users and search engines understand the link's purpose.
Secure new tab links. When using target="_blank" to open a link in a new tab, always include rel="noopener" or rel="noreferrer" to prevent security vulnerabilities and potential API exploitation.
Ensure clickable area size. To accommodate users with motor control issues or those on mobile devices, [interactive elements should provide an area at least 44x44 CSS pixels] (MDN).
Provide visual cues for non-HTML links. If a link opens a PDF or a new window, indicate this in the text or via an icon with an alt attribute to prevent user confusion.
Be unique with IDs. When creating jump links, ensure the id you are targeting is unique on the page. Reusing IDs can cause navigation errors.
Common mistakes
Mistake: Using anchor tags as buttons by setting href="#".
Fix: Use a <button> element for triggers that do not navigate to a real URL.
Mistake: Linking only the words "here" or "this link." Fix: Include the descriptive subject in the clickable area (e.g., "read our annual report").
Mistake: Forgetting the href attribute.
Fix: Always include href; an anchor tag without it is a non-functional placeholder.
Mistake: Using spaces in internal jump link names.
Fix: Use underscores or hyphens (e.g., #contact_us) because spaces do not work in anchor link destinations.
Examples
External and Internal Links
<!-- External link to a different domain -->
<a href="https://www.wikipedia.org">Visit Wikipedia</a>
<!-- Internal link to a relative path -->
<a href="/contact.html">Contact Us</a>
Jump Link (Same Page Navigation)
<!-- The link -->
<a href="#biography">Read the Bio</a>
<!-- The destination -->
<h2 id="biography">About the Author</h2>
Functional Contact Links
<!-- Email link with a subject line -->
<a href="mailto:[email protected]?subject=Inquiry">Email Us</a>
<!-- Telephone link for mobile dialing -->
<a href="tel:+1234567890">Call Support</a>
Anchor Tag vs. <link> Tag
| Feature | Anchor Tag (<a>) |
Link Tag (<link>) |
|---|---|---|
| Visibility | Visible and clickable by users. | Invisible metadata in the <head>. |
| Location | Placed in the <body>. |
Usually placed in the <head>. |
| Goal | Navigation and interaction. | Connecting resources (like CSS). |
| Interaction | Requires a user click. | Loaded automatically by the browser. |
FAQ
Can I use an image as an anchor tag?
Yes. You can wrap an <img> tag inside an <a> tag. When using an image as a link, ensure the image has an alt attribute that describes where the link goes, as this serves the same purpose as anchor text for accessibility.
What is the rel="nofollow" attribute?
The rel="nofollow" attribute tells search engine crawlers not to associate your site with the linked page or pass ranking authority to it. This is often used for paid links or user-generated content to prevent spam from affecting SEO.
How do "skip links" work?
A skip link is an anchor tag placed at the very top of the HTML body that links to an ID at the start of the main content (e.g., <a href="#main">). This allows keyboard users to bypass repetitive navigation menus, which is a major accessibility benefit.
Does the order of link states in CSS matter?
Yes. When styling anchor tags, typical browser defaults show unvisited links as blue and visited as purple. If you customize these using CSS, you should follow the standard order: :link, :visited, :hover, and :active to ensure the styles apply correctly as the user interacts with the link.
What does the ping attribute do?
The ping attribute takes a list of URLs. When the user clicks the link, the browser sends a small POST request to those URLs in the background. This is typically used by developers and marketers for tracking link clicks without redirecting the user through a tracking server.
