Create links

Links are what make the Web a web. Without them, every page would be an island.

Create a link with the anchor element, a, and the href attribute:

<a href="https://example.com/guides/cycling/">Read the cycling guide</a>

The href value is the destination. The text between the opening and closing tags is the link text. That text should make sense on its own.

“Read the cycling guide” tells someone where they are going. “Click here” does not, especially when a screen reader lists every link on the page out of context. My advice is to write link text as if the surrounding sentence were invisible.

Click the link and the browser navigates to the destination. The link text usually appears underlined and in a different color. You can change that later with CSS, but the link should still be recognizable before any styling exists.

An anchor without href is not a hyperlink:

<a>Not a working link</a>

It may look like a link in some browsers, but it does not navigate anywhere and it does not behave like a real link for keyboard or assistive technology users.

A link can wrap an image or other phrasing content:

<a href="/">
  <img src="logo.svg" alt="Acme home">
</a>

When an image is the only content inside a link, its alt text should describe the link’s purpose (where the link goes), not just what the image looks like.

You cannot nest one link inside another. If you wrap a word that is already inside an <a>, the browser repairs the tree and you lose predictable behavior. Use two separate links when you need two destinations near each other.

When you connect pages in the practice lessons, add a link from your my-page/index.html to an external resource you trust. Use descriptive link text and confirm the browser opens the right URL when you click it.