Every website you browse today runs on one small piece of code that most people never notice. That code is the anchor tag, and it quietly holds the entire internet together behind the scenes. Without proper linking, pages would sit in isolation, with no way to connect one idea to another. Learning HTML anchor tags is one of the very first skills every beginner web developer needs to master, since almost nothing on the modern web works without a solid grasp of hyperlinks.
This guide walks you through everything step by step, starting with the basics and moving into real, practical examples you can use right away. By the end, you will understand exactly how a hyperlink works, why the href attribute matters so much, and how to build clean, functional navigation on your own website with total confidence.
What Is an HTML Anchor Tag? (The Basics Explained)
So, what is an anchor tag? It is the HTML element that creates a clickable connection between two things. You write it as <a>, and the letter “a” simply stands for “anchor.” Think of it as a small hook that grabs one page and ties it to another. Every hyperlink you have ever clicked started its life as this one tag.
An anchor tag needs three parts to work properly. First comes the opening tag, then the href attribute, and finally the clickable text the user actually sees. Here’s a simple example: <a href=”about.html”>About Us</a>. That short line is doing a lot of heavy lifting behind the scenes.
The Simplest Anchor Tag Example
Let’s slow down for a second. In the code above, about.html is the destination. “About Us” is the link text. And the whole thing sits between opening and closing <a> tags. That’s it. That’s the entire foundation of web page navigation.
If you already have a plain URL and want to turn it into a proper clickable anchor tag automatically, try our Url to Html tool — it saves you from typing the syntax by hand every time.
Understanding the href Attribute — The Heart of Every Link
The href attribute is short for hypertext reference. It tells the browser exactly where to go once someone clicks. Without it, your anchor tag is just… sitting there. It looks like a link, but it goes nowhere. Kind of like a door painted onto a wall.
This attribute is flexible too. It can point to another page, a file, an email address, or even a specific spot on the same page. That flexibility is exactly why HTML anchor tags remain so useful, even decades after they were first introduced.
What Can an href Point To?
Here’s a quick breakdown of common destinations:
| Destination Type | Example | Common Use |
| Web page | <a href=”contact.html”> | Internal navigation |
| External site | <a href=”https://example.com”> | Outside references |
| <a href=”mailto:hi@example.com”> | Contact forms | |
| Phone number | <a href=”tel:+15551234567″> | Mobile click-to-call |
| Page section | <a href=”#pricing”> | Jump links |
Absolute vs Relative URLs — Which One to Use and When
Now let’s talk about paths. An absolute URL includes everything: the protocol, the domain, and the full route to the page. It looks like https://example.com/blog/post.html. Browsers never get confused by these, since every piece of information is right there.
A relative URL, on the other hand, only shows the path from where you currently are. Something like blog/post.html works fine, as long as the browser already knows the base domain. Most developers use relative URLs for internal links because they make moving a website so much easier later.
Common Relative Path Symbols
A single dot means “stay in this folder.” Two dots mean “go up one level.” A forward slash at the start means “start from the site’s root.” Mixing these up is one of the most common beginner headaches, so keep this cheat sheet handy while practicing.
| Type | Example | Best Used For |
| Absolute URL | https://example.com/blog.html | External links, sharing outside your site |
| Relative URL | blog.html | Internal links, same-folder pages |
| Parent folder | ../about.html | Linking one level up |
| Root path | /contact.html | Linking from the site’s root folder |
Internal Links vs External Links in HTML
Internal links point to other pages on your own website. They keep visitors exploring your content longer, and they help search engines understand your website structure. A blog post linking to your homepage or another article? That’s an internal link doing its job quietly in the background.
External links, meanwhile, point to a completely different domain. They add credibility when you reference trustworthy sources, like linking out to MDN Web Docs for technical accuracy. Both link types matter. Skipping one hurts either your site’s structure or its trustworthiness.
Best Practices for Mixing Internal and External Links
A healthy article usually leans heavier on internal links, with a few well-placed external ones for credibility. Don’t overdo either side. Too many outbound links can push readers away before they finish your content.
Opening Links in a New Tab (target=”_blank”) and Security Best Practices
Sometimes you want a link to open in a fresh tab instead of replacing the current page. That’s where the target attribute comes in. Adding target=”_blank” does exactly that. It’s especially handy for external references, since visitors won’t lose their place on your site.
But here’s something many tutorials skip entirely: opening links in new tab mode without protection creates a real security gap. The new page can actually access your original tab through a browser feature called window.opener. That’s why link security best practices always include the rel attribute, specifically rel=”noopener noreferrer”, whenever target=”_blank” shows up in your code.
Should You Always Use target=”_blank”?
Not really. Save it for external sites or downloadable files. Using it everywhere annoys visitors and clutters their browser with tabs they never asked for.
Linking to Sections on the Same Page (Anchor Links / Jump Links)
Long pages need shortcuts. That’s exactly what an anchor link provides. First, you give an element an id attribute, like <h2 id=”pricing”>Pricing</h2>. Then you build a fragment identifier link pointing to it: <a href=”#pricing”>Jump to Pricing</a>. Click it, and the browser scrolls straight there.
This trick powers almost every table of contents you have ever used online. It also works great for “back to top” buttons at the bottom of long articles, saving readers from endless scrolling.
How to Build a Simple Table of Contents
Just list your anchor links near the top of the page, each one pointing to a heading id further down. Readers click whatever section interests them and skip the rest entirely.
Email, Phone, and File Download Links
Anchor tags aren’t limited to web pages. A mailto link opens the visitor’s default email app, ready to send a message. Write it as <a href=”mailto:hello@example.com”>Email Us</a>, and clicking it does the rest automatically.
A tel link works the same way for phone numbers, which matters enormously for mobile users. Just use <a href=”tel:+15551234567″>Call Now</a>. There’s also the download attribute, which suggests a filename when someone downloads a file instead of viewing it in the browser. Worth noting: some browsers, especially with PDFs, may override this and display the file inline anyway. For a deeper technical reference on every anchor tag attribute, W3Schools’ HTML links guide is a solid place to double-check syntax.
Pre-Filling Email Subject Lines with mailto
You can even add a subject line automatically. Try <a href=”mailto:hello@example.com?subject=Website Inquiry”>Contact Us</a>. It saves the visitor a few seconds, and small conveniences like that add up.
Writing SEO-Friendly and Accessible Link Text
Here’s a mistake almost every beginner makes: writing “click here” as link text. It tells search engines nothing, and it tells screen reader users even less. Screen reader accessibility depends heavily on meaningful, descriptive link text that stands on its own, even out of context.
Instead of “click here,” try something like “read our web hosting guide.” It reads better for humans, and it gives search engines useful context about the destination. This single habit quietly improves both your rankings and your user navigation experience.
Anchor Text Best Practices for Google Rankings
Keep it short, keep it specific, and avoid repeating the exact same phrase for every link on a page. Variety helps both readers and search algorithms understand your content better.
Common Anchor Tag Mistakes Beginners Make (And How to Fix Them)
Even experienced developers slip up sometimes, so don’t feel bad if you’ve made these already. Here’s a quick table of what to watch for:
| Mistake | Why It Breaks | Quick Fix |
| Missing href | Link becomes non-functional | Always add a destination |
| Backslashes in paths | Windows-only syntax fails on the web | Use forward slashes |
| Forgetting https:// | Browser treats it as a relative path | Always include the protocol |
| Vague link text | Confuses users and search engines | Write descriptive text |
| Mismatched id | Anchor link goes nowhere | Double-check spelling |
Quick Checklist to Debug Broken Links
Test every link after publishing. Check spelling on ids. Confirm the protocol is present on external URLs. These three habits catch most problems before readers ever notice them.
If you’re pasting raw code snippets into a page and formatting keeps breaking, our Code to Html tool can clean it up and convert it into safe, ready-to-use HTML in seconds.
Anchor Tags and Their Role in Website Navigation
Step back for a moment and look at the bigger picture. Every navigation menu, footer, and breadcrumb navigation trail on the web runs on anchor tags. They’re invisible glue, holding entire websites together behind clean, simple design.
As one longtime developer once put it, “the web isn’t really made of pages, it’s made of the links between them.” That’s the real magic of the anchor tag. Master it now, and you’ve built one of the strongest foundations in beginner HTML tutorial material anywhere.
What to Learn Next After Anchor Tags
Once links feel comfortable, images and CSS styling are the natural next step. They’ll help you turn plain HTML hyperlinks into polished, professional-looking navigation systems.
Frequently Asked Questions:
1: What is an HTML anchor tag?
It’s the <a> element used to create hyperlinks. It connects one page or resource to another using the href attribute.
2: How to put an anchor in HTML?
Wrap your text or element inside <a href=”destination”>Your Text</a>. The href value decides where the link goes.
3: What’s the difference between <a> and <link>?
<a> creates a clickable hyperlink inside the page content. <link> is used in the <head> section to connect external resources like stylesheets, not visible to users.
4: What is href=# in HTML?
It’s a placeholder link that points to the top of the current page, or is often used as a temporary/dummy link when the real destination isn’t ready yet.
5: Why is it called an anchor tag?
Because it “anchors” or connects one document to another, just like an anchor connects a ship to a fixed point.
6: What is an example of anchor text?
In <a href=”about.html”>Learn about our company</a>, “Learn about our company” is the anchor text — the clickable, visible words.
7: How to make an anchor tag clickable?
Just add the href attribute. Without it, the tag won’t function as a clickable link, even though it may look like text.