Connect your pages together and create clickable links that take visitors anywhere on the web.
Think of links as doors between rooms in a house. You click a link and it takes you somewhere else — another page on your website, a different website entirely, or even a specific spot on the same page you're reading.
The `
` tag creates these doors. The "a" stands for "anchor" because it anchors one location to another. Every link needs an href attribute — that's short for "hypertext reference" and tells the browser where to go when someone clicks.
The Anchor Tag Anatomy
<a
href
="projects.html"
>
View My Work
</a>
Opening Tag
Attribute
Destination
Link Text
Closing Tag
Alex wants to add navigation to their portfolio so visitors can jump between the home page, projects, and contact form. Let's start with a simple link from the homepage to the projects page.
<!-- Navigation link in Alex's portfolio header -->
<h1>Alex's Portfolio</h1>
<p>Welcome to my creative space!</p>
<!-- Link to projects page -->
<a href="projects.html">View My Projects</a>
<!-- Link to contact page -->
<a href="contact.html">Get In Touch</a>
What just happened?
The browser created two clickable links with blue underlined text. Each href tells the browser which file to load when clicked. Try this: hover over the links to see the cursor change to a pointing hand.
Different Types of Links
Links come in several flavors depending on where they point. Think of them like different transportation methods — some take you across town, others across the world.
Relative Links
A relative link points to another file in your website. It's like giving directions from your current room — "go to the kitchen" instead of "go to 123 Main Street's kitchen."
<!-- Links to other pages in Alex's portfolio -->
<a href="about.html">About Me</a>
<a href="projects.html">My Work</a>
<a href="blog.html">Blog Posts</a>
<!-- Link to file in subfolder -->
<a href="gallery/photos.html">Photo Gallery</a>
<!-- Link to file in parent folder -->
<a href="../index.html">Back to Home</a>
Absolute Links
An absolute link includes the full web address. It's like writing out the complete street address. Use these when linking to other websites or when you need the exact URL.
<!-- Links to external websites from Alex's portfolio -->
<p>Check out my work on these platforms:</p>
<!-- GitHub profile link -->
<a href="https://github.com">My GitHub</a>
<!-- Design portfolio link -->
<a href="https://dribbble.com">Dribbble Portfolio</a>
<!-- LinkedIn profile -->
<a href="https://linkedin.com">Connect on LinkedIn</a>
Opening Links in New Windows
Sometimes you want a link to open in a new browser tab instead of replacing the current page. The target attribute controls this behavior. Think of it like choosing whether to walk to another room or open a new window to look outside.
The value `_blank` tells the browser "open this link in a brand new tab or window." This keeps visitors on your site while letting them explore the link.
<!-- External links that open in new tabs -->
<p>My favorite design resources:</p>
<!-- Opens in new tab to keep visitors on Alex's site -->
<a href="https://unsplash.com" target="_blank">Free Stock Photos</a>
<!-- Also opens in new tab -->
<a href="https://fonts.google.com" target="_blank">Google Fonts</a>
<!-- Regular link stays in same tab -->
<a href="projects.html">Back to My Projects</a>
Security Warning
When using target="_blank", always add rel="noopener" to prevent security issues. Like this: <a href="..." target="_blank" rel="noopener">. This stops the new page from controlling your original page.
Anchor Links and Page Sections
You can create links that jump to specific spots on the same page. These are called anchor links or "fragment identifiers." Think of them like bookmarks that take you to exact paragraphs in a long document.
First, you mark the destination with an `id` attribute. Then your link points to that id using a hashtag.
<!-- Table of contents for Alex's about page -->
<h1>About Alex</h1>
<!-- Navigation links to sections below -->
<a href="#background">My Background</a> |
<a href="#skills">Skills</a> |
<a href="#contact">Contact Info</a>
<!-- Content sections with matching IDs -->
<h2 id="background">My Background</h2>
<p>I started designing websites in college...</p>
<h2 id="skills">My Skills</h2>
<p>HTML, CSS, JavaScript, and visual design...</p>
<h2 id="contact">Get In Touch</h2>
<p>Email me at alex@example.com</p>
What just happened?
The hashtag links connect to elements with matching id values. When clicked, the page scrolls directly to that section. Try this: add more content between sections to see the scroll effect work better.
Email and Phone Links
HTML can create special links that open email programs or start phone calls. These use different protocols — instead of "http://" they use "mailto:" or "tel:".
<!-- Contact links in Alex's portfolio footer -->
<h3>Let's Work Together</h3>
<!-- Email link opens default email app -->
<a href="mailto:alex@portfolio.com">Send me an email</a>
<!-- Email with subject and body pre-filled -->
<a href="mailto:alex@portfolio.com?subject=Project Inquiry&body=Hi Alex, I'd like to discuss...">
Quick Project Inquiry
</a>
<!-- Phone link starts call on mobile devices -->
<a href="tel:+1234567890">Call me: (123) 456-7890</a>
<!-- SMS link opens text messaging -->
<a href="sms:+1234567890">Send a text message</a>
Building a Navigation Menu
Most websites have a navigation menu that appears on every page. Alex wants to create a consistent navigation bar for their portfolio that helps visitors move between sections easily.
<!-- Complete navigation for Alex's portfolio -->
<header>
<h1>Alex Thompson - Designer</h1>
<!-- Main navigation menu -->
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="projects.html">Projects</a>
<a href="blog.html">Blog</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<!-- Page content -->
<main>
<h2>Welcome to my portfolio</h2>
<p>I create beautiful, functional websites.</p>
</main>
