Links

Links are what make the web a web. The <a> (anchor) element creates one; its href attribute says where it goes.

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

Absolute and relative links

• An absolute URL includes the whole address: https://example.com/about.html.
• A relative URL is relative to the current page: about.html, ../index.html, /learn/.

Use relative links between pages of your own site, so they keep working if the domain changes.

Opening in a new tab

target="_blank" opens the link in a new tab. Add rel="noopener" for security when linking to other sites:

<a href="https://www.python.org" target="_blank" rel="noopener">Python (opens in a new tab)</a>

Linking within a page

Give an element an id, then link to it with #:

<a href="#faq">Jump to the FAQ</a>
<div style="height:220px;border-left:3px dashed #ccd;margin:10px 0;padding-left:10px">Lots of content…</div>
<h2 id="faq">Frequently asked questions</h2>
<p>Here they are.</p>

Email, phone and download links

<a href="mailto:hello@example.com">Email us</a><br>
<a href="tel:+911234567890">Call us</a><br>
<a href="data:text/plain,Hello%20from%20CodeMIRAI" download="hello.txt">Download a text file</a>

The download attribute asks the browser to save the file instead of opening it.

Good link text

Link text should make sense on its own. Screen-reader users often jump from link to link, so "click here" tells them nothing:

<!-- unclear -->
To read our pricing, <a href="/pricing">click here</a>.

<!-- clear -->
Read our <a href="/pricing">pricing details</a>.