Day 4: HTML Links & Navigation

Yesterday we structured the text. Today, we connect it. Now you might ask (legitimately I might add), What is the point of doing this? And why should we even bother? Well, think of it this way.

If you strip all the links away from a webpage, you’re left with just a digital brochure. It’s static, isolated, and stuck in one place. The “web” in World Wide Web literally exists because pages link to each other. Navigation is the bloodstream of the internet, and the <a> (anchor) tag is how you connect it all.

I know you might be thinking: “It’s just a link, how complicated can it be?” To which I say: On the surface, it looks straightforward. But if you get a few paths wrong, ignore link security somewhere, or write lazy anchor text, and you’ll break accessibility for end users, hurt SEO of your site, or accidentally hand control of a user’s browser to a malicious page.

In this post, we’ll cover how to link between your own pages, navigate to external sites securely, write descriptive anchor text, and understand exactly how browsers resolve addresses.

Images and media get their own dedicated post tomorrow. Today is strictly about navigation, URLs, and link behavior.

🎯 What You’ll Learn Today

By the end of this post, you will:

• Understand how the <a> tag works and what href actually does
• Confidently use absolute vs. relative paths (and know when to use which)
• Secure external links with target="_blank" + rel="noopener noreferrer"
• Write descriptive, accessible anchor text instead of “click here”
• Use fragment links (#section) and special protocols (mailto:, tel:)
• Build a simple multi-page site with working internal and external navigation

1. The Anchor Tag: <a> & href

The anchor tag looks like this:

The href attribute stands for Hypertext Reference. It’s simply the address the browser should navigate to when the user clicks. Without href, the <a> tag is just inline text with default link styling. With it, it becomes an interactive navigation element.

By default, <a> is an inline element. That means it flows with your text, doesn’t force a line break, and wraps tightly around its content. You can put it inside a paragraph, a list item, or a heading, and it will behave predictably.

A quick warning: Avoid leaving href empty (href="") or setting it to href="#" unless you have a specific reason. href="" reloads the current page. href="#" jumps the user to the very top of the document. Both are frequently misused as placeholders for JavaScript buttons. If you need a clickable element that triggers an action (like opening a modal or submitting a form), use a <button> tag instead. HTML is for navigation; Javascript is for behavior.

2. Absolute vs. Relative Paths

This is where most beginners trip up. How does the browser know where to go? The answer is: you tell it that using one of two path types.

Absolute URLs include the full protocol and domain:

Use these when linking to external websites. The browser doesn’t need context – it has the complete address.

Relative URLs point to files inside your own project, relative to the current file’s location:

Let’s decode the dot notation:

• ./ means “look in the current folder.” (Optional in modern HTML, but explicit.)
• ../ means “go up one directory level, then look.”
• / at the start means “start from the root of your website.”

Rule of thumb: Use relative paths for internal navigation. Use absolute paths for external sites. Keep your filenames lowercase, use hyphens instead of spaces, and never assume Windows is case-insensitive on a live server. Linux servers care deeply about About.html vs about.html.

3. Security & Behavior: target & rel

Sometimes you want a link to open in a new tab. That’s what target="_blank" does:

It’s useful, but it comes with a hidden risk called reverse tabnapping. When a new tab opens, the newly loaded page can technically access the original tab through window.opener. In rare cases, a malicious site can replace your original tab with a phishing page.

The fix is simple and industry-standard: always pair target="_blank" with rel="noopener noreferrer":

• noopener blocks window.opener access, cutting off the vulnerability.
• noreferrer stops the browser from sending referrer data to the new page, improving user privacy.

Modern browsers have started mitigating this automatically, but explicitly adding rel="noopener noreferrer" is non-negotiable in professional code. It passes linters, satisfies security audits, and costs you nothing.

Also, use new tabs sparingly. Opening links away from your page breaks user flow, confuses screen readers, and should be reserved for genuinely external destinations.

4. Writing Better Anchor Text

You’ve probably seen links that say “Click here” or “Read more.” Please don’t do that.

Screen readers often let users skip through a page just by reading the links out loud. If your page has five links that all say “Click here,” the user has zero idea where they’re going. In addition, search engines also use anchor text to understand what the linked page is about.

Good anchor text describes the destination clearly:

Make the link text meaningful even if read completely out of context. It’s better for accessibility, better for SEO, and just more respectful of the user’s time.

5. Fragment Links & Special Protocols

Not all links take you to a different page. Some move you around the same one.

Fragment links target an id on the same page:

HTML handles the jump. If you want it to scroll smoothly, that’s a one-line CSS feature (scroll-behavior: smooth), but the anchor itself is pure HTML. Note: CSS is beyond the scope of this post.

Special protocols trigger apps instead of navigating:

These open the user’s default email client or phone dialer. They’re incredibly useful for footers, portfolios, and contact sections.

6. Beginner Pitfalls & Quick Fixes

Let’s address the traps that break navigation in Week 1:

• Broken paths: Wrong capitalization, missing .html, or incorrect ../ depth. → Fix: double-check your folder structure. Use your editor’s autocomplete.
• Missing rel: Using target="_blank" without noopener noreferrer. → Fix: memorize the trio. It’s a muscle memory thing.
• href="#" as a JS hook: Using it for buttons. → Fix: switch to <button> for actions. Reserve <a> for actual navigation.
• Nesting interactive elements: Putting a link inside a button (or vice versa). → Fix: HTML doesn’t allow nested interactive elements. It breaks validation and confuses assistive tech.

Quick debug tip: Right-click any link → select “Copy link address.” Paste it somewhere to see exactly what URL the browser is trying to resolve. Open it in a new tab to test the path without leaving your current page.

Your Turn: Build a Simple Navigation System

Let’s connect the dots. Type this out by hand.

1. Create a folder named day-4-practice.
2. Inside, create two files: index.html and about.html.
3. Add the HTML5 boilerplate to both. Give each a unique <h1>.
4. Add a navigation list at the top of each page with relative links pointing to the other file.
5. Add an external link (e.g., to MDN or a favorite resource) using target="_blank" + rel="noopener noreferrer".
6. Add a mailto: link and a #top fragment link that jumps to <h1 id="top"> at the top of the page.
7. Save, open index.html in your browser, and click every link. Verify they all work.

Stretch prompt: Change a relative path to an absolute file:///C:/Users/.../day-4-practice/about.html path. It works locally, but what happens if you email this code to a friend on a different OS? Why do you think relative paths scale while absolute local paths don’t?

Key Takeaways

• <a> + href creates navigation. Never leave href empty or use # without purpose.
• Use relative paths internally (./, ../, /), absolute paths externally.
• Always secure target="_blank" with rel="noopener noreferrer".
• Descriptive anchor text improves SEO, accessibility, and user trust. Avoid “click here.”
• Fragments (#id) and protocols (mailto:, tel:) expand navigation beyond page-to-page linking.

What’s Next

In the next post, we’ll tackle HTML Images & Media. You’ll learn how to embed images responsibly, write effective alt text for accessibility and SEO, declare dimensions to prevent layout shifts, and troubleshoot broken image paths like a pro.

Preview question: If an image fails to load, what exactly does the user see instead, and how can you control that fallback experience? Jot down your guess. We’ll verify it tomorrow.