In HTML avem un element special ce ne ajuta sa cream o lista de lucruri pe care vrem sa le definim sau pentru care vrem sa scriem o scurta descriere. De exemplu daca am avea o lista de evenimente pentru care vrem sa scriem detalii despre locul si data lor.
Elementul <dl></dl> (nume ce vine de la description list) se foloseste doar impreuna cu unul sau mai multe elemente de tipul <dt></dt> (de la definition term) fiecare fiind urmat de unul sau mai multe elemente de tipul <dd></dd> (de la description element).
De exemplu daca am vrea sa construim o lista de definitii pentru cateva animale domestice:
<dl>
<dt>Pisica</dt>
<dd>Animal de casa recunoscut pentru atitudinea sa de membru al unei familii regale.</dd>
<dt>Cainele</dt>
<dd>Unul dintre cele mai loiale animale domestice.</dd>
</dl>
Asadar <dl></dl> defineste inceputul si sfarsitul listei. Fiecare termen ce vrem sa il definim este scris in interiorul <dt></dt>, iar fiecare definitie pentru acest termen este scrisa folosind elementul <dd></dd>.
Bineinteles ca putem avea mai multe definitii pentru acelasi termen (in acest caz un animal) de aceea un element <dt></dt> poate fi urmat de mai multe elemente <dd></dd>.
De exemplu:
<dl>
<dt>Pisica</dt>
<dd>Animal de casa recunoscut pentru atitudinea de membru al unei familii regale.</dd>
<dd>Personalitate independenta ce nu accepta nu ca raspuns.</dd>
<dd>Animal tratat ca un zeu in Egiptul Antic, lucru pe care nu l-a uitat.</dd>
</dl>Atribute
Ca si atribute cele mai folosite cu aceste elemente sunt:
-
id: folosit de CSS sau JS pentru a apela elementul direct -
class: folosit de CSS sau JS pentru a-l include intr-o categorie de elemente
Echivalentul unei liste <dl>
Putem construi echivalentul aceastei liste folosind elemente pe care le-am mai intalnit pana acum, precum <ul>, <h2> si <p>.
<ul>
<li>
<h2>Pisica</h2>
<p>Animal de casa recunoscut pentru atitudinea de membru al unei familii regale.</p>
<p>Personalitate independenta ce nu accepta nu ca raspuns.</p>
<p>Animal tratat ca un zeu in Egiptul Antic, lucru pe care nu l-au uitat.</p>
</li>
</ul>
Vedem ca pastram aceeasi structura si folosim <li> pentru a separa mai usor elementele care vor fi definite, dar continutul acestei liste nu va avea acelasi sens pentru browser sau pentru cine citeste codul acestei pagini.
Desi putem spune ca noi ca vizitator vom vedea acelasi lucru indiferent daca vom folosi <dl> sau <ul> scopul continutului este dat de elementul care il cuprinde.
In acest caz nu suntem obligati sa folosim un element anume, dar pentru a creea o pagina structurata si usor de citit atat pentru oameni cat si pentru pentru calculatoare este indicat sa folosim tag-ul <dl>.