HTML/CSS - 5

HTML/CSS - 5: Links & Navigation

Links let visitors move from one place to another. A link can open another webpage, start an email message, or become part of a simple navigation menu.

HTML links use the <a> tag. The destination goes inside the href attribute, while the clickable words go between the opening and closing tags.

For example: <a href="https://example.com">Visit My Website</a>

Your challenge: Build a small navigation area with at least three links. Include two website links and one email link.

What should you notice?

A link has two important parts. The text between <a> and </a> is what the visitor sees, while the href contains the destination.

For example: <a href="https://example.org">Open My Project Page</a>

The words Open My Project Page are visible on the page, but the browser uses https://example.org as the destination.

About <nav>: The <nav> element groups links that are used for navigation. The <nav> itself is not clickable — the <a> elements inside it create the links.

Experiment: Change the words shown by one of your links without changing its href. The label on the page will change, but the destination will stay the same.

Try an email link: A destination beginning with mailto: can ask the device to open its email application.

For example: <a href="mailto:[email protected]">Send Me a Message</a>

Bonus experiment: Add target="_blank" to one of your website links. This asks the browser to open that link in a new tab or window.

<h1>My Navigation Hub</h1>

<nav>
  <a href="https://example.com" target="_blank">My Main Site</a>
  <br>

  <a href="https://example.org">My Project Page</a>
  <br>

  <a href="mailto:[email protected]">Send Me a Message</a>
</nav>