Skip to content
Lucia LADDERHTML Fundamentals Chapter 04Loading learning progress…
HTML-04-03 · LESSON 3 / 4 · ± 10 MINUTES
Images & Alternative Text
After this lesson, you can add images with a source, dimensions, and alternative text suited to their context.
BEGIN WITH A QUESTION
Understanding begins with a question.
An image fails to load. Can readers still understand the information it carried? This is where alt helps.
Add images with a source, dimensions, and alternative text suited to their context.
UNDERSTAND THE CONCEPT
Image sources and space
Img is a void element. Src points to the image file. Width and height give intrinsic dimensions in pixels without px, helping the browser reserve space before the image loads. For this local example, use assets/observatory.svg at 640 × 360.
Alt depends on the image’s purpose
An informative image needs alternative text that conveys its important information in context. For the observatory diagram, ‘A telescope points toward the Moon above the observatory’ is more useful than ‘nice image’ or a file name. Alt does not need to begin with ‘image’.
Decorative is different from missing
If an image only decorates and the surrounding text already contains its information, alt="" deliberately leaves the alternative empty. Omitting alt is different: assistive tools may read the file name. Do not use empty alt for an image carrying essential information.
EXAMPLE / CONTEXT
Examples clarify concepts.
HTML EXAMPLE
<h1>Observing the Sky</h1>
<img src="assets/observatory.svg"
alt="A telescope points toward the Moon above the observatory"
width="640" height="360">
<p>Observation begins by choosing an object in the sky.</p>BROWSER RESULT
The exercise includes a sample diagram. Alternative text conveys its content; width and height specify its size.
TRY TOGETHER
Practice clarifies understanding.
Try as often as you need. The independent task that follows records lesson completion.
WRITE · OBSERVE · UNDERSTAND
An image that remains understandable
Add an img from assets/observatory.svg with width 640 and height 360. Write alt describing the telescope and Moon in the illustration, rather than its file name. Observe the preview and refine your wording.
Editor shortcuts & help
- Ctrl + Space
- Show suggestions · ↑ ↓ select · Enter accept · Esc close
- Shift + Alt + F
- Format code
- Ctrl/⌘ + F
- Find and replace text
- Ctrl/⌘ + [ / ]
- Decrease / increase indentation
- Tab
- Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
- Ctrl/⌘ + Z
- Undo changes, including formatting
Suggestions use the language, snippets, and local code context. Formatting runs in your browser.
Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.
STEP-BY-STEP HINTS
- Img does not need </img>.
- Describe the important information in one short sentence. Automated grading only checks that alt exists; review the relevance of your wording yourself.
TAKE THIS UNDERSTANDING WITH YOU
Practice gives a foundation.
- Src points to the image source; width and height specify its dimensions.
- Alt explains an image’s function or information in context.
- Use empty alt for decoration; missing alt means something different.
A lesson is complete when the independent task meets its goals. Return to the reading at any time.