Elementul <dl> uitat: de ce merită atenția ta

Recunoaște: când ai folosit ultima dată <dl> într-un proiect real? Dacă răspunsul e „niciodată” – nu ești singur. Acest tag pentru liste de definiții trăiește în umbra lui <ul> și <ol>, ca acel coleg care tace la toate ședințele, dar apoi vine cu o soluție genială. Și e păcat, pentru că <dl> se potrivește perfect nu doar pentru glosare, ci și pentru metadate, perechi „cheie-valoare” și chiar microdate.

Ce pot face <dl> și copiii săi <dt> și <dd>?

Conform standardului, <dl> grupează un termen (<dt>) și descrierea lui (<dd>). Poți avea un termen cu mai multe descrieri sau invers. Da, funcționează și înnestarea. Sună plictisitor? Acum imaginează-ți: faci o carte de produs – caracteristicile vin în perechi „Nume: Valoare”. <dl> face față fără div-uri suplimentare și clase personalizate. Semantică, accesibilitate și cod curat – asta primești.

De ce am uitat de <dl>?

De vină e, ca de obicei, hype-ul din jurul flexbox și grid. Când ai un ciocan (CSS grid-uri), totul pare un cui. Dar să fim sinceri: de câte ori ai scris <div class="item"><span class="label">...</span><span class="value">...</span></div> doar pentru că <dl> părea „incomod”? De fapt, <dl> e ca o bicicletă veche și bună: nu e la modă, dar e fiabilă și fără piese inutile.

Cum să folosești <dl> în 2024?

Browser-ele îl suportă excelent, iar screen reader-ele îl adoră. Pentru SEO e un plus: motoarele de căutare înțeleg mai bine datele structurate. Iată un exemplu simplu:

<dl>
  <dt>Nume</dt>
  <dd>Super-framework</dd>
  <dt>Versiune</dt>
  <dd>42.0.1</dd>
  <dt>Licență</dt>
  <dd>MIT</dd>
</dl>

Frumos, nu? Iar dacă trebuie stilizat – câteva linii de CSS și gata. Fără span sau div în plus.

Comentariul echipei METABYTE: Și noi păcătuim cu dragoste pentru „supa de div”-uri, dar <dl> e un candidat excelent pentru refactorizare. Mai ales când clientul cere „fă frumos și semantic”. Încearcă – și poate următorul tău proiect îți va mulțumi.