Skip to main content

HTML Links and Navigation

Why is it called the World Wide Web? Because it is a web. Billions of pages, each one connected to others by threads you can follow with a single click or tap. Take those threads away and you would have a pile of separate documents that nobody could find.

The thread is the link. It is one of the oldest and most important ideas in HTML, and it is the reason you can start on a recipe and end up reading about the history of spices. In this section, you will learn how to build every kind of link: to other websites, to other pages of your own site, to a spot on the same page, to an email address, to a phone number, and even to a file someone can download.


What You Will Learn​

In this section, you will be able to:

  • Write a link with the anchor element (<a>)
  • Tell absolute and relative URLs apart, and know when to use each
  • Link inside your own site, and jump to a section on the same page
  • Link to other websites, and decide how the new page should open
  • Keep your links secure with rel values
  • Create email, telephone, and download links
  • Build a clear navigation menu that works for everyone
Prerequisites

You should be comfortable with basic text elements such as headings and paragraphs. If not, start with the Text Content section.

A link has three parts: the tag, the destination, and the words people click.

index.html
<p>
  Learn more about web standards at
  <a href="https://www.w3.org/">the W3C website</a>.
</p>

The demo link above points to # so it stays on this page. In your own file, it would take you to the address in href.

Here is the same link, split into its parts.

<a href="https://www.w3.org/">the W3C website</a>
PartIn the exampleWhat it does
Opening tag<a ...>Starts the link. a means anchor
href attributehref="https://www.w3.org/"The destination. href means hypertext reference
Link textthe W3C websiteThe words people see and click
Closing tag</a>Ends the link

The href attribute is the heart of every link. Without it, the <a> tag is just text.

Reading a URL​

A URL is an address on the web. Once you can read one, links become much easier to understand.

https://codeharborhub.github.io:443/tutorial/html?lang=en#links
└─┬─┘   └───────────┬──────────┘└┬┘└────────┬───┘└───┬──┘└──┬─┘
scheme              host        port        path    query  fragment
PartMeaningExample
SchemeThe rule for talking to the resourcehttps, mailto, tel
HostThe server or website namecodeharborhub.github.io
PortThe door on the server, usually hidden443
PathWhich page or file/tutorial/html
QueryExtra information?lang=en
FragmentA spot within the page#links

Every link is a variation on the same idea. The destination in href decides what kind of link you get.

TypeWhat it doesExample href
Absolute URLA full address, including the scheme and hosthttps://example.com/about
Relative URLAn address from the current page's locationabout.html or ../images/logo.png
Internal linkGoes to another page or section in your own site/contact or #pricing
External linkGoes to a different websitehttps://developer.mozilla.org/
Email linkOpens the visitor's email appmailto:hello@example.com
Telephone linkStarts a phone calltel:+911234567890
Download linkSaves a file to the devicereport.pdf with the download attribute
link-types.html
<ul>
  <li><a href="https://example.com/about">Absolute: About page</a></li>
  <li><a href="about.html">Relative: About page</a></li>
  <li><a href="#pricing">Internal: jump to Pricing</a></li>
  <li><a href="https://developer.mozilla.org/">External: MDN</a></li>
  <li><a href="mailto:hello@example.com">Email us</a></li>
  <li><a href="tel:+911234567890">Call us</a></li>
  <li><a href="guide.pdf" download>Download the guide</a></li>
</ul>

By default, a link:

  • Is shown in a different color and underlined, so people know it can be clicked
  • Opens the destination in the same tab
  • Changes color after you have visited it
  • Can be reached and activated with the keyboard, using Tab and Enter

You can change the look with CSS. You can change where it opens with the target attribute. You will learn both in this section.

Good Link Text​

The words inside a link matter more than most beginners expect. Many screen reader users move through a page by listening to a list of links only. If every link says "click here," that list is useless.

<p>To read our privacy policy, <a href="/privacy">click here</a>.</p>
<p>For the full guide, <a href="/guide">read more</a>.</p>
The out-of-context test

Imagine each link on its own, with nothing around it. Would a stranger understand where it goes? If yes, the link text is good.

A single link takes you somewhere. A group of links, laid out clearly, forms navigation: the map of your site. HTML has the <nav> element for this, and a list is the natural way to arrange the links.

nav.html
<nav aria-label="Main">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/courses">Courses</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

You will turn this plain list into a real menu in the last lesson of this section.

Your Learning Path​

Follow the lessons in order. Each one builds on the one before.

Common Beginner Mistakes​

Here are a few traps worth knowing about before you start. Each one has its own lesson later.

MistakeWhat goes wrongWhere you will fix it
Forgetting https:// on an outside linkThe browser treats it as a path on your own siteAbsolute URLs
Wrong folder path in a relative linkThe page shows a "not found" errorRelative URLs
Using "click here" as link textScreen reader users cannot tell links apartAnchor Element
Opening every link in a new tabVisitors lose control of their own browsingTarget Attribute
Linking out with target="_blank" and no relOlder browsers can expose a security riskLink Security
Writing a phone number without the country codeThe call fails for visitors in other countriesTelephone Links
Links break over time

Websites move and pages disappear. A link that works today may show an error next year. Good developers check their links from time to time, and you will learn easy ways to keep them healthy.


Quick Recap​

Test yourself. Click a question to reveal the answer.

1. Which tag creates a link, and which attribute holds the destination?

The <a> (anchor) tag creates the link, and the href attribute holds the destination.

2. What is the difference between an absolute and a relative URL?

An absolute URL contains the full address, including the scheme and host. A relative URL gives a path starting from the current page's location.

3. Which URL scheme opens an email app?

mailto:, for example mailto:hello@example.com.

4. Why is "click here" a poor link text?

It says nothing about the destination. Screen reader users, and anyone scanning the page, rely on link text that makes sense on its own.

5. Which element groups the main links of a site into a navigation area?

The <nav> element, usually with a list of links inside it.

Key Takeaways​

  • A link is an <a> element with an href attribute that holds the destination.
  • The href value decides the type of link: page, section, website, email, phone number, or file.
  • Absolute URLs include everything. Relative URLs depend on the current page's location.
  • Write link text that is clear on its own, so every visitor knows where the link goes.
  • Group your main links in a <nav> element to build the map of your site.

Ready to begin? Start with the Anchor Element.