TopolearnLinks are what make the web a web; getting URLs and link text right affects usability, SEO and security.
A link is an <a> element with an href. The href can be:
- an absolute URL like
https://example.com/docs, - a root-relative path like
/about(from the site's root), - a relative path like
pricing.htmlor../index.html(from the current page's folder), - a fragment like
#faq, which scrolls to the element withid="faq", - a scheme such as
mailto:hi@example.comortel:+15551234.
Write link text that makes sense on its own: "Read the pricing guide", not "click here". Screen-reader users often list all links on a page, and search engines use the text to understand the target.
target="_blank" opens a new tab. Modern browsers imply rel="noopener" for it, so the new page can't control yours via window.opener, but use it sparingly; people can open new tabs themselves. Use rel="nofollow" or rel="sponsored" for untrusted or paid links.
The download attribute asks the browser to save the target instead of navigating to it (same-origin only).
A link navigates; a button does something on the current page. If clicking runs JavaScript and doesn't go anywhere, use <button>, not <a href="#">. Wrapping a whole card in an <a> is allowed, since <a> may contain block content, as long as there are no other interactive elements inside.
Example
<nav>
<a href="/">Home</a>
<a href="/docs/getting-started">Getting started</a>
<a href="#faq">Jump to the FAQ</a>
</nav>
<p>Questions? <a href="mailto:support@example.com">Email support</a>.</p>
<a href="https://developer.mozilla.org/" target="_blank" rel="noopener">
MDN Web Docs (opens in a new tab)
</a>
<a href="/files/report.pdf" download>Download the 2026 report (PDF)</a>
<h2 id="faq">FAQ</h2>Remember
- href takes absolute, root-relative, relative or #fragment URLs
- Link text should describe the destination
- Use <a> to navigate and <button> to perform actions
Watch out for
- Using <a href="#" onclick=...> for actions; it breaks keyboard and screen-reader expectations.