—HTML Series · Post 5: HTML Links & Navigation
🔗 HTML Links & Navigation
The <a> tag is what makes the web a "web." Without links, every page is an island. Let's learn how to connect everything together.
The Tag That Makes the Web a Web
The letter "H" in HTML stands for Hypertext — text that links to other text. The <a> tag (anchor tag) is how that concept comes to life. Every link you've ever clicked on any website was created with an <a> tag. It's the single element that connects one page to another, one site to another, one idea to another.
<a href="https://codherway.com">Visit CodeHerWay</a>That's the whole thing. The href attribute (short for hypertext reference) tells the browser where the link goes. The text between the tags is what the user sees and clicks. Simple, powerful, and used on every website in existence.
Absolute vs. Relative Paths
The URL you put in href can be written two ways, and understanding the difference is essential.
Absolute Path
The full, complete URL — including https:// and the domain. Use these when linking to external sites (anywhere that isn't your own website).
Relative Path
A path relative to where the current file lives. Use these for linking between your own pages. No domain needed — just the file path.
href="pages/contact.html"
href="../index.html"
<!-- Absolute: full URL to an external site -->
<a href="https://github.com/itcodegirl">My GitHub</a>
<!-- Relative: file in the same folder -->
<a href="about.html">About Me</a>
<!-- Relative: file in a subfolder -->
<a href="pages/contact.html">Contact</a>
<!-- Relative: go up one folder, then into another -->
<a href="../index.html">Back to Home</a>The .. in ../index.html means "go up one folder." It's how you navigate backwards through your file structure. If you're in /pages/about.html and need to link back to /index.html, you use ../index.html to climb out of the pages folder first.
Opening Links in a New Tab
By default, clicking a link navigates the user away from your page. Sometimes you want the link to open in a new browser tab instead — especially for external links. That's what target="_blank" does:
<a href="https://github.com/itcodegirl"
target="_blank"
rel="noopener noreferrer">
My GitHub Profile
</a>Always pair target="_blank" with rel="noopener noreferrer". Without it, the new tab has a reference back to your page that creates a minor security vulnerability. The noopener part prevents the new page from accessing your window.opener object. The noreferrer part prevents the new page from knowing where the user came from. It's a one-line security fix — always include it.
Anchor Links: Jumping Within a Page
Anchor links (also called jump links or hash links) let you link to a specific section on the same page. You point the href to an element's id with a # symbol, and clicking the link scrolls the user straight to that section.
<!-- Navigation links at the top -->
<nav>
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
<!-- The sections they jump to -->
<section id="about">
<h2>About Me</h2>
</section>
<section id="projects">
<h2>My Projects</h2>
</section>
<section id="contact">
<h2>Contact</h2>
</section>This is how single-page portfolios work — the nav at the top scrolls you to different sections instead of loading new pages. It's clean, fast, and something you'll use on your own portfolio.
Anchor links are one of the first things that make a project feel like a real website rather than just a page of text. When you click a nav item and the page scrolls smoothly to a section — that's a legitimate UX pattern used by professional sites. And it's just an href pointing to an id. Simple HTML. No JavaScript required.
Email & Phone Links
HTML links don't just connect to web pages. The mailto: and tel: protocols let you trigger email clients and phone dialers directly from a link.
<!-- Opens user's email client with a pre-filled To address -->
<a href="mailto:[email protected]">Email Me</a>
<!-- Pre-fill subject and body too -->
<a href="mailto:[email protected]?subject=Hello&body=I love your site!">
Send a Message
</a>
<!-- Opens phone dialer on mobile -->
<a href="tel:+13125551234">Call Us</a>Phone links (tel:) are essential for mobile. If someone visits your portfolio on their phone and taps your phone number, it should dial — not just display text. For the number format, use the international format with no spaces or dashes: +13125551234. The +1 is the country code for the US.
Links aren't just navigation — they're the user experience of connection. Every link you write is a decision: where does this person go next? Does it open in their current tab or a new one? Does it jump them down the page or take them to an entirely different site? Good link architecture is invisible when it's done right, but users notice immediately when it's done wrong.
My first portfolio had a beautiful contact section with my email address displayed as plain text. Not a link — just text. You couldn't click it. You had to manually select it, copy it, open your email client, paste it in, and then send a message. I genuinely thought that was fine.
You know how many people emailed me through that contact section? Zero. Exactly zero.
The moment I turned that text into a mailto: link, I actually started getting messages. The lesson was painfully obvious in hindsight: every point of friction you create is a person who won't follow through. If someone has to work to contact you, most of them won't. One <a href="mailto:"> tag was the difference between silence and a conversation.
🏆 Mini Build: Portfolio Navigation
Build a single-page portfolio structure with working navigation. Your file should include:
Recap
The <a> tag connects everything on the web. Use absolute paths for external sites and relative paths for your own pages. Open external links in new tabs with target="_blank" plus rel="noopener noreferrer". Use anchor links (#id) for same-page navigation. Use mailto: for email links and tel: for phone links. Every link is a UX decision — make them intentional.
Next up: images — how to add them, why alt text is non-negotiable, and the image formats every developer should know.
