CPCODELAB
HTML

Links: Anchor Tags, Relative vs Absolute, target

9 min read

Hyperlinking with the Anchor Element

The <a> (anchor) element creates a hyperlink. Its href attribute holds the destination URL. Without href, the anchor is just a placeholder with no default behaviour.

html
<!-- Absolute URL -->
<a href="https://developer.mozilla.org">MDN Web Docs</a>

<!-- Relative URL -->
<a href="/about">About Us</a>
<a href="../images/photo.jpg">View Photo</a>

<!-- Open in new tab -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">External Site</a>

<!-- Email link -->
<a href="mailto:hello@example.com">Send an email</a>

<!-- Jump to section on the same page -->
<a href="#contact">Go to Contact</a>

Absolute vs Relative URLs

An absolute URL contains the full address including the protocol (https://). Use it when linking to a different website. A relative URL is a path relative to the current file's location. Use it for internal links within your own site.

When using target="_blank", always add rel="noopener noreferrer". Without it, the opened page can access your page via window.opener, which is a security vulnerability.

Ready to test yourself?
Practice HTML— quiz & coding exercises