MP Web Studio
HTMLTraseu de bază
95 / 120

LECȚIA 95 DIN 120

Construiește: un card semantic de serviciu

Combină article, figure, titlu, descriere și link descriptiv.

Sursă oficialăWHATWG HTML — service card semanticsRevizuit: 2026-08-26
PASUL 1 · ÎNVAȚĂ

Cum funcționează

Combină article, figure, titlu, descriere și link descriptiv. Structura semantică trebuie să descrie sensul, nu aspectul vizual.

Exemplu corect
<article><figure><img src="audit-web.jpg" alt="Raport de audit afișat pe laptop"><figcaption>Analiză tehnică și UX</figcaption></figure><h2>Audit pentru site</h2><p>Identificăm problemele care blochează claritatea și conversia.</p><a href="/servicii/audit/">Vezi serviciul de audit</a></article>

article face cardul inteligibil și separat. figure grupează imaginea și legenda, alt descrie informația imaginii, h2 numește serviciul, paragraful îl explică, iar linkul spune clar ce se deschide.

Greșeală frecventă
<article><img src="service.svg"><h3>Audit</h3><p>Analiză.</p><a href="#">Click aici</a></article>

Imaginea nu este grupată în figure și nu are alt, titlul folosește alt nivel decât cel cerut, iar linkul generic nu descrie destinația.

PASUL 2 · APLICĂ

Exercițiul tău

Completează exemplul. Combină article, figure, titlu, descriere și link descriptiv.

PASUL 3 · CONSTRUIEȘTE

Scrie și vezi rezultatul

index.htmlHTML
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ

Ce trebuie să treacă

0%neverificat
  • Cardul are figure cu o imagine și sursă.
  • Imaginea are text alternativ nenul.
  • Cardul are un h2 vizibil.
  • Cardul are o descriere vizibilă.
  • Linkul cardului este descriptiv.
Explică-mi logica rezolvării

Învelește imaginea într-un figure, adaugă src și alt nenule, apoi scrie h2, p și un link href al cărui text numește serviciul.