**`<a>`** is the element that makes the web 'hyper' — its **`href`** attribute points to the destination: an absolute URL (`https://...`), a relative path (`/about`), an in-page anchor (`#section-id`), an email (`mailto:...`), or a phone number (`tel:...`). The **`target="_blank"`** attribute opens the link in a new tab, and when you use it, you should also add **`rel="noopener noreferrer"`** for security (it prevents the new page from gaining a reference back to your window via `window.opener`).
1Understanding <a>
`<a>` is the element that makes the web 'hyper' — its `href` attribute points to the destination: an absolute URL (https://...), a relative path (/about), an in-page anchor (#section-id), an email (mailto:...), or a phone number (tel:...). The `target="_blank"` attribute opens the link in a new tab, and when you use it, you should also add `rel="noopener noreferrer"` for security (it prevents the new page from gaining a reference back to your window via window.opener).
Always pair target="_blank" with rel="noopener noreferrer" — without it, the page you link to can access window.opener and potentially redirect your original tab to a phishing page (a real, exploitable vulnerability called 'tabnabbing').
<a href="/reference/html">Browse the HTML reference</a>
<a href="#section-2">Jump to Section 2</a>2Practical Example
Here is a real-world application of <a> showing how it is used in production HTML.
<!-- Safely opening an external link in a new tab -->
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">
External Site
</a>
<a href="mailto:hello@example.com">Email us</a>3Best Practices
Follow these guidelines when working with <a>:
1. Use descriptive link text (not 'click here') for accessibility and SEO
2. Add rel="noopener noreferrer" whenever you use target="_blank"
3. Use mailto: and tel: links for email addresses and phone numbers so they're actionable on mobile
Tip: Always pair target="_blank" with rel="noopener noreferrer" — without it, the page you link to can access window.opener and potentially redirect your original tab to a phishing page (a real, exploitable vulnerability called 'tabnabbing').
<a href="/reference/html">Browse the HTML reference</a>
<a href="#section-2">Jump to Section 2</a>