Links and navigation

docs.scrimba.com

A single page on its own is an island. Links are what join pages into a web: they let a visitor move to another page, jump to a section further down, or open an email app to write to you. The element behind all of it is the anchor, <a>, and it works with an attribute called href. If the words element and attribute are new, the What is HTML chapter introduces them.

The anchor element

A link is made with the anchor element, written <a>. You give it an href attribute, which is where the link goes, and the text between the opening and closing tags is what the visitor sees and clicks.

<a href="https://scrimba.com">Visit Scrimba</a>

The words "Visit Scrimba" show up as a clickable link. Click them and the browser loads the address in the href.

Think of href as the destination written on a signpost, and the link text as the label painted on the sign. The label is what people read; the destination is where the arrow points.

The anchor element <a> marks a piece of content as a link, and its href attribute (short for hypertext reference) holds the destination. The content between the tags is the link's label, the clickable part.

<a href="https://scrimba.com/courses">Browse the courses</a>

<a> is an inline element, so it sits inside a line of text like a word does, rather than starting a new block. That is why you can drop a link into the middle of a paragraph without breaking the line.

You are not limited to wrapping text. An anchor can wrap an image or a whole block of content, and the entire thing becomes clickable:

<a href="/courses/html">
  <img src="html-course.jpg" alt="The HTML course">
  <span>Start the HTML course</span>
</a>

The anchor element <a> becomes a link only when it carries an href attribute. Without one it is a placeholder that the browser does not treat as a link at all. The label, the text between the tags, is the part that matters most for people who do not read the page from top to bottom.

A screen reader (software that reads a page aloud for people who cannot see it) can pull up a list of every link on a page so its user can skim them out of context. In that list, "click here" and "read more" appear with nothing to tell them apart, so the link text has to make sense on its own, out of context. Write it to describe the destination: "Read the refund policy", not "click here".

Search engines read the same signal. The words inside a link, the anchor text, tell a crawler (the program a search engine uses to read pages) what the linked page is about, so a descriptive label helps the page you link to as well as your own.

JunoThe anchor element An anchor is <a href="...">: the href is where it goes, the text between the tags is what people click. That is the whole element. Get those two parts and you can link anywhere on the web.

JunoThe anchor element<a> plus an href makes a link, and it is inline so it drops straight into a sentence. You can wrap more than text too, an image or a whole block works. The label is the clickable bit, the href is the destination.

JunoThe anchor element The label is the part that travels: screen readers and search engines both read it out of context, so click here tells them nothing. Describe the destination in the text instead. And an <a> with no href is not a link, only markup.

Absolute and relative URLs

Every link needs an address to point at, and there are two kinds. An absolute URL is the full address, starting with https://, the same one you would type into the address bar. Use it to link to another website:

<a href="https://scrimba.com">Scrimba's home page</a>

A relative URL is a shortcut to another page on your own site. Instead of the full address, you give the path from where you are now:

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

That link looks for an about.html file in the same folder as the current page. An absolute URL is a full postal address with the country and city; a relative URL is "two doors down from here".

Absolute URLs carry the whole address, including the protocol (https) and the domain. Relative URLs are resolved against the current page's address, so they describe a path rather than a full location:

<a href="/blog/getting-started">Getting started</a>   <!-- from the site root -->
<a href="getting-started">Getting started</a>          <!-- from the current folder -->
<a href="../index.html">Back to home</a>              <!-- up one folder -->

A leading / makes it root-relative: it starts from the site root, so it points to the same place no matter which page you link from. No leading slash means "relative to the current page's folder", and ../ climbs up one level.

href also handles addresses that are not web pages. mailto: opens the visitor's email app with a new message, and tel: on a phone starts a call:

<a href="mailto:[email protected]">Email us</a>
<a href="tel:+15551234567">Call support</a>

Every relative URL is resolved against a base URL, which by default is the address of the current page. So the same href can resolve to different places depending on where the page lives, and that is the whole reason the three forms behave differently:

