Links: The <a> Element
Links are what make the web a web. The <a> element (short for anchor) creates a hyperlink.
Basic syntax
Section titled “Basic syntax”<a href="https://example.com">Visit Example</a>The href attribute holds the URL. The text between the tags becomes the clickable link.
Absolute vs relative URLs
Section titled “Absolute vs relative URLs”Absolute URLs point to a full web address, including the protocol:
<a href="https://mozilla.org">Mozilla</a>Use absolute URLs when linking to external websites.
Relative URLs point to another file in your own project, using a path relative to the current file:
<a href="about.html">About</a><a href="projects/index.html">My Projects</a>Use relative URLs when linking between your own pages.
Linking to email
Section titled “Linking to email”The mailto: scheme opens the user’s email client:
<a href="mailto:hello@example.com">Email me</a>Opening in a new tab
Section titled “Opening in a new tab”The target="_blank" attribute opens the link in a new browser tab:
<a href="https://example.com" target="_blank">Open in new tab</a>Use this sparingly and only when it genuinely serves the user — most of the time, let the user decide.
Write meaningful link text
Section titled “Write meaningful link text”The text inside <a> should describe where the link goes — not just “click here.”
Poor — tells the user nothing:
<p>To learn more, <a href="resources.html">click here</a>.</p>Better — self-describing:
<p>Browse the <a href="resources.html">learning resources</a>.</p>Screen readers read link text in isolation. “Click here” in a list of links is meaningless. “Learning resources” is not.
Exercise
Section titled “Exercise”Open index.html in VS Code and add three links to the page:
1. An external link — add this inside your <body>, somewhere that makes sense for your topic:
<p>Learn more at <a href="https://wikipedia.org">Wikipedia</a>.</p>Replace the URL and link text with something relevant to your page’s subject.
2. A relative link — create a second file called about.html in the same folder as index.html. Put a minimal page in it (just a <body> with an <h1>). Then add a link from index.html to it:
<p><a href="about.html">About this page</a></p>3. A mailto: link — add a contact line at the bottom of your <body>:
<p><a href="mailto:you@example.com">Contact me</a></p>Save index.html, open it in your browser, and test all three links. The external and relative links should navigate; the mailto: link should open your email client (or show a browser prompt if no client is configured).
<a href="...">link text</a>creates a hyperlink.- Use absolute URLs for external sites, relative URLs for your own pages.
mailto:opens an email client.target="_blank"opens the link in a new tab — use sparingly.- Write descriptive link text — never “click here.”