HTML Links

HTML links, also called hyperlinks, let users jump from one page to another. They are created with the <a> (anchor) element and its href attribute, which holds the destination address.

Basic Link Syntax

target="_blank" opens the link in a new tab. Adding rel="noopener" is a good safety habit for external links.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Links</title></head>
<body>
  <p><a href="https://www.mozilla.org">Visit Mozilla</a></p>
  <p><a href="https://www.mozilla.org" target="_blank" rel="noopener">Open Mozilla in a new tab</a></p>
</body>
</html>

Absolute vs Relative URLs

  • Absolute URL: a full address including https://, used for other websites
  • Relative URL: a path from the current page, such as about.html or images/logo.png
  • Root-relative URL: starts with /, such as /contact, measured from the site root
  • Use relative URLs for pages on your own site so links keep working if the domain changes

Linking to a Section on the Same Page

Give the target element an id, then link to it with #id. This is how "Back to top" and table-of-contents links work.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Anchors</title></head>
<body>
  <a href="#faq">Jump to FAQ</a>
  <div style="height:900px">Long content...</div>
  <h2 id="faq">FAQ</h2>
  <p>Answers live here. <a href="#">Back to top</a></p>
</body>
</html>

Email, Phone and Download Links

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Special Links</title></head>
<body>
  <p><a href="mailto:hello@example.com?subject=Hello">Send an email</a></p>
  <p><a href="tel:+923001234567">Call us</a></p>
  <p><a href="data:text/plain,Hello%20file" download="hello.txt">Download a text file</a></p>
</body>
</html>

Writing Good Link Text

Link text should describe the destination. "Read our pricing guide" is far better than "click here" for both accessibility and SEO, because screen readers often list links out of context.

Frequently asked questions

How do I open a link in a new tab in HTML?

Add target="_blank" to the <a> element. Also add rel="noopener" for external sites to prevent the new page from controlling the original tab.

How do I make an image a link?

Place the <img> element inside an <a> element: <a href="/home"><img src="logo.png" alt="Home"></a>.

How do I change link colour?

Use CSS, for example a { color: green; } and a:hover { color: darkgreen; }.