Links, images and media
Every kind of link, how to describe a picture, how to stop photos slowing your page down, and how to add video and audio.
By the end you can
- Link to other sites, to your own pages, to a section, to email and to a phone
- Describe a picture so everyone knows what is in it
- Stop pictures from making the page jump about
- Add video and sound without wasting people's data
Easier if you did first
step 1 of 3
The four kinds of link
A link is an <a> tag. The href attribute holds the destination. What you put in href decides what kind of link it is.
Think of giving someone directions. Sometimes you give the full address of a place in another town. Sometimes you say 'two doors down from here'. Sometimes you say 'look at the bottom of this page'. Links work the same way.
A full address goes to another website: https://wikipedia.org. You need the whole thing, starting with https://
A short address goes to a page on your own site: /about. It starts with a slash. The good part is that it keeps working if you move your site to a new domain name.
A hash address jumps to a part of the same page: #prices. It finds the element that has id="prices" on it and scrolls there.
Two special ones matter on phones. mailto: opens the email app. tel: starts a phone call. One tap instead of copying a number.
The page on the right has four links with empty destinations. Fill each one in.
<a href="https://wikipedia.org">another website</a>
<a href="/about">a page on this site</a>
<a href="#prices">a section of this page</a>
<a href="mailto:hello@example.com">send an email</a>
<a href="tel:+233200000000">call us</a>What these words mean
- full address
- The whole web address, starting with https://. Used for other websites.
- short address
- A path inside your own site, starting with a slash.
- hash link
- A link starting with #. It jumps to the part of the page with that id.
- id
- A name you give one element, so links and code can find it. No two can share a name.
- mailto: and tel:
- Open the email app, or start a phone call.
- target="_blank"
- Opens the link in a new tab. Always add rel="noopener" with it.
Easy to get wrong
<a href="click here">
<a href="/pricing">See our prices</a>
The href is where the link goes, not what it says. And 'click here' is useless to a blind visitor: screen readers can list every link on a page, and ten links all saying 'click here' tell them nothing.
target="_blank" with nothing else
target="_blank" rel="noopener noreferrer"
Without noopener, the new page can reach back and change the page it came from. That is a real way sites get attacked, and it takes one word to prevent.
What we check
- One link jumps to a section with #
- One link opens an email with mailto:
- One link starts a call with tel:
- One link points at another website
- The prices section has id="prices" to jump to