Liste

#Tipuri de liste

Există două tipuri de liste des folosite în HTML:

• Liste neordonate - utilizate pentru a grupa un set de elemente ce nu necesită o anumită ordine
• Liste ordonate - utilizate pentru a grupa un set de elemente ce au o ordine specifică

Fiecare tip de listă are un înțeles și un scop specific într-o pagină web. Să le luăm pe rând:

#Liste neordonate

Sunt utilizate când un set de elemente pot fi folosite în orice ordine, ca în lista de cumpărături de mai jos:

<ul>
  <li> pâine </li>
  <li> cafea </li>
  <li> lapte </li>
  <li> unt </li>
</ul>

Observă cum ne folosim de 2 tipuri de elemente pentru a defini o listă: în exterior avem <ul> (unordered list) pentru a defini lista, iar apoi fiecare element în propriul tag <li> (list item).

Cu o stilizare potrivită, listele neordonate sunt folosite la realizarea meniurilor paginilor web. GitHub e un exemplu bun, ei folosind liste neordonate pentru meniul de navigare:

Deși nu am ajuns încă la partea de CSS, e bine să știm că listele neordonate au ca și stil implicit niște buline. Putem să le personalizăm folosind propria noastră imagine sau putem renunța la ele cu totul. Vom discuta mai multe în cadrul capitolului de stilizare.

#Liste ordonate

Listele ordonate afișează elementele enumerate într-o ordine specifică, fie că este vorba de enumerări cu cifre arabe, cifre romane sau litere. Un exemplu potrivit ar fi instrucțiunile pentru a găti o prăjitură:

<ol>
  <li> Cumpără ingredientele necesare </li>
  <li> Amestecă ingredientele </li>
  <li> Pune amestecul într-un vas de gătit </li>
  <li> Coace în cuptor prăjitura timp de o oră </li>
  <li> Scoate prăjitura din cuptor </li>
</ol>     

Acestea au o structura similară cu cele neordonate, singura diferență fiind tag-ul: <ol> (ordered list). E evident că dacă vom schimba ordinea elementelor din cadrul listei, aceasta nu va mai avea nici un sens.

#Atributele acceptate de listele ordonate

Dacă vrem ca enumerarea elementelor din listă să se facă cu un anumit tip de cifră sau cu litere, ne putem folosi de atributul type. Acesta acceptă ca valori:

• 1 – pentru enumerare cu cifre arabe;
• i sau I – pentru enumerare cu cifre romane mici, respectiv mari;
• a sau A – pentru enumerare cu litere mici, respectiv mari.

<ol type="I">
  <li> Pornește laptopul </li>
  <li> Deschide Visual Studio Code </li>
  <li> Începe să codezi </li>
</ol>

Dacă vrem ca lista să înceapă enumerarea de la cifra/litera cea mai avansată și să se termine cu prima, vom folosi atributul reversed.

Putem opta chiar să enumerăm elementele unei liste ordonate începând de la un anumit număr/literă. Pentru asta ne vom folosi de atributul start dând ca valoare numărul sau litera de la care vrem sa începem numărătoarea:

#Sub-liste

O listă poate conține o altă listă. Acest lucru este foarte util dacă vrem să reprezentăm un meniu de navigare pe mai multe nivele:

<ol>
  <li> 
    FrontEnd
    <ol>
      <li> HTML </li>
      <li> CSS </li>
      <li> JavaScript </li>
    </ol>
  </li>
  <li> Back-end </li>
  <li> Mobile development </li>
</ol>

În exemplul de mai sus am inclus o listă ordonată în cadrul unei liste neordonate, dar putem foarte bine să includem orice tip de listă în oricare altul. Ce e important să reținem este că nivelul de nesting să nu fie mai mare de 3 căci lucrurile pot deveni confuze.

#Bonus tips și concluzii

Există și un al treilea tip de listă pe care-l vei întâlni mai rar dar e totuși bine să-l știi: <dl> (description list). Îl vom folosi când definim termeni sau asociem perechi de valori, ca în exemplul de mai jos:

<dl>
  <dt> HTML </dt>
  <dd> Hyper Text Markup Language </dd>

  <dt> CSS </dt>
  <dd> Cascading Style Sheets </dd>
</dl>

Pentru a alege ce tip de listă să folosim ne putem adresa două întrebări:

Definesc termeni sau asociez alte perechi nume/valoare?

Dacă da, vom folosi o listă de descrieri.

Este importantă ordinea elementelor din listă?

Dacă da, folosim o listă ordonată, altfel vom folosi o listă neordonată.

Iar pe final, nu uita că elementele <ul>, <ol> și <dl> ajută atât în cazul screen-readere-lor cât și pe ceilalți developeri care vor înțelege mai ușor codul tău. Hai să le folosim când e vorba de liste.