*"A hyperlink is a first-class citizen of the web. It’s not just a way to move from A to B—it’s a declaration of intent, a contract between the author and the user."* — **Rachel Andrew**, CSS Working Group Member
href="https://example.com"
rel="noopener noreferrer"
target="_blank"
href="/about"
aria-current="page"
<a><svg></a>
aria-label="Download"
href="javascript:void(0)"
<button>
A: Yes. Use the `download` attribute to force a download instead of rendering the file in-browser: <a href="document.pdf" download>Download PDF</a>. For PDFs that should open in a new tab, omit `download` and let the browser handle it via plugins or native support.
<a href="document.pdf" download>Download PDF</a>
A: `target="_blank"` opens the link in a new tab, but without `rel="noopener noreferrer"`, the new page can access the original tab’s `window.opener`—a security risk. Always pair them: <a href="..." target="_blank" rel="noopener noreferrer">.
<a href="..." target="_blank" rel="noopener noreferrer">
A: While `` works, it’s deprecated. Instead, use an `` with an `onclick` handler or a `` with `role="link"` for better accessibility: <a href="#" onclick="myFunction(); return false;">Click Me</a>.
<a href="#" onclick="myFunction(); return false;">Click Me</a>
A: Yes, but judiciously. `rel="prefetch"` hints to the browser to fetch a resource in the background, reducing load time for likely future navigation. Overuse can waste bandwidth, so limit it to critical links (e.g., "Next Page" buttons).
A: Ensure: 1. The link is focusable (no `tabindex="-1"` unless necessary). 2. It has descriptive text (avoid "Click Here"). 3. Icon-only links include `aria-label`: <a href="#" aria-label="Download report"><svg>...</svg></a>.
<a href="#" aria-label="Download report"><svg>...</svg></a>
A: Use: - Descriptive anchor text (e.g., `SEO Best Practices`). - Logical internal linking (e.g., related posts, breadcrumbs). - `hreflang` for multilingual sites: <a href="/es/" hreflang="es">Versión en Español</a>. Avoid keyword stuffing or over-optimized anchor text.
<a href="/es/" hreflang="es">Versión en Español</a>
A: Yes. Use the `href` with a fragment identifier and ensure the target has an `id`: <a href="#section-id">Jump to Section</a> <h2 id="section-id">Target Section</h2> For smooth scrolling, add CSS: html { scroll-behavior: smooth; }.
<a href="#section-id">Jump to Section</a>
<h2 id="section-id">Target Section</h2>
html { scroll-behavior: smooth; }