Master the anchor tag, the element behind every clickable link, and learn how to link to other pages, other websites, and specific spots within the same page.
💡 The Concept
If the web were a city, links would be the roads connecting every building, park, and shop. Without them, each web page would be an isolated island. Beautiful, maybe, but unreachable. The HTML anchor tag (<a>) is how you build those roads, and understanding it deeply is essential for every web developer. In this post, we’ll explore how the anchor tag works, how to use HTML attributes effectively, and how HTML entities like the copyright symbol fit into your pages. Let’s dive in.
Understanding the Anchor Tag: Your Gateway to the Web
The anchor tag <a> is what makes hypertext hyper. It’s the HTML element that creates clickable links. The mechanism ties the entire World Wide Web together. Every time you click a link to navigate to another page, you’re interacting with an anchor tag.
At its simplest, an anchor tag looks like this:
<a href="https://saintpaul.edu">Saint Paul College</a>
Let’s break that down:
<a>: the opening tag
href="https://saintpaul.edu": the attribute that specifies where the link goes
Saint Paul College: the visible, clickable text (called the link text or anchor text)
</a>: the closing tag
Everything between the opening and closing tags becomes the clickable link that users see and interact with on the page.
Anchor tags create the clickable links that connect web pages together.
HTML Attributes
You have probably noticed that the <a> tag always has href in it. href is an example of an attribute. Attributes provide additional information about an HTML element. They always follow the same pattern: the attribute name, an equal sign, and the value in quotation marks:
<a href="https://saintpaul.edu">Saint Paul College</a>
The attribute name is href, the equal sign connects the name to its value, and the value "https://saintpaul.edu" is always wrapped in quotation marks.
Here are some attributes you have encountered in these lessons:
<html lang="en">
<meta charset="UTF-8">
Here are some common attributes you will use in upcoming lessons:
src — specifies the source file for an image or script
alt — provides descriptive text for an image
width — sets the width of an image
height — sets the height of an image
class — assigns a CSS class for styling
id — assigns a unique identifier used in CSS or JavaScript
target — specifies where to open a link, such as in a new tab
Absolute vs. Relative URLs
When writing the href value, you’ll use two types of URLs:
Absolute URLs
An absolute URL includes the full web address, including the protocol (https://). You use these when linking to pages on other websites:
<a href="https://www.wikipedia.org">Wikipedia</a>
Relative URLs
A relative URL is a path relative to the current page’s location. You use these when linking to pages within your own website:
<a href="contact.html">Contact</a>
Relative URLs are preferred for internal links because they keep working even if your domain name changes, and they’re shorter and easier to manage.
🎬 Video Demonstration
In this video I demonstrate how to add links to the website navigation and footer.
Step 3: Run JSFiddle. Note that the link is underlined and blue. That is the default CSS for links. (We’ll learn CSS in the next set of lessons.)
Step 5: Click on the link. The web page will load in the JSFiddle window.
💡 If you are making a website template: Add anchor tags to the navigation in your template for a Home page, a Contact page, and an About page. Also add an absolute link and a mailto link to your footer. See the full website template guide for reference.
Step 1: Add anchor tags to your website template for a Home page, a Contact page, and about Page. Here is the link for the home page to get you started: <a href=”index.html”>Home</a>. For now, place two non-breaking spaces between each navigation item. (We’ll switch that to CSS spacing in a later lesson.)
Step 2: Add an Absolute link to the footer. You can choose a link to your school or a favorite website.
Step 3: Add a mailto link to the footer.
Step 4: Check your code against the template so far:
A well-structured HTML page using semantic elements, anchor tags, and HTML entities.
Step 5: Fill in the <main> section of your template for good measure
Add an <h1> tag to the main section:
<h1>PAGE TITLE</h1>
Add some placeholder text in <p> tags. Copy this text for placeholder text:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in dictum. Iaculis nunc sed augue lacus. Egestas tellus rutrum tellus pellentesque eu tincidunt. Mi tempus imperdiet nulla malesuada. Viverra nam libero justo laoreet sit amet. Morbi quis commodo odio aenean sed. Nulla facilisi cras fermentum odio eu. Aliquet nibh praesent tristique magna sit. Arcu risus quis varius quam quisque id diam. Diam in arcu cursus euismod quis viverra. Amet est placerat in egestas erat imperdiet sed euismod nisi. Malesuada bibendum arcu vitae elementum curabitur vitae. Ipsum nunc aliquet bibendum enim. Accumsan sit amet nulla facilisi morbi.</p>
Check your code against the screenshot below.
Common Anchor Tag Mistakes to Avoid
As you start working with links, watch out for these frequent pitfalls:
Forgetting the closing tag: Always close your anchor tag with </a>. If you don’t, everything after the opening tag becomes a giant clickable link.
Broken relative paths: If your link doesn’t work, double-check the file path. Is the file in the same folder?
Frequently Asked Questions
What happens if you leave out https:// in an absolute link?
If you leave out https:// and type just www.saintpaul.edu, the browser will not treat it as an absolute URL. Instead, it will interpret it as a relative path and look for a file or folder called www.saintpaul.edu within your own website. The link will likely result in a 404 error. Always include the full protocol (https://) when linking to an external website.
What is the difference between href and src?
Both are attributes that point to a location, but they are used on different elements. href (Hypertext Reference) is used on the <a> tag to specify where a link goes. src (source) is used on elements like <img> and <script> to specify the file to load. Think of href as “go here when clicked” and src as “load this file here.”
Do I need a closing tag on the <a> element?
Yes, always. Unlike some HTML elements that are self-closing, the <a> tag requires both an opening tag and a closing tag. Everything between the two tags becomes the clickable link. If you forget the closing </a>, the browser may turn everything that follows into one giant link.
Why does my link open on the same page instead of going to the URL?
This usually means the browser is treating the URL as a relative path instead of an absolute one. Check that your href value includes the full protocol — https:// — at the beginning. Without it, the browser looks for a file or folder with that name on your own website instead of navigating to an external address.
★ Key Takeaways
Links are what connect the web together. This lesson covered the anchor tag, how to write an href attribute, and the difference between absolute and relative links. Next, you will learn about HTML indentation and comments, which help keep your code clean and easy to read. Good habits now will save you a lot of time later.
