The Anchor Tag & href
The <a> (anchor) tag is what turns text or images into clickable links, using the href attribute to specify the destination.
<a href="https://example.com">Visit Example.com</a>
<a href="/about">About Us</a>
<a href="contact.html">Contact Page</a>
There are three common types of href values:
- Absolute URL:
https://example.com— a full web address, used for linking to external sites. - Root-relative path:
/about— starts from the domain's root, regardless of which page you're currently on. - Relative path:
contact.htmlor../images/logo.png— resolved relative to the current page's location.
By default, links open in the same tab. To open in a new tab, add target="_blank" — and when you do, it's best practice to also add rel="noopener noreferrer" for security, since the new tab could otherwise access and manipulate the original page.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Open in new tab</a>
Links can also wrap other elements, not just text:
<a href="/products">
<img src="product-thumb.jpg" alt="View our products">
</a>