Links, images and media: Through Time

A link is an <a> element with an address in href. An image is an <img> with its meaning in alt. Video and audio use <video> and <audio>.

A link: an address and some words

The link is what turned a pile of documents into a web. It’s an <a> element (anchor) with an href attribute (hypertext reference). Two things matter about it: where it goes and what is written inside it.

Link text should make sense on its own. People who use a screen reader often ask it for a list of all the links on a page, and if that list says “click here” and “read more” twenty times over, it’s no use. Write “More about boundary surveys”, “Download prices (PDF, 120 KB)”, “Book a consultation”.

The address comes in several kinds. Try the diagram: change the page’s address and the href value, and see where the link goes.

Where a link goes

Address of this page:

The href value:

This link is relative: worked out from the address of the current page.
The browser will open: https://riverbend.example/contact.html

Which image the browser will pick

One image sits on the server in four sizes: 480, 800, 1200 and 2000 pixels wide. The srcset attribute lists them, and the browser picks the right one for your screen.

Window width: 390 px Screen density:

An image that fills the window must be at least 780 px wide (width × density). The browser will take the file 800 px. That way a phone doesn’t download pixels it can’t use, and a big screen doesn’t get a blurry picture.

The kinds in brief:

absolute is a full address with https://: it leads to one particular page wherever you start from. It suits other websites;
relative is contact.html or ../contact.html: it’s worked out from the address of the current page. It suits links inside your own site, because nothing breaks if you move to another domain;
from the site root is /contact.html: it’s worked out from the home page, not from the current page. It’s handy when pages sit in different folders;
an anchor is #contacts: a place on this same page;
special schemes: mailto:kate@riverbend.example opens an email, and tel:+10000000000 dials a number.

If a link must open in a new tab, you write target="_blank". Do that only when it’s really needed (to keep someone from losing a form they’re filling in, say), and warn people: an unexpected new window gets in the way of someone using a screen reader. It used to be usual to add rel="noopener" to such a link. Modern browsers do that themselves, but the habit does no harm.

Check yourself: why is a relative link better than an absolute one on your own site?

It isn’t tied to the site’s address, so nothing breaks if you move to another domain or another folder.

Anchors: a link to a place on the page

A link doesn’t have to lead to another page. It can lead to a spot on this one. Give the element you want to reach a unique id, and write the link with a hash sign: href="#contacts".

<a href="#contacts">Get in touch</a>
...
<aside id="contacts">...</aside>

The browser scrolls the page to the element with that id. The rules: an id is unique on the page, has no spaces, and is best written in Latin letters. If a link with a hash doesn’t work, the cause is almost always a typo: the id and the href don’t match.

Images

An image goes in with the single element <img>:

<img src="photo.jpg" width="160" height="160" alt="Kate measuring a plot boundary">

The right file format is half the job.

JPEG is for photographs: it compresses well but has no transparency;
PNG is for graphics and screenshots, and it has transparency;
SVG is for icons and diagrams: a vector image that stays sharp on any screen and weighs a few kilobytes;
WebP and AVIF are modern formats that compress better than JPEG at the same quality. All modern browsers support them;
GIF is outdated: for animation today you use video, which weighs about a tenth as much.

alt: words in place of the image

The alt attribute is the image put into words. A screen reader reads it, and the browser shows it if the image fails to load (you’ll see that in the practice, because the files don’t exist). The rules are simple:

if the image carries meaning, describe what is in it and why it’s there: “Kate measuring a plot boundary”, “Map of the route: 200 yards from the bus stop, then turn left”;
if it’s decorative (a flourish, a background), write an empty alt="". Don’t remove the attribute: without it a screen reader reads out the file name, something like “IMG_2043.jpg”;
if the image works as a link or a button, describe the action, not the picture: “Call”, not “telephone receiver”;
don’t begin with “image of” or “photo of”, because the screen reader already says it’s an image;
don’t stuff it with keywords. That hurts both people and search.

Check yourself: what do you write in the alt of a decorative image?

An empty value: the attribute is there, but has nothing in it. It has to be there, or the screen reader will read out the file name.

Sizes and lazy loading

Until an image has loaded, the browser doesn’t know how much room to leave for it. Remember the “jumping layout” from the last lesson of the internet part? You cure it by writing width and height in pixels yourself. From them the browser works out the proportions in advance and reserves the space. CSS can adjust the real size later.

Images far down the page can wait until the person scrolls near them: loading="lazy". An image on the first screen, by contrast, must never be lazy, or it would hold up the first paint.

srcset and picture: the right size for every screen

If you send a phone an image 2000 pixels wide, you waste its data. So you prepare one image in several sizes and list them in srcset:

<img src="photo-800.jpg"
     srcset="photo-480.jpg 480w, photo-800.jpg 800w, photo-1200.jpg 1200w"
     sizes="(min-width: 60rem) 40rem, 100vw"
     width="800" height="600" alt="…">

Here 480w is the file’s width in pixels, and sizes hints at how much room the image will take on the page. The browser knows the window’s width and the screen’s density, so it picks a file itself, as in the diagram above. When you need a different format, or a different crop for different screens, you wrap the image in <picture> with several <source> elements, and the fallback <img> stays inside.

A caption for an image is made with the pair <figure> and <figcaption>: the figure ties the image to its caption.

Video and audio

The <video> and <audio> elements are built into the browser:

<video controls width="640" poster="cover.jpg">
  <source src="clip.webm" type="video/webm">
  <source src="clip.mp4" type="video/mp4">
  <track kind="captions" src="clip.vtt" srclang="en" label="English">
  Your browser can’t play this video: <a href="clip.mp4">download it</a>.
</video>

What’s in there:

controls shows the play buttons;
poster is an image shown before the video starts;
several <source> elements give the browser a choice of format;
<track> holds captions. They’re needed by people who are deaf or hard of hearing, and by everyone who watches without sound (on a train, at work);
the text inside the element is seen by anyone whose browser can’t play video.

Don’t turn on autoplay with sound: it annoys people and gets in the way of anyone using a screen reader. A video that starts by itself must be silent, and must be possible to stop.

Often a video isn’t kept on your own site but embedded from a video host with an <iframe>. That’s convenient, but know the price: your page now talks to someone else’s server, which may collect data about your visitors. That is why the videos in this course open only after a click.

Practice

Back to your 2005 page. It came out well structured but connected to nothing. Connect it: the menu items should lead to their sections, the main action button to the contacts, and the footer should let people go back to the top and open the privacy notice. Then add a photo and the credentials from the brief.

There are no images in our preview, because it doesn’t go to the network. So in place of each image you’ll see its description, which is a good chance to check that it makes sense on its own. On a real site the files sit next to the page and load. In the project archive you can download, you’ll put your own photos next to it under the same names.

We ask you to connect “at least three” sections, but you can connect them all, which is better for your visitor.

What was wrong with 2005

Images with no alt and no sizes were normal. The page jumped while loading, and for blind users it turned into a string of file names. Links that said “here” and “more” were normal too. None of this was a technical limit. It was habit: when you take it that an image means only what the eye sees, you don’t think about anyone else. Today automated tools check for these habits.

Links, images and media