Links and images
href, src, alt, srcset — and the small details that decide whether your page reads on a phone or a screen reader.
Links and images are the two things that turn a page from a piece of text into a piece of the web. Every link points somewhere; every image carries content the prose cannot. Both elements have a small handful of attributes that look optional but are not — get them right and your page works on a phone, in a screen reader, and on a slow connection. Get them wrong and the page is technically rendered but practically broken for half your visitors.
Anchors and href
A link in HTML is an <a> element — short for anchor. The destination goes in the href attribute (short for hypertext reference). The visible label sits between the opening and closing tags.
<a href="/about">About this site</a>
The opening <a> plus the href plus the visible label plus the closing </a> is one link. Click the label and the browser navigates to the URL in href.
The label between the tags matters more than people think. Screen reader users often jump from link to link, hearing only the labels — "About this site... Pricing... Contact us". So a link labelled "click here" or "read more" is useless out of context. Put the destination in the label itself: "Read the privacy policy", not "For the privacy policy, click here".
Avoid wrapping non-descriptive text in <a>. "Click here" and "read more" are the most common offenders. Rewrite the sentence so the meaningful words become the link text.
Absolute, relative, fragment
The value of href can take three different shapes, and the difference matters. A href is the address of where the link goes, and there are three ways to spell an address.
An absolute URL is the full address of another site, including the protocol (https://) and the domain.
<a href="https://en.wikipedia.org/wiki/HTML">Read about HTML on Wikipedia</a>
Absolute URLs are how you point to anywhere outside your own site.
A relative URL is an address that fills in the missing parts from the current page. If you are on https://mysite.com/blog/, a link with href="post-1" will go to https://mysite.com/blog/post-1. A leading slash, like href="/about", anchors the link to the root of the site — /about always means https://mysite.com/about, regardless of which page you are on.
<a href="/about">About</a> <!-- always /about on this site --> <a href="post-1">Next post</a> <!-- relative to this page's folder --> <a href="../index.html">Back home</a> <!-- one folder up -->
Relative URLs make a site portable: you can move it from one domain to another without rewriting every link.
A fragment URL starts with # and points at an id inside the current page. Clicking it scrolls the page to that element instead of navigating away.
<a href="#contact">Jump to contact form</a> <!-- ...much later in the same page... --> <section id="contact"> <h2>Contact</h2> ... </section>
Fragments are how table-of-contents links work, how Wikipedia jumps you to a specific heading, and how the lessons in this course put a sticky outline in the sidebar.
You can also combine a path and a fragment. href="/docs/intro#setup" goes to the /docs/intro page and scrolls to the element with id="setup" once it loads.
https://shop.example.com/products/shoes. You write <a href="boots">Boots</a>. Where does the link go?Opening in a new tab
By default a link opens in the same tab — the current page disappears, replaced by the destination. To open the link in a new tab, set target="_blank".
<a href="https://example.com" target="_blank" rel="noopener noreferrer"> Visit example.com </a>
Two extras are worth understanding here. The rel attribute lists relationship hints about the linked page. With target="_blank" you should add rel="noopener noreferrer":
noopenerstops the new tab from being able to control the original tab through a browser quirk. Without it, a malicious destination could try to redirect your original page in the background.noreferrerstops the browser from telling the destination which page sent the visitor. This is mostly a privacy hint.
You will see modern browsers add noopener automatically for target="_blank" links, but writing it explicitly is the safe habit.
A short note on when to use new tabs: only when the visitor is leaving a multi-step flow they should not lose. For most links, leave them in the same tab — letting the user use the back button is usually a better experience than littering their tab bar.
Images and the alt attribute
An image is an <img> element. It is a void element (no closing tag, from lesson 3) and has two attributes you should never skip: src and alt.
<img src="cat.jpg" alt="A grey cat napping on a sofa." width="640" height="480">
The src attribute is the path to the image file. It follows the same absolute / relative / fragment rules as href.
The alt attribute is a text description of the image — what someone would say to describe it to a person who cannot see it. The browser shows the alt text if the image fails to load. Screen readers read it aloud. Search engines index it. It is often the most important attribute on the page, and the most often missing.
A few practical rules for alt text:
- Describe the meaning, not the pixels. Not "A 640 by 480 photograph", but "A grey cat napping on a sofa".
- If the image is purely decorative, set
alt=""(empty string). That tells screen readers to skip it instead of announcing the file name. - Do not start with "image of" or "picture of". Screen readers already announce that it is an image.
- Match the surrounding context. If the prose already describes the image, the alt text can be short or empty so the description is not read twice.
The width and height attributes are optional but recommended. They let the browser reserve space for the image before it has loaded, which stops the page from "jumping" as images pop into place. Set them to the image's natural pixel dimensions; CSS can still resize the displayed image.
Responsive images: srcset and sizes
A high-resolution photo is enormous. If you serve the same 4000-pixel-wide image to everyone, phones on slow networks will spend megabytes loading something they will only display at 400 pixels. The fix is to provide several versions of the image and let the browser pick the right one. Two attributes do this: srcset and sizes.
<img src="hero-800.jpg" srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w" sizes="(max-width: 600px) 100vw, 50vw" alt="Aerial view of a coastal town at sunset." width="800" height="600">
The srcset attribute is a comma-separated list of image versions, each followed by its actual width. So hero-400.jpg 400w means "the file hero-400.jpg is 400 pixels wide". The w is a literal letter that just stands for "width in pixels".
The sizes attribute tells the browser how wide the image will be displayed, depending on the screen. Reading the example: "if the screen is at most 600 pixels wide, the image will be displayed at 100% of the viewport width; otherwise, at 50% of the viewport width". The viewport is the visible area of the browser window — 100vw means "the full viewport width", 50vw means "half".
With both bits of information, the browser does the maths: "the screen is 1200px wide, so the image will be displayed at 600px, so I'll grab the 800w version (the next size up)". The src attribute is still there as a fallback for browsers that do not understand srcset — pick a sensible middle size for it.
This is the most attribute-heavy single element you will write in HTML, and it is worth the trouble. Without srcset, your hero photo on a phone is the same byte-for-byte size as on a desktop. With it, the phone gets a file a quarter the size and your visitor's data plan stays intact.
If you are not sure what to put in sizes, start with sizes="100vw". That tells the browser "this image fills the viewport". It will still pick a reasonable file from srcset, just with less precision than a tuned sizes would give.