InnoMarts logo
InnoMarts
Fast websites
← Back to course

Links and Navigation

Links and Navigation

Welcome back.

In the previous lesson, you learned how to organize content with lists.

Now we connect pages together.

Because one HTML page is nice.

But many connected HTML pages become a website.

And that is when things start feeling real.

A lonely page is a note on the fridge.

Connected pages are a small digital city.

With fewer pigeons.

Hopefully.

What You’ll Learn

In this lesson, you’ll learn:

The a Element

Links are created with the a element.

Example:

<a href="about.html">About Me</a>

The text between the opening and closing tags is clickable.

The href attribute tells the browser where the link should go.

So this:

<a href="about.html">About Me</a>

means:

Show the text “About Me” and send the user to about.html when they click it.

Simple.

Powerful.

Slightly magical.

Link to Another Page

Create two files:

touch index.html about.html

In index.html, write:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home Page</title>
</head>
<body>
  <h1>Home Page</h1>
  <p>Welcome to my website.</p>

  <a href="about.html">Go to About Page</a>
</body>
</html>

In about.html, write:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About Page</title>
</head>
<body>
  <h1>About Me</h1>
  <p>This is the about page.</p>

  <a href="index.html">Back to Home Page</a>
</body>
</html>

Open index.html in the browser and click the link.

Congratulations.

You connected two pages.

The website has begun breathing.

Very quietly.

But still.

Relative Links

A relative link points to a file based on the current file location.

Example:

<a href="about.html">About</a>

This means:

Look for about.html in the same folder.

Relative links are great for your own website pages.

Example structure:

project/
  index.html
  about.html
  contact.html

From index.html, you can link to contact.html like this:

<a href="contact.html">Contact</a>

No need to write the full internet address.

The browser understands the path.

Browsers are smarter than they look.

Sometimes.

Links to Files in Folders

If your file is inside a folder, the path changes.

Example structure:

project/
  index.html
  pages/
    about.html

From index.html, link to pages/about.html:

<a href="pages/about.html">About</a>

If you are inside pages/about.html and want to go back to index.html, use:

<a href="../index.html">Home</a>

.. means “go up one folder”.

This is important.

Also dangerous if you write it half asleep.

Paths are small, but they bite.

Absolute Links

An absolute link uses the full URL.

Example:

<a href="https://www.mozilla.org">Mozilla</a>

Use absolute links for external websites.

Examples:

<a href="https://developer.mozilla.org">MDN Web Docs</a>
<a href="https://www.wikipedia.org">Wikipedia</a>

Absolute links usually start with:

https://

If you forget https://, the browser may think the link is a local file.

And then confusion enters the room wearing boots.

Open a Link in a New Tab

To open a link in a new tab, use target="_blank":

<a href="https://developer.mozilla.org" target="_blank">Open MDN</a>

For security, also add rel="noopener noreferrer":

<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
  Open MDN
</a>

This is a good habit for external links that open in a new tab.

Yes, it looks longer.

Good habits often look longer.

Then they save you later.

Email Links

You can create a link that opens an email app:

<a href="mailto:hello@example.com">Send Email</a>

When the user clicks it, their email program may open.

Example:

<a href="mailto:contact@example.com">Contact me</a>

You can also add a subject:

<a href="mailto:contact@example.com?subject=Website%20Question">Ask a Question</a>

Spaces in URLs are usually written as %20.

Not beautiful.

But functional.

Like many things on the internet.

Phone Links

For phone numbers, use tel::

<a href="tel:+390000000000">Call Me</a>

This is useful on mobile devices.

On desktop, it may do nothing or open a calling app.

HTML tries.

The user’s device decides.

Very democratic.

Link to a Section on the Same Page

You can link to a section using an id.

Example:

<a href="#contact">Go to Contact</a>

<h2 id="contact">Contact</h2>
<p>You can contact me by email.</p>

The href="#contact" points to the element with:

id="contact"

This is useful for long pages.

Like documentation.

Or restaurant menus that require cardio.

Simple Navigation Menu

Navigation is usually a group of links.

Example:

<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contact</a>
</nav>

The nav element tells the browser:

This area is navigation.

That is semantic HTML.

It gives meaning to the structure.

Not just links thrown onto the page like socks on a chair.

Navigation with a List

Many navigation menus use lists:

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

This is a clean structure.

A navigation menu is a list of links.

So a list makes sense.

HTML likes when structure makes sense.

It becomes calmer.

So do developers.

Sometimes.

Create a Navigation Practice Page

Create three files:

touch index.html about.html contact.html

Use this navigation in each file:

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Example index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home</title>
</head>
<body>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>

  <h1>Home</h1>
  <p>Welcome to my small website.</p>
</body>
</html>

Now create similar pages for about.html and contact.html.

Open them in the browser and click around.

You now have a tiny website.

Tiny.

But real.

Common Mistakes

Forgetting href

This is not a useful link:

<a>About</a>

Use:

<a href="about.html">About</a>

No href, no destination.

A link without href is like a taxi without wheels.

Wrong file name

If your file is called:

about.html

but your link says:

<a href="About.html">About</a>

it may fail on some systems.

File names can be case-sensitive.

about.html and About.html may be different.

Computers can be very strict for machines that still ask us to prove we are not robots.

Using target blank without rel

This works:

<a href="https://example.com" target="_blank">Example</a>

Better:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

Good habits now.

Less pain later.

Practice

Create a small website with:

No CSS.

No JavaScript.

Only HTML links and navigation.

The website will look simple.

That is fine.

Today we build connections.

Decoration comes later.

Mini Challenge

Create a file called:

resources.html

Build a resources page with:

Example:

<a href="#top">Back to top</a>

and at the top:

<h1 id="top">Useful Resources</h1>

Small feature.

Very useful.

Very professional.

Almost suspicious.

Summary

Today you learned:

Links turn pages into websites.

Without links, pages are islands.

With links, they become a map.

Next Lesson

In the next lesson, we’ll learn images and media.

Because text is powerful.

But sometimes a picture saves everyone from reading twelve paragraphs about a cat.