Links and images
Anchor hrefs, relative vs absolute paths, target behavior, and images that are accessible, responsive, and fast.
Anchors
<a href="https://example.com/docs">Read the docs</a>
<a href="/learn/html/">Same site, root-relative</a>
<a href="#section-2">Jump within the page</a>
<a href="mailto:[email protected]">Email us</a>
<a href="tel:+15551234567">Call us</a>| Value | Resolves as |
|---|---|
/learn/html/ | From the site root — survives moving the page |
../css/ | Relative to the current document |
https://… | Absolute, including host |
#id | Fragment: scrolls to that element |
⚠️
Link text must make sense on its own. "Click here" is opaque to screen reader users who navigate by listing links, and it hides the topic from search engines. Describe the destination instead.
Opening in a new tab (carefully)
target="_blank" opens a new tab. Always pair it with rel="noopener" in older code — modern browsers imply it, but the habit costs nothing and prevents the new page from getting a handle to yours via window.opener.
<a href="https://external.example" target="_blank" rel="noopener noreferrer">External article</a>Images
An image always needs src and alt. The alt text replaces the image when it cannot be displayed or perceived — describe its purpose, not its appearance.
<img src="/img/diagram.svg" alt="Request flowing from browser to server and back" width="800" height="450" loading="lazy">| Attribute | Why it matters |
|---|---|
alt | Accessibility and SEO; empty alt="" for purely decorative images |
width/height | Lets the browser reserve space, preventing layout shift (CLS) |
loading="lazy" | Defers off-screen images — very cheap win |
decoding="async" | Keeps decoding off the main thread |
💡
For responsive art direction and modern formats, reach for
<picture> with <source> — serve WebP/AVIF with a JPEG fallback.FAQ
Should I link with a trailing slash?
Be consistent and let your server redirect to one canonical form. Inconsistent internal linking splits signals between two URLs.
My image is blurry on retina screens — why?
Supply a source at least 2× the display size, or use
srcset so the browser picks per device pixel ratio.Related
Last refreshed 2026-09-17.