Links are what make the web a web. The <a> tag (short for “anchor”) lets you connect pages, jump to sections, link to files, and even open email clients.
A link needs two things: the tag wrapping the clickable text, and an href attribute telling the browser where to go. href stands for “hypertext reference.”
<a href="https://example.com">Visit Example</a>
The text between the tags is what the user sees and clicks. The URL goes inside the quotes of href.
Rule: never use vague link text like “click here” or “read more.” Screen readers announce links by their text alone, so “Visit the HTML documentation” is far more useful than “click here.”
There are two ways to write a URL: absolute and relative.
An absolute URL includes the full address — protocol, domain, and path. Use it when linking to another website.
<a href="https://developer.mozilla.org">MDN Web Docs</a>
A relative URL is a path to a file on your own site. Use it when linking between your own pages. The browser figures out the full address based on where the current page lives.
<!-- Links to about.html in the same folder -->
<a href="about.html">About me</a>
<!-- Links to a file in a subfolder -->
<a href="blog/post-1.html">My first post</a>
By default, links open in the same tab. Add target="_blank" to open in a new tab instead. This is common for links that take users off your site.
<a href="https://example.com" target="_blank">
Open in new tab
</a>
Security note: when using
target="_blank", also addrel="noopener". Without it, the linked page can access your page’s browser context — a potential security risk.
<a href="https://example.com" target="_blank" rel="noopener">
Safe external link
</a>
You can link to a specific part of a page using an id attribute as an anchor target. First, give the target element an id. Then link to it with #id-name.
<!-- The target -->
<h2 id="contact">Contact me</h2>
<p>Reach me at hello@example.com</p>
<!-- The link, anywhere on the page -->
<a href="#contact">Jump to contact section</a>
This is how “back to top” buttons and table-of-contents links work.
The href attribute isn’t just for web pages.
<!-- Link to an email address -->
<a href="mailto:hello@example.com">Send me an email</a>
<!-- Link to download a file -->
<a href="resume.pdf" download>Download my resume</a>
<!-- Link to a phone number (useful on mobile) -->
<a href="tel:+15550001234">Call us</a>
Add this to your index.html and test each link type in the browser:
<body>
<h1>My links page</h1>
<p>
Visit <a href="https://developer.mozilla.org" target="_blank" rel="noopener">
MDN Web Docs
</a> to learn more HTML.
</p>
<p><a href="about.html">About me</a> (relative link)</p>
<p><a href="mailto:you@example.com">Email me</a></p>
<h2 id="bottom">Bottom of the page</h2>
<p><a href="#bottom">Jump here</a></p>
</body>
| Attribute | Purpose |
|---|---|
href="https://..." | Absolute link to another site |
href="page.html" | Relative link to your own page |
href="#section-id" | Jump to a section on the same page |
href="mailto:..." | Open email client |
href="file.pdf" download | Trigger a file download |
target="_blank" | Open in a new tab |
rel="noopener" | Security flag for new-tab links |