The Anchor Element
Links are created with the <a> (anchor) element. The href attribute specifies the destination the link points to.
Basic Link
<a href="https://example.com">Visit Example</a>Absolute vs Relative URLs
An absolute URL includes the full address, including protocol and domain (https://example.com/about). A relative URL points to a location relative to the current page (about.html or /about).
Absolute and Relative Links
<!-- Absolute -->
<a href="https://example.com/contact">Contact</a>
<!-- Relative -->
<a href="about.html">About</a>
<a href="/blog/post-1">Blog Post</a>Opening Links in a New Tab
The target="_blank" attribute opens a link in a new browser tab. When used, it should be paired with rel="noopener noreferrer" to prevent the new page from accessing the original page via window.opener.
Opening in a New Tab Safely
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
Open in a new tab
</a>Linking to a Section on the Same Page
You can link to a specific element on the page using a fragment identifier — a hash (#) followed by the target element’s id.
Same-Page Anchors
<a href="#contact">Jump to Contact</a>
<!-- Later in the page -->
<h2 id="contact">Contact Us</h2>Other Common href Values
- mailto:someone@example.com — opens the default email client
- tel:+15551234567 — starts a phone call on mobile devices
- # — links to the top of the current page
Avoid Vague Link Text
Avoid link text like "click here". Screen reader users often navigate by jumping between links, so text should describe the destination, e.g. "Read our privacy policy".
Best Practice
Always add rel="noopener noreferrer" when using target="_blank", and write descriptive link text for accessibility and SEO.