Skip to main content

Links

beginner12 min readLesson 8 of 143

Connect pages to each other and to the rest of the internet with anchors.

Links β€” anchors β€” are what make the web a web: one page pointing to another, and another, forever.

The anchor element

<a href="https://developer.mozilla.org">MDN Web Docs</a>

href (hypertext reference) says where the link goes; the element's content is what the visitor clicks.

Absolute vs relative URLs

<a href="https://example.com/page">Absolute β€” full address</a>
<a href="about.html">Relative β€” relative to the current page</a>
<a href="#top">Fragment β€” jumps to an id on this page</a>

Use absolute URLs for other sites, relative URLs for pages in your own project. Fragments (#top) scroll to an element whose id="top".

Links that open in a new tab

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

target="_blank" opens a new tab. When you do, always add rel="noopener noreferrer" β€” it is a security habit (the opened page cannot manipulate the page that opened it).

Writing good link text

Bad: <a href="more.html">click here</a> Good: <a href="more.html">Read more about HTML elements</a>

Screen-reader users often jump from link to link out of context β€” "click here" tells them nothing. Describe the destination.

What you learned

  • <a href="..."> creates a link; content is the clickable part
  • Absolute vs relative vs fragment URLs
  • target="_blank" pairs with rel="noopener noreferrer"
  • Link text should describe the destination

Now practice

Links β€” PracticeHands-on practice for β€œLinks”: apply what you just learned in html-links.4 challenges Β· Β· ~5 min