Repair: a semantic service card

Combine article, figure, heading, description and a descriptive link.

Official sourceWHATWG HTML — service card semanticsReviewed: 2026-08-26

STEP 1 · LEARN

How it works

Combine article, figure, heading, description and a descriptive link. Semantic structure should describe meaning, not visual appearance.

Correct example

<article><figure><img src="web-audit.jpg" alt="Audit report displayed on a laptop"><figcaption>Technical and UX analysis</figcaption></figure><h2>Website audit</h2><p>Find the problems that block clarity and conversion.</p><a href="/services/audit/">Explore the website audit service</a></article>

The article makes the card understandable on its own. The figure groups image and caption, alt conveys the image information, h2 names the service, the paragraph explains it and the link clearly states its destination.

Common mistake

<article><img src="service.svg"><h3>Audit</h3><p>Analysis.</p><a href="#">Click here</a></article>

The image is not grouped in a figure and has no alt, the heading uses a different level and the generic link text does not describe its destination.

STEP 2 · APPLY

Your exercise

Repair the example without changing its purpose. Combine article, figure, heading, description and a descriptive link.

index.htmlHTML

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The card has a figure containing an image with a source.
The image has non-empty alternative text.
The card has a visible h2.
The card has a visible description.
The card link is descriptive.

Explain the solution logic

Wrap the image in a figure, add non-empty src and alt values, then write an h2, paragraph and href link whose text names the service.

How it works

Your exercise

Write and see the result

What needs to pass