HTML Hyperlinks 101: A Beginner’s Guide to Anchor Tags
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 Email <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,