The Two Elements That Made the Web
A link and an image are the whole reason the web is a web rather than a pile of documents. Both are one tag with one critical attribute — and both have a second attribute people skip that decides whether the page works at all.
Read first: Elements, Tags, and the Ones That Never Close
A link and an image are the whole reason the web is a web rather than a pile of documents. Both are one tag with one critical attribute — and both have a second attribute people skip that decides whether the page works at all.
An anchor is a tag around the thing you click
The element is <a>, for anchor. Whatever you wrap becomes clickable, and href says where it goes.
<a href="/about.html">About us</a><a href="https://example.com">Another site</a><a href="#contact">Jump to contact</a><a href="mailto:[email protected]">Email us</a><a href="tel:+441234567890">Call us</a><a href="cv.pdf" download>Download my CV</a> <a href="/gallery.html"><img src="thumb.jpg" alt="Gallery"></a>An anchor without an href is not a link. It renders as plain text, cannot be focused with the keyboard, and is not announced as a link. If you need something clickable that does not navigate, that is a <button>.
target="_blank" opens in a new tab. Add rel="noopener" with it — without that, the new page can get a reference back to yours and redirect it. Current browsers apply noopener by default, but writing it costs nothing and covers older ones.
Downloads rather than navigates. Give it a value to rename the file on the way down.
Jumps to the element with that id on this page. Never touches the network.
Describes the relationship. rel="noopener noreferrer" on external new-tab links; rel="nofollow" to tell search engines not to pass ranking.
Relative and absolute paths answer: from where?
This trips up everybody and it is worth ten minutes now rather than an hour later. A path is either relative to the current file, or absolute from the site root.
my-site/ index.html styles.css about/ index.html images/ logo.png<a href="../index.html">Home</a> up one level, then the file<a href="/index.html">Home</a> from the site root<a href="/">Home</a> the root's index.html<img src="../images/logo.png" alt=""> up one, into images<img src="/images/logo.png" alt=""> from the root — clearerIn the same folder as the current file.
Down into a subfolder of the current one.
Up one level, then across. Stack them: ../../file.html.
From the site ROOT, regardless of where this file lives. A leading slash always means root.
A different site entirely. Fully absolute.
Link text is read out of context
Screen readers can list every link on a page, as a menu, with no surrounding sentences. "Click here" nine times is a menu of nine identical entries.
Useless out of context
To read the report, click here.
More information here.
https://example.com/2026/report-final-v2.pdf
Read more
Says where it goes
Read the 2026 impact report.
See our volunteer guide.
Download the report (PDF, 2 MB)
Read more about our Python course
This is also better for everybody else. Sighted readers scan for links rather than reading every sentence, and a link that names its destination is faster for them too. Flagging the format and size of a download is ordinary courtesy.
img needs alt, and alt is not a caption
<img> is a void element with two required attributes: src, where the file is, and alt, what it shows.
<img src="/images/team.jpg" alt="Six students building a robot at a workbench"> <!-- Decorative only: an EMPTY alt, deliberately --><img src="/images/swirl.svg" alt=""> <!-- With a visible caption --><figure> <img src="/images/chart.png" alt="Enrolment tripled between 2024 and 2026"> <figcaption>Enrolment, 2024–2026. Source: our own records.</figcaption></figure>alt is what a screen reader announces, what shows if the image fails to load, and what a search engine indexes. It should say what the image communicates, not what it is.
alt="image" or alt="photo" or alt="team.jpg". Announces nothing and takes the reader's time to say so.
alt="Six students building a robot at a workbench". Describes what somebody would see.
alt="" — empty, and present. Tells assistive technology to skip it entirely. This is correct and deliberate.
No alt attribute at all is different from an empty one. Some screen readers fall back to reading the filename aloud, character by character.
width and height stop the page from jumping
Images load after the HTML. Without dimensions the browser does not know how much room to leave, so it lays out the page without them and then re-lays it out when each one arrives — which is the shifting text you have sworn at while trying to click something.
<img src="photo.jpg" alt="…" width="800" height="600">Those are the image's real pixel dimensions and they are not a display size. The browser uses the ratio to reserve the right shape, then your CSS scales it. Some older tutorials say to leave the dimensions off; that advice dates from before browsers used them this way, and it no longer applies.
img { max-width: 100%; /* never wider than its container */ height: auto; /* keep the proportions */}Without those two lines a 4,000-pixel photo blows out your layout on a phone and produces horizontal scrolling. Three more image rules matter:
JPEG for photographs, PNG for anything needing transparency, SVG for logos and icons (it is markup, so it scales infinitely), WebP for smaller files with wide support.
Resize before uploading. A 4 MB photo from a phone camera displayed at 600px wide is the commonest reason a page feels slow.
loading="lazy" on images below the fold defers them until the visitor scrolls near. One attribute, real gain. Do NOT put it on the first image — that one is needed immediately.
Key takeaways
- <a href="…"> wraps whatever should be clickable. No href means it is not a link and cannot be focused.
- target="_blank" needs rel="noopener", and takes the back button away — use it sparingly.
- A leading slash means the site root; ../ goes up one level; anything else is relative to the current file.
- Root-relative paths do not work over file://, which is why local pages break differently from published ones.
- Screen readers list links out of context, so "click here" is a menu of identical entries.
- alt says what the image communicates. Empty alt="" is correct for decoration; a missing alt is not the same thing.
- figcaption is for everyone, alt is for people who cannot see it. Do not duplicate one into the other.
- width and height on an img reserve the space and stop the page jumping as images arrive.
- img { max-width: 100%; height: auto; } belongs in every stylesheet you write.
- Resize images before uploading, and use loading="lazy" for anything below the fold.
Before you move on
Quick check
Answer these to unlock the next chapter: 3 of 4 to pass. You can retake it anytime.
Make a free account to read on
Every chapter is free — an account lets your course progress follow you from your laptop to your phone. No payment, no trial.