• Root-relative, a path starting with / (/blog/post): resolved from the domain root, so it points to the same place from every page on the site.
• Document-relative, no leading slash (post, ../post): resolved from the current page's folder, and it breaks the moment you move the page.
• Fully absolute (https://example.com/blog/post): names the protocol and domain outright, needed for other sites and needlessly brittle for your own.

Prefer root-relative links for anything on your own site. They survive folder restructuring and let you move a whole site between a staging server and production without rewriting a single link, because they never hard-code the domain. Keep fully absolute URLs for external destinations, where you have no choice.

One note on mailto: and tel:: they are ordinary href values, so they follow the same anchor rules, but they hand control to another app (an email client or the phone dialler) and behave differently on every device. Useful as a convenience, never as your only route to reach you.

JunoAbsolute and relative URLs Two kinds of address: an absolute URL is the full https://... for other sites, a relative one like about.html is a shortcut to a page on your own. Full postal address versus "two doors down". Start with relative links for your own pages and you will type a lot less.

JunoAbsolute and relative URLs Relative URLs resolve against the current page, so a leading / means "from the site root" and ../ means "up a folder". href also takes mailto: and tel:, which hand off to the email app or the dialler. Root-relative is the safe default for links inside your own site.

JunoAbsolute and relative URLs Every relative URL resolves against the current page's address, which is why root-relative links (/blog/post) survive folder moves and document-relative ones do not. Keep fully absolute URLs for other people's sites. And since mailto: and tel: depend on the visitor's device, never make them your only way to be reached.

Link targets, rel, and opening in new tabs

By default, clicking a link loads the new page in the same tab, replacing the page you were on. Sometimes you want it to open in a new tab instead, so the visitor keeps your page open. You do that with the target attribute set to _blank:

<a href="https://scrimba.com" target="_blank">Open Scrimba in a new tab</a>

_blank means "a fresh, blank tab". Opening a link normally is walking through a doorway into the next room; target="_blank" opens a second door so the first room stays where it was.

target="_blank" opens the link in a new browsing context, a new tab or window, so the visitor does not lose their place on your page. It comes with a catch worth building into a habit: pair it with rel="noopener".

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

Without noopener, the page you open gets a reference back to yours through JavaScript and can interfere with it. rel="noopener" cuts that connection. Modern browsers now do this automatically for target="_blank", but writing it yourself is explicit and stays safe on older browsers.

Open in a new tab only for links that leave your site. Opening in-site links in new tabs surprises people and breaks the back button, so reserve target="_blank" for links heading elsewhere, and use it deliberately even then.

The rel attribute (short for relationship) describes how the linked page relates to yours, and a handful of its values do real work. Each solves a specific problem:

• noopener: stops the new page from getting a JavaScript reference back to yours through window.opener, which it could otherwise use to redirect your tab to a look-alike page. Always pair it with target="_blank". Browsers now imply it, but stating it protects older ones.
• noreferrer: also strips the referrer (the header that tells the destination which page the visitor came from), so the target site cannot see that the click came from you. It implies noopener as well. Use it when you do not want to reveal where the link lives.
• nofollow: tells search engines not to pass ranking credit to the linked page. Reach for it on links you do not vouch for, like user-submitted content or comments.
• sponsored: marks a paid or affiliate link, so search engines know the link was placed for payment. Using it keeps you inside their guidelines for paid links.

You can combine them in one space-separated list, rel="noopener noreferrer", and the browser applies each.

JunoLink targets, rel, and opening in new tabstarget="_blank" opens a link in a fresh tab so your page stays put. Leave it off and the link opens in the same tab, which is what people expect most of the time. Save the new tab for links heading off to other sites.

JunoLink targets, rel, and opening in new tabstarget="_blank" opens a new tab, and you pair it with rel="noopener" so the new page cannot reach back into yours. Browsers mostly do this now, but writing it stays safe on older ones. Do not new-tab your own pages: it breaks the back button and surprises people.

JunoLink targets, rel, and opening in new tabsrel is a small toolbox: noopener cuts the JavaScript link back to your tab, noreferrer also hides where the click came from, nofollow withholds ranking credit, sponsored flags paid links. Combine them with a space, like noopener noreferrer. Reach for each when its problem shows up, not by default.

In-page links with fragment IDs

Links do not only go to other pages. They can also jump to a spot further down the current page, the way a table of contents does. First, give the spot you want to reach, for example a heading, a unique id attribute:

<h2 id="pricing">Pricing</h2>

Then link to it by putting a # in front of that name:

<a href="#pricing">Jump to pricing</a>

Clicking the link scrolls the page down to the pricing heading. The #name part is called a fragment. The id is a bookmark you slip into the page, and the # link is you flipping straight to it.

An id gives an element a unique name, and a link whose href starts with # points at the element with that id on the current page:

<a href="#contact">Contact</a>
...
<section id="contact">
  <h2>Contact us</h2>
</section>

The value after # is the fragment identifier. Two rules make it work: an id must be unique on the page, and the link's fragment must match it exactly, including case.

You can link to a fragment on another page too, by adding it after the URL:

<a href="/help#refunds">Refund policy</a>

That loads the help page and scrolls straight to the element with id="refunds". A bare # or #top in an href jumps back to the top of the page.

A fragment link (an href starting with #) moves the page to the element whose id matches, and it also moves keyboard focus there when the target can receive focus. That behaviour is the basis of a skip link: a link, usually the very first thing in the page, that lets a keyboard or screen-reader user jump past repeated navigation straight to the main content.

<body>
  <a href="#main" class="skip-link">Skip to main content</a>
  <nav>...</nav>
  <main id="main">
    ...
  </main>
</body>

Without it, someone navigating by keyboard has to tab through every navigation link on every page before reaching the content. The skip link is normally hidden until it receives focus, then it appears, so it stays out of the way for mouse users while being the first stop for keyboard users.

Two details decide whether it works. The target (<main id="main"> here) should be the real content container, and giving that container tabindex="-1" makes sure focus lands there in every browser (tabindex="-1" means "focusable by script but not part of the normal tab order"). Test it by pressing Tab the moment the page loads: the first thing focused should be the skip link.

JunoIn-page links with fragment IDs Give a spot an id, then link to it with # and that same name, like <a href="#pricing">. The page scrolls straight there. Picture the id as a bookmark and the # link as flipping to it.

JunoIn-page links with fragment IDs A #name in an href jumps to the element with that id. The id has to be unique on the page and match the fragment exactly, case and all. Add #name after a URL to land on a spot on another page.

JunoIn-page links with fragment IDs Fragment links move focus, not only the scroll position, which is what makes a skip link work: a first-in-page <a href="#main"> lets keyboard users jump past the nav. Point it at your real content container and give that tabindex="-1" so focus lands there everywhere. Press Tab on a fresh page load to check it.

Building a navigation

Most sites have a row of links at the top: Home, About, Contact. That is a navigation, and it is a set of anchors grouped together. HTML has an element made for it, <nav>, which marks a block as the page's navigation:

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

Each link is an ordinary anchor. Wrapping them in <nav> tells the browser and other tools "this group is how you get around the site".

A navigation is a list of links, and the idiomatic way to build it says exactly that: an unordered list inside a <nav>.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/courses">Courses</a></li>
    <li><a href="/pricing">Pricing</a></li>
  </ul>
</nav>

Why the list? A screen reader announces "list, three items", so its user knows how many links to expect before stepping through them. The <nav> element is a landmark: assistive tools let users jump directly to it, the way the skip link jumps to the main content. Use nav for major navigation blocks, not every group of links.

A <nav> is a landmark region (a labelled area of the page that assistive tools can list and jump to), and a page's main navigation lives in one. When a site has more than one nav, the primary menu and a set of footer links say, give each a label with aria-label so they are told apart:

<nav aria-label="Primary">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/courses" aria-current="page">Courses</a></li>
    <li><a href="/pricing">Pricing</a></li>
  </ul>
</nav>

The attribute that earns its place here is aria-current. Set aria-current="page" on the link that points to the page the visitor is already on. Visually you might show the current page by highlighting its link; aria-current="page" says the same thing to a screen reader, which then announces the link as "current page". Without it, a highlighted link looks active to sighted users but is indistinguishable from the others to anyone who cannot see the colour.

Keep the markup honest: the link to the current page stays a real anchor, so keyboard behaviour is consistent, and aria-current carries the "you are here" meaning rather than colour alone.

JunoBuilding a navigation A navigation is a group of links wrapped in <nav>, like Home, About, Contact. The <nav> tells everything "this is how you get around". The links inside are plain anchors, nothing new to learn.

JunoBuilding a navigation Build a nav as a <ul> of links inside <nav>: the list tells a screen reader how many links are coming, and <nav> is a landmark people can jump to. Save it for the real menus, the top bar and the footer, not every cluster of links.

JunoBuilding a navigation<nav> is a landmark, so label each one with aria-label when a page has more than one. Mark the visitor's current page with aria-current="page": that is how a screen reader learns what a highlight colour shows sighted users. Keep the current link a real anchor so keyboard behaviour stays consistent.