Links, anchors, and page navigation

What are links?

Links (hyperlinks) are the foundation of the web. They allow you to connect pages to each other, creating the network of documents we know as the World Wide Web. In HTML, links are created with the <a> (anchor) element.

The basic structure of a link is:

<a href="destination">Link text</a>

The href (Hypertext Reference) attribute indicates the destination the link points to. It can be a full URL, a relative path, an internal anchor, or even a special protocol.

Types of links

External links

These point to another web page outside your site. They use a full URL that includes the protocol (https://):

<a href="https://www.google.com">Search on Google</a>

Internal links (relative)

These connect pages within the same website. They use paths relative to the current document or to the root directory:

<!-- Relative to the current directory -->
<a href="contact.html">Go to contact</a>

<!-- Relative to the site root -->
<a href="/blog/first-post.html">Read post</a>

Internal anchors

These allow you to navigate to a specific section within the same page. The # symbol is used followed by the id of the target element:

<a href="#conclusion">Go to conclusion</a>

<!-- Further down the page -->
<h2 id="conclusion">Conclusion</h2>

Email and phone links

HTML allows you to create links that open the email client or the phone application on the device:

<a href="mailto:[email protected]">Send email</a>
<a href="tel:+591 70012345">Call</a>

The target attribute

The target attribute controls where the link opens:

When using target="_blank", it is important to add rel="noopener" for security:

<a href="https://example.com" target="_blank" rel="noopener">
  Open in new tab
</a>

Navigation with nav

The <nav> element defines a navigation block. It is a semantic element that helps screen readers identify the site's navigation:

<nav aria-label="Main menu">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/courses">Courses</a></li>
  </ul>
</nav>

The aria-label attribute provides an accessible name for the navigation. If you have multiple <nav> blocks on the page (for example, a main menu and a footer menu), each one should have a distinct aria-label.

Links as buttons vs real buttons

A common mistake is using <a> as a button or <button> as a link. The general rule is:

• Use <a> when the user navigates to another page or section
• Use <button> when the user performs an action (submit form, open modal, etc.)

<!-- Correct: navigates to another page -->
<a href="/register">Sign up</a>

<!-- Correct: performs an action -->
<button type="button" onclick="openMenu()">Menu</button>

File downloads

The download attribute tells the browser to download the resource instead of navigating to it:

<a href="/files/guide.pdf" download>Download PDF guide</a>
<a href="/files/guide.pdf" download="my-guide">Download with custom name</a>

Practice

1. Create a navigation bar: Build a <nav> with aria-label containing a list of at least 4 internal links using relative paths.
2. Implement internal anchors: Add at least 3 sections with id attributes to your page and create a table of contents at the top with anchor links (#section) that navigate to each section.
3. Add special links: Include a mailto: link for email, a tel: link for phone, and a link with the download attribute to download a file.

In the next lesson, we will learn how to insert images and multimedia content into our HTML pages.