: Elementul Descriere lista – HTML: Limbaj de marcare HyperText | MDN

Elementul HTML <dl> reprezinta o lista de descrieri. Elementul cuprinde o lista de grupuri de termeni (specificati utilizand elementul <dt>) si descrieri (furnizate de elementele <dd>). Utilizarile comune pentru acest element sunt implementarea unui glosar sau afisarea metadatelor (o lista de perechi cheie-valoare).

<dl> <dt> Firefox </dt> <dd> Un browser web gratuit, open source, cross-platform, grafic, dezvoltat de Mozilla Corporation si de sute de voluntari. </dd> </dl>

<dl> <dt> Firefox </dt> <dt> Mozilla Firefox </dt> <dt> Fx </dt> <dd> Un browser web gratuit, open source, multi-platforma, grafic, dezvoltat de Mozilla Corporation si sute de voluntari. </dd> </dl>

<dl> <dt> Firefox </dt> <dd> Un browser web gratuit, open source, cross-platform, grafic, dezvoltat de Mozilla Corporation si de sute de voluntari. </dd> <dd> Panda Rosu, cunoscut si sub numele de Panda Mic, Wah, Bear Cat sau Firefox, este un mamifer in majoritate erbivor, putin mai mare decat o pisica domestica (60 cm lungime). </dd> </dl>

Listele de descriere sunt utile pentru afisarea metadatelor ca o lista de perechi cheie-valoare.

<dl> <dt> Nume </dt> <dd> Godzilla </dd> <dt> Nascut </dt> <dd> 1952 </dd> <dt> Locul nasterii </dt> <dd> Japonia </ dd > <dt> Culoare </dt> <dd> Verde </dd> </dl>

Sfat: poate fi la indemana sa definiti un separator cheie-valoare in CSS, cum ar fi:

dt :: dupa {content: “:”; }

WHATWG HTML permite impachetarea fiecarui grup nume-valoare intr-un element <dl> intr-un element <div>. Acest lucru poate fi util atunci cand utilizati microdate sau cand atributele globale se aplica unui intreg grup sau in scopuri de stil.

<dl> <div> <dt> Nume </dt> <dd> Godzilla </dd> </div> <div> <dt> Nascut </dt> <dd> 1952 </dd> </div> < div> <dt> Locul nasterii </dt> <dd> Japonia </dd> </div> <div> <dt> Culoare </dt> <dd> Verde </dd> </div> </dl>

Nu utilizati acest element (nici <ul> elemente) pentru a crea doar indentare pe o pagina. Desi functioneaza, aceasta este o practica proasta si ascunde sensul listelor de descrieri.

Pentru a schimba indentarea unui termen de descriere, utilizati proprietatea de marja CSS.

Fiecare cititor de ecran anunta continutul <dl> diferit. Incepand cu iOS 14, VoiceOver va anunta ca <dl> continutul este o lista atunci cand navigati cu cursorul virtual (nu prin comanda read-all). Din aceasta cauza, asigurati-va ca continutul fiecarui element de lista este scris in asa fel incat sa comunice relatia sa cu celelalte elemente de lista din gruparea listei.

• CodePen – HTML Buddies: dt & dd
• VoiceOver pe iOS 14 accepta liste de descrieri