Essential storage keeps sign-in and learning features working. Google Analytics measures visits; Microsoft Clarity records interactions to help us improve usability. Both are optional and stay off until you choose. Read our privacy policy.
Study the question, then follow the complete answer and its reasoning.
Turn an image and its supporting text into a meaningful figure. Preserve intrinsic dimensions and write alternative text that communicates the image's purpose.
figure groups self-contained media with its caption. The img still needs alt because the caption and alternative text serve different contexts.
<main>
<h1>Workshop recap</h1>
<figure>
<img
src="/images/html/document-outline.svg"
alt="Diagram connecting a page header, navigation, main article sections, and footer"
width="800"
height="450"
>
<figcaption>A clear outline connects page landmarks and headings.</figcaption>
</figure>
</main>figure creates one self-contained unit from the image and caption. The alt value replaces the image when it cannot be perceived, while figcaption remains visible context for everyone. Width and height give the browser the image's aspect ratio before it loads.
Images can carry information that is unavailable when they fail to load or cannot be seen. Alternative text preserves the image's purpose, a visible caption adds shared context, and intrinsic dimensions allow the browser to reserve space before the file arrives, reducing disruptive layout movement.
This beginner HTML exercise focuses on Write purpose-based alternative text, Associate media with a caption, Reduce layout shift with image dimensions. Its requirements define the exact behavior to implement before you write code.
Start with the displayed example input and expected output, then test a boundary case suggested by the requirements. Edit the HTML, inspect the live preview, then run the checks before comparing your structure with the complete answer.
Attempt Describe an informative image first. Then open the read-only solution file to compare the contract, edge-case handling, and implementation choices—not simply to copy the final code.