You Need to Connect Your Web Pages
You have a paragraph of text on your new webpage. Maybe it’s a blog post about your favorite hiking trail. You want to tell your readers, “Check out the official park map for more details.” But that sentence just sits there, plain and unclickable. Your visitor has to open a new browser tab, type in a long web address, and hope they find the right page.
This is the exact moment you realize you need a hyperlink. A hyperlink, or simply a link, is the fundamental connective tissue of the web. It’s what transforms a collection of isolated documents into the interactive, sprawling network we use every day. Without links, there is no web.
If you’re learning HTML and have hit this point, you’re in the right place. Creating a link is one of the first and most powerful skills you’ll master. It seems simple on the surface—and it is—but understanding the full scope of the anchor tag unlocks professional-level control over navigation, user experience, and site structure.
The Anatomy of the HTML Anchor Tag
Every link in HTML is created with a single element: the anchor tag, written as <a>. This tag is a container. It wraps around the text or image you want to make clickable. The magic, however, comes from its attributes.
The most critical attribute is href. This stands for “hypertext reference.” The value of the href attribute is the destination—the URL—where the browser will go when the link is clicked. This is the non-negotiable core of any functional link.
Here is the absolute basic syntax you need to memorize:
<a href="https://www.example.com">Clickable Text Here</a>Let’s break that down. You start with an opening <a> tag. Inside that tag, you place the href attribute and set it equal to your target URL, enclosed in quotes. Then you write the visible, clickable link text. Finally, you close the tag with </a>. The browser renders everything between the opening and closing tags as a clickable link, usually in blue, underlined text.
Choosing Your Link Text Wisely
The text you place inside the anchor tags is called the link text or anchor text. This is more important than it seems. Good link text is descriptive. It tells users exactly what will happen if they click.
Avoid generic phrases like “click here” or “read more.” Instead, use text that describes the destination. For example, instead of “To see the park map, click here,” write “Check out the official park map for more details.” This is better for accessibility, as screen reader users often navigate by jumping from link to link. It’s also better for search engine optimization, as it provides context about the linked page.
Linking to Different Types of Destinations
The href attribute is incredibly flexible. You’re not limited to linking to other websites. You can link to pages within your own site, specific sections on a page, email addresses, and even files.
Linking to Other Websites (Absolute URLs)
When you link to a completely different website, you use an absolute URL. This is the full web address, starting with “http://” or “https://”.
<a href="https://www.nps.gov/yose/index.htm">Visit Yosemite National Park's Website</a>Always use “https://” when available for security. The browser will load this external page in the same tab by default, replacing your page.
Linking Within Your Own Site (Relative URLs)
For pages within your own website, you don’t need the full domain. You can use a relative URL. This path is relative to the location of the current HTML file.
Imagine your website folder looks like this:
my-website/
├── index.html
├── about.html
└── blog/
└── first-post.htmlFrom your index.html file, linking to the “About” page is simple:
<a href="about.html">About Us</a>To link from index.html to a blog post inside the “blog” folder, you specify the folder path:
<a href="blog/first-post.html">Read My First Blog Post</a>To link from that blog post back to the homepage, you use ../ to go up one folder level:
<a href="../index.html">Back to Home</a>Relative URLs keep your code cleaner and make your site easier to move to a different domain.
Linking to a Specific Page Section (Fragment Identifiers)
You can link directly to a specific heading or element on a page, even if it’s a long, scrolling document. First, you need to mark the target spot with an id attribute.
On the destination page, find the heading you want to link to:
<h2 id="trail-difficulty">Understanding Trail Difficulty Ratings</h2>Now, from any other page or from elsewhere on the same page, you can create a link that jumps directly to that section. You use a hash symbol (#) followed by the id value.
<a href="blog/hiking-guide.html#trail-difficulty">Jump to Difficulty Ratings</a>If the target is on the same page, you only need the fragment:
<a href="#trail-difficulty">Back to Top of Section</a>Creating an Email Link
You can create a link that opens the user’s default email client with a new message pre-addressed. Use the mailto: scheme in the href.
<a href="mailto:contact@example.com">Send us an email</a>You can even pre-fill the subject line and body for convenience:
<a href="mailto:contact@example.com?subject=Website%20Inquiry&body=Hello,%20I%20have%20a%20question...">Contact Support</a>Note that spaces in the subject and body must be replaced with %20, which is a URL-encoded space.
Controlling How and Where the Link Opens
By default, when a user clicks a link, the new page loads in the same browser tab or window. This navigates the user away from your page. Sometimes this is what you want, but often it’s not. For external links, it’s considered good practice to open them in a new tab so your site remains open in the user’s browser.
You control this behavior with the target attribute.
<a href="https://www.external-site.com" target="_blank">Open in New Tab</a>The value _blank tells the browser to open the linked document in a new tab or window. Other, less common values include _self (the default, opens in same frame), _parent, and _top.
The Security Implications of target=”_blank”
Using target="_blank" comes with a minor security and performance consideration. The new page, by default, has partial access to your original page’s window object via the window.opener property. A malicious site could use this to manipulate your page.
The modern best practice is to add the rel="noopener noreferrer" attributes when using target="_blank" for external links.
<a href="https://www.external-site.com" target="_blank" rel="noopener noreferrer">
Open Safely in New Tab
</a>The noopener instruction severs the window.opener connection for security. The noreferrer instruction also prevents the new page from receiving the URL of your page as a “referrer” header. This is now the standard for secure external links.
Styling and Enhancing Your Links
Out of the box, browsers style links with blue text and an underline for unvisited links, and purple text for visited links. This is fine for basic documents, but for a modern website, you’ll want to control the appearance with CSS.
You can style the anchor tag just like any other element. It’s common to remove the default underline and set your own color, then add the underline back on hover to provide a visual cue.
<style>
a {
color: #1a73e8;
text-decoration: none;
font-weight: 500;
}
a:hover {
text-decoration: underline;
}
</style>Beyond color, you can add padding, background colors on hover, or even transform a link into a button-like element. The anchor tag is an inline element by default, but you can change its display property to block or inline-block for more control over its dimensions and layout.
Turning an Image into a Link
You are not limited to text. You can wrap an image tag (<img>) inside an anchor tag to make the entire image clickable.
<a href="large-photo.jpg">
<img src="thumbnail-photo.jpg" alt="A scenic mountain view">
</a>This pattern is ubiquitous for photo galleries, product listings, and logos that link back to the homepage. Always ensure the image has a descriptive alt attribute for accessibility, which also serves as the link context if the image fails to load.
Common Mistakes and How to Fix Them
As you start creating links, a few common pitfalls can break your code or create a poor user experience.
The most frequent error is forgetting the closing </a> tag. This can cause the browser to treat all subsequent text as part of the link. Always double-check that every opening tag has a matching closer.
Another mistake is using incorrect path syntax for relative URLs. If your link is broken and displays a “404 Not Found” error, the path in your href is wrong. Check the folder structure and whether you need to go up a level using ../.
Leaving the href attribute empty or setting it to just “#” creates a “dead” link that goes nowhere. While sometimes used as a placeholder during development, avoid deploying this. If you need a non-functional link for a UI element that acts like a button, use a <button> element instead, as it has more appropriate semantic meaning and built-in keyboard accessibility.
Accessibility is Non-Negotiable
Links must be usable by everyone, including people who navigate with a keyboard or screen reader. Ensure your link text is meaningful out of context. A screen reader user may hear a list of all links on a page; “click here” is useless, but “Yosemite National Park official map” is clear.
If you are using an image as a link, the alt text must describe the link’s destination or function, not just the image itself. For a logo linking home, use alt="Go to homepage" rather than alt="Company logo".
Also, ensure links have a clear visual focus state for keyboard users. This is often a dotted or solid outline around the link when it’s selected using the Tab key. Do not remove this focus outline in your CSS without providing an equally clear alternative style.
Your Next Steps for Mastery
You now have the core knowledge to create effective, functional links in HTML. Start by practicing the basic anchor tag with an absolute URL. Then, create a simple two-page website on your computer and link them together using relative paths. Experiment with opening links in new tabs and adding the security attributes.
The true power of links is realized when you combine them with other HTML and CSS. Learn how to style your links to match your site’s design. Explore creating navigation menus, which are essentially lists of links. Understand how search engines use links to discover and rank pages, making your site structure a key part of its visibility.
Remember, the link is the foundational interaction of the web. Every time you create one, you are building a pathway for a user to discover more information, complete a task, or continue their journey. Doing it correctly, with attention to destination, behavior, security, and accessibility, is what separates a functional webpage from a professional web experience.
