MP Web Studio
HTMLTraseu de bază
101 / 120

LECȚIA 101 DIN 120

Construiește: controale interactive separate

Păstrează linkul și butonul ca acțiuni separate, fără cuibărire interactivă.

Sursă oficialăWHATWG HTML — interactive contentRevizuit: 2026-08-26
PASUL 1 · ÎNVAȚĂ

Cum funcționează

Păstrează linkul și butonul ca acțiuni separate, fără cuibărire interactivă. Structura semantică trebuie să descrie sensul, nu aspectul vizual.

Exemplu corect
<div class="actions"><a href="/servicii/audit/">Vezi detaliile auditului</a><button type="button">Salvează serviciul</button></div>

Linkul navighează spre o adresă, iar butonul declanșează o acțiune pe pagina curentă. Fiind elemente interactive distincte și frați în același container, fiecare păstrează o zonă de activare și un rol clar.

Greșeală frecventă
<a href="/detalii"><button type="button">Vezi detalii</button></a>

Butonul este cuibărit în link, deci două controale interactive concurează pentru aceeași zonă și aceeași activare.

PASUL 2 · APLICĂ

Exercițiul tău

Completează exemplul. Păstrează linkul și butonul ca acțiuni separate, fără cuibărire interactivă.

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
  • Linkul are o destinație nenulă.
  • Linkul are text vizibil.
  • Butonul are tip explicit și text vizibil.
  • Linkul și butonul nu sunt cuibărite unul în altul.
Explică-mi logica rezolvării

În interiorul aceluiași div adaugă mai întâi un link cu href și text, apoi un button type="button" cu propria etichetă. Închide linkul înainte de a începe butonul.