Where Links Can Go · HTML

Ch 2 · Lists, Links & Images — card 4 of 4.

The href in a link can point to more than another website. The same <a> tag can jump to a part of the current page, open a new tab, or start an email.

• 🌐 Full web addresses that start with https://
• ⚓ Jumping to a section of the same page using an id
• 📧 Email links that start with mailto:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Page</title>
  </head>
  <body>
    <h1 id="top">Book Club</h1>
    <p><a href="#rules">Jump to the rules</a></p>
    <p><a href="https://www.bbc.co.uk/bitesize" target="_blank" rel="noopener">BBC Bitesize (opens in a new tab)</a></p>
    <p><a href="mailto:[email protected]">Email the club</a></p>
    <h2>This Term's Books</h2>
    <ol>
      <li>Holes</li>
      <li>Wonder</li>
      <li>The Boy at the Back of the Class</li>
      <li>Skellig</li>
      <li>Coraline</li>
    </ol>
    <h2 id="rules">Rules</h2>
    <ol>
      <li>Read one chapter a week</li>
      <li>No spoilers!</li>
    </ol>
    <p><a href="#top">Back to top</a></p>
  </body>
</html>

An id gives an element a unique name. Linking to # plus that name, as in href="#rules", scrolls straight to it. target="_blank" opens the link in a new tab, and rel="noopener" is a safety habit that stops the new page reaching back into yours. A mailto: link opens the visitor's email app with the address already filled in.

• Each id must be used only once on a page
• Link text should say where it goes: "Email the club" beats "click here"
• Tell visitors when a link will open in a new tab