Lesson · HTML & CSS Basics
Links, images, and useful alternatives
Links connect pages and images add information; both need context that people can understand.
What you will learn
- Write descriptive link text
- Use relative and absolute URLs appropriately
- Choose useful alt text
Links describe a destination
The anchor element uses href for its destination. A relative URL points from the current site or document location; an absolute URL includes the scheme and host. Write link text that says where the link goes or what it does. Phrases such as 'click here' lose meaning when a screen reader lists links alone.
Images need an appropriate alternative
The alt attribute provides a text alternative when an image cannot be seen or loaded. For an informative image, describe the information it contributes in the page's context. A decorative image that adds no information should generally have empty alt text so assistive technology can skip it.
Do not repeat the whole page
Alternative text should be concise and should not begin with 'image of' unless that distinction matters. If a nearby caption already communicates the same information, avoid making the page repetitive. When an image is the only content inside a link, its alternative should explain the link's destination or action.
Use real destinations
A link with a placeholder such as # or an empty destination can mislead users and automated link checks. During drafting, link to an existing section or page and verify the destination. If a destination is not ready, do not present it as a working navigation control.
<p>Review the <a href="/programming-languages/python-for-beginners/">Python course outline</a>.</p>
<figure>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 48'%3E%3Crect width='120' height='48' fill='%23eaf3fb'/%3E%3Cpath d='M12 34h96M12 24h70M12 14h88' stroke='%2317324d' stroke-width='4'/%3E%3C/svg%3E" alt="A weekly plan with three short practice sessions">
<figcaption>Small sessions can fit around classes.</figcaption>
</figure>Practice exercise
Add a link with descriptive text and an image with alt text that explains the image's role.
Show a hint
Write the link so its meaning remains clear out of context.
Show one possible solution
Use an anchor such as <a href='/notes/'>Read the revision notes</a> and supply concise, contextual text in the image's alt attribute.
Quick check
A filename rarely explains what the image contributes to the page.