HTML Links

Basic

Links are the reason the web exists at all. The first website ever published was mostly links, a list of places you could go next, and thirty years of design trends have not changed the underlying idea: one page points at another, and a click follows the pointer. In HTML, that whole mechanism lives in one element.

<? href="/learn">Learn HTML</a>

An anchor is written with the <a> element. It has two halves, and both carry meaning: the href attribute says where the link goes, and the text between the tags says what the reader is clicking.

1

<a href="/recipes/sourdough/">Read the sourdough guide</a>

Write link text that stands on its own

If you remember one rule from this lesson, make it this one: the text of a link should make sense on its own . Screen reader users frequently navigate by pulling up a list of every link on the page, stripped of the sentences around them. A list that reads click here, click here, read more, this page tells them nothing. A list that reads read the sourdough guide, opening hours, contact the bakery lets them jump straight to what they came for.

The same text also ends up in search engine results, browser tab histories, and social preview cards, all places where your surrounding paragraph is nowhere to be found. Writing honest link text is the cheapest accessibility and SEO work you will ever do.

Where an href can point

The href attribute accepts more shapes than raw URLs. Each form answers a slightly different question, and picking the right one keeps your pages portable when they move between localhost, a staging server, and production.

For links inside your own site, prefer root-relative or document-relative paths over copying full https:// URLs everywhere. Absolute links to your own domain keep working only as long as the domain never changes, and they make local preview needlessly awkward.

Linking to a place inside the page

Long pages earn their keep when readers can jump around them. A fragment is an href that starts with # followed by the id of an element further down. Browsers scroll the matching element into view without reloading anything. Pairing each jump with a back to top link keeps the round trip polite.

Try the example below: it is a small FAQ page with a list of question links at the top, each pointing at a fragment further down, and a return link after every answer. Edit the questions or the ids, run it again, and watch which jumps still work.

One detail worth noticing: the jump targets use id="starter" on the heading, and the links reference them as #starter. If you rename one side and not the other, the browser quietly does nothing when the link is clicked, which is why fragment bugs are easy to ship. There is no error message to warn you.

The specification, translated

The HTML specification makes a small distinction that is easy to miss: an <a> element is not automatically a link just because it looks like one. It becomes a hyperlink when it has an href attribute. Without href, it is a placeholder for where a link could be.

The specification also describes the anchor as transparent content: an <a> can wrap ordinary content, including larger structures, but it must not contain another interactive element such as another link or a button. That rule protects the browser and assistive technology from having one activation area nested inside another.

?

Opening links in a new tab

By default, a link replaces the current page. Adding target="_blank" opens the destination in a new tab instead, which readers appreciate when following a reference mid-article.

1
2
3
4
5

<a href="https://foxipa.com/en/css/"
   target="_blank"
   rel="noopener noreferrer">
  Continue with the CSS curriculum
</a>

The rel attribute describes the relationship between the current page and the destination. noopener matters for security: historically, a page opened with target="_blank" could reach back into your tab through window.opener and redirect it, a trick known as tabnabbing. Modern browsers now isolate the opened page by default, but writing noopener costs nothing and still protects users on older embedded browsers. noreferrer additionally strips the referring URL from the request, which some privacy policies require.

Links that download

The download attribute turns a link into a save request: the browser downloads the destination instead of navigating to it, and uses the attribute's value as the suggested filename. It works best for files your own site serves.

1
2
3

<a href="/menus/winter-2026.pdf" download="foxipa-winter-menu.pdf">
  Save the winter menu
</a>

Without download, a PDF link usually opens in a viewer tab, which is often the nicer behavior. Reach for this attribute when saving is clearly the reader's goal, not as a way to keep people on your page.

What can live inside a link

An anchor is one of the few elements that changes shape depending on company. Used inside a paragraph it holds phrasing content: text, <em>, <strong>, inline images. Used on its own, it may wrap entire blocks, which is what makes the card pattern below legal HTML: one link covering a heading, an image and a paragraph at once.

1
2
3
4
5

<a href="/tours/luxor/" class="card">
  <img src="luxor.jpg" alt="Columns of the temple at Karnak">
  <h3>Temples of Luxor</h3>
  <p>Two days along the east bank, guided.</p>
</a>

What an anchor may never contain is another interactive element. Never nest <a> inside <a>, or put <button> inside a link. Interactive elements inside interactive elements produce unpredictable focus and click behavior across browsers, and screen readers struggle to announce the combination at all.

Mistakes worth avoiding

• href="#" as a placeholder for an unfinished feature. Screen readers announce it as a real link, and clicking it scrolls the page to the top. Use a <button> and disable it instead.

• href="javascript:..." URLs. They break keyboard and touch behavior, leak into status bars, and confuse security tooling. If clicking should run code, that control is a button.

• Linking a whole sentence with click here buried at the end. Lead with the meaningful words so scanning readers find them.

• Relying on the title attribute to explain a link. It is invisible on touch devices and to many keyboard users. Say it in the link text.

• Wrapping headings in links to make them stand out. Style headings with CSS; link them only when the heading is genuinely a destination.

Quick check

If you can look at a link's text alone and know where it leads, choose an href form that survives your site moving around, and explain why target="_blank" travels with rel="noopener", you have what matters from this lesson. When you are ready, take the HTML Links quiz.