Links & images
Connect pages and describe visual content.
Make the destination clear
An anchor uses href to set its destination. Link text should explain where the link goes. A relative URL such as /about points to a path on the same site; an absolute URL includes an origin such as https://example.com.
Images need context
An img uses src for the image URL and alt for a text alternative. Describe the information the image contributes. For a purely decorative image, use an empty alt attribute.
Reserve the space
Width and height attributes give the browser an aspect ratio before an image loads. With CSS, max-width: 100% lets the image shrink to fit its container.
Try the example
<h1>A field notebook</h1>
<p>Learning to notice the small things.</p>
<img src="/leaf.svg" alt="Illustration of a lime green leaf" width="320" height="200">
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank" rel="noopener noreferrer">Explore the HTML reference</a></p>Enable JavaScript to edit and run the example in the playground.
Your turn
Change the link text to HTML documentation. Think about what the image alt text tells a reader.
Check your understanding
Which attribute gives an image a text alternative?
- href
- title
- alt
Show answer and explanation
alt. alt supplies replacement text for an image. A title attribute does not replace it.