Links and Images
The bakery's homepage needs a link to the menu, a link to a map, and a photo of the morning's loaves. Links are what make the web a web, and images are often most of what a page downloads. Each comes with one attribute you must never forget.
The rule
Every link needs a destination; every image needs a text alternative.
Links use the <a> (anchor) element. Its href attribute is the destination:
<a href="https://maps.example.com/crumb">Find us on the map</a>
<a href="/menu">See the menu</a>
<a href="menu.html">See the menu</a>
<a href="#opening-hours">Opening hours</a>
<a href="mailto:hello@crumbbakery.com">Email us</a>- An absolute URL includes the scheme and domain:
https://maps.example.com/crumb. Use it for other sites. - A root-relative path starts with
/:/menumeans "the menu page on this same site", wherever you are on the site. - A relative path has no leading slash:
menu.htmlis looked up next to the current page. - A fragment starting with
#jumps to the element with thatidon the page. mailto:andtel:open email or the phone dialler.
The link text itself matters. "See the menu" tells everyone where it goes. "Click here" says nothing, which is a problem for screen-reader users who often browse a list of links on their own.
Images use the void element <img>:
<img src="images/sourdough.jpg"
alt="A round sourdough loaf with a deep golden crust"
width="800" height="600">srcis where the file lives, using the same path rules as links.altis the text alternative: shown if the image fails, read aloud by screen readers, and used by search engines. Describe what the image shows that matters to the page.widthandheightlet the browser reserve space before the file arrives, so the text below does not jump when it loads.
If an image is pure decoration (a swirl between sections, say), write alt="". The empty value tells screen readers to skip it. Leaving alt out entirely is different and worse: some screen readers then read out the file name.
The shortcut
For every image, imagine reading the page aloud over the phone. What would you say at the spot where the image sits? That sentence is the alt. If you would say nothing, it is decorative: alt="".
The loaf photo
Over the phone you would say "a round sourdough loaf with a golden crust". That becomes the
alt.
A classic mistake is writing href="www.example.com" without https://. The browser treats that as a relative path on your own site and looks for a file called www.example.com.
Drills
Answer fast — trust the rule.
Which href jumps to <section id="opening-hours"> on the same page?
What is the best alt for a photo of the bakery's cinnamon buns on the menu page?
A link is written <a href="www.bakerynews.com">. What happens when it is clicked?
Why give an <img> its width and height?
Remember
- Every link needs a destination; every image needs a text alternative.
- Read it aloud over the phone: that sentence is the
alt; nothing to say meansalt="". - Trap: a link without
https://is treated as a path on your own site.