HTML/Nimekirjad ja loendid

HTML võimaldab teha järjestamata ja järjestatud loendeid.

Järjestamata loendid

Järjestamata loend luuakse ul-elemendiga (unordered list), loendi iga element tähistatakse li-ga (list item). Näiteks nii:

<ul>
  <li>Kapsad</li>
  <li>Kaalikad</li>
  <li>Porgandid</li>
</ul> 

Eriti suuremate veebilehtede koostamisel on mõistlik kasutada programmeerimisest laenatud võtet - treppimist (vt. eelmine näide) ehk tühikute kasutamist erinevate struktuuride paremaks esiletoomiseks . Ehkki HTML ei arvesta tühikuid rea ees ja lehe väljund li ette löödud tühikutest ei muutu, on sellist HTML-koodi palju kergem lugeda (seda eriti pikkade lehtede puhul) ja ka hallata.

Järjestatud loendid

Järjestatud loendi (ol - ordered list) tegemine on igati samalaadne:

<ol>
  <li>Esimene</li>
  <li>Teine</li>
  <li>Kolmas</li>
</ol> 

Erinevuseks järjestamata loendist on see, et loendi kuvamisel paigutatakse loendi elementide ette kasvavas järjekorras numbrid.

Millal kasutada loendeid?

Loendite kasutamine näib lihtne, lausa elementaarne. Ometigi kasutatakse veebis loendeid märksa vähem kui ehk võiks. Küsimus on selles, et alati ei osata loendit ära tunda. Vaatleme mõningaid näiteid.

Tekstisisestest loenditest vabanemine

<p>Meie veebilehelt võite leida pilte minu kassist,
õpetusi kasside pildistamiseks ja nimekirja minu
lemmik-kassitõegudest.</p>

Paljudel veebilehtedel leidub sedasorti tekstisiseseid loendeid. Põhimõtteliselt pole nendel midagi häda, aga kui soovime oma teksti muuta võimalikult loetavaks ja ligitõmbavaks, siis ei tasu peljata selliste nimekirjade eraldi loenditena üles märkimist. Pealegi ei maksa veebilehel "paber" mitte sentigi, mistõttu pole tugevat põhjust, miks me ei võiks kirjutada eelneva hoopis nii:

<p>Meie veebilehelt võite leida:</p>

<ul>
  <li>pilte minu kassist,</li>
  <li>õpetusi kasside pildistamiseks ja</li>
  <li>nimekirja minu lemmik-kassitõegudest.</li>
</ul>

Menüüsüsteemid

Järgnevalt kujutagem endale ette üht vertikaalset navigatsiooni (või menüü) riba. Paljud autorid märgivad oma menüü üles nõnda:

<a href="index.html">Avaleht</a><br />
<a href="img.html">Minu pildid</a><br />
<a href="bio.html">Minu elulugu</a><br />
<a href="cnt.html">Kontaktandmed</a>

Oma olemuselt on ju tegu ikkagi ühe järjestamata loendiga. Seega loogilisem HTML oleks järgnev:

<ul>
  <li><a href="index.html">Avaleht</a></li>
  <li><a href="img.html">Minu pildid</a></li>
  <li><a href="bio.html">Minu elulugu</a></li>
  <li><a href="cnt.html">Kontaktandmed</a></li>
</ul>

Võibolla ei meeldi autorile, et brauser kuvab vaikimisi iga li ette mummukese? Kuid mitte miski ei keela ju kirjutada sobilikku stiililehte, mis ebameeldivad mummud kõrvaldab:

ul li { list-style-type:none; }

Lisaks sellele, et sellist menüüd on väga lihtne CSS-i abil muuta, on loendina üles märkimisel veel ka see eelis, et näiteks ekraanilugemistarkvara kasutavad isikud kuulevad alustuseks "neljast elemendist koosnev järjestamata loend" ja võivad seejärel otsustada kogu selle menüü vahele jätta - menüülinkide reavahetustega eemaldamisel sellist võimalust aga pole.

Kommentaarid veebilehel

Järgnevalt kujutame endale ette ühte tüüpilist blogi, kus sissekande lõpus on rida kommentaare. Ka nende kommentaaride puhul on tegemist loendiga - konkreetselt järjestatud loendiga, sest üks kommentaar järgneb teisele ning see järjekord on oluline. Seega loend... aga mis siis, kui kommentaare on vaid üksainus? Kas me sellisel juhul enam tohime loendit kasutada? Sellest pole aga probleemi - loendis võib olla kasvõi üksainus element - loend on ta ikkagi, lihtsalt loendamine lõpeb arvu 1 juures:

<h2>Kommentaarid</h2>

<ol>
  <li>
    <p><strong>Mari</strong> lausus:</p>
    <p>Olen 100% nõus!</p>
  </li>
</ol>

Veel loendeid

Lisaks järjestatud ja järjestamata loenditele on HTML-is veel ka definitsioonide loendid, millest räägib eraldi peatükk.