The href attribute points to a link destination. An image uses a different path attribute, src, to locate its image file. img is a void element with no closing tag:
<img src="images/leaf.svg" alt="A green leaf" width="240" height="160">This relative path points to leaf.svg in an images folder beside the HTML file. SVG, PNG and JPEG are image formats; you do not need to write SVG to use an existing file. Missing files or mismatched path capitalization can prevent loading.
Give the image a useful alternative
alt provides replacement text for people who cannot see the image. Browsers may also display it when loading fails. Describe the information relevant to the page, not merely “image”. If the picture contains an event schedule, communicate its key information, preferably in visible text too.
For a purely decorative image, alt="" usually lets assistive technology skip it. An empty alt is different from an omitted alt. alt is not a hover tooltip and should not be confused with title.
Dimensions and captions
width and height take integer dimensions without units and help reserve space before loading. Preserve the original aspect ratio to avoid distortion. The Lab image is 240 by 160; its preview also limits images to the available width. CSS will later provide more flexible sizing.
Use figure to group an image with a visible figcaption:
<figure>
<img src="images/leaf.svg" alt="A green leaf on a pale background" width="240" height="160">
<figcaption>Our nature-themed bookmark.</figcaption>
</figure>figure may have default margins. figcaption is visible text; alt replaces the image's information. They can complement each other.
The Lab supplies a local image. Compare its working and missing-image examples. When copying a document to your computer, also save the image in the matching location or change src to your own file. Copying HTML alone does not copy its image assets.
You can download the sample image for local practice.
Page experiment: Images
Compare the examples, then change one part of the HTML using the observation prompt. Compare the source with the real rendered page.
The visible caption comes from figcaption. Compare it with replacement text in the missing-image example.
The preview uses native browser headings, paragraphs and form controls. Switching examples replaces your edits; Reset lab restores the initial state. Follow in-page links, type and select options. This practice preview does not send form data or run scripts. To try locally, save the complete code as index.html and open it in a browser.
KNOWLEDGE QUIZ
Build it yourself: Images
Create index.html, write a complete page using the requirements below, then save and open it in a browser. Interact with the page to check it. The reference is one possible implementation; wording may differ.
- Use your own image with a correct src, meaningful alt and width/height matching its aspect ratio.
- Add a visible caption using figure and figcaption; break the path temporarily, inspect the alternative, then restore it.