Saraksti sākumā var šķist nenozīmīga HTML daļa, taču mainot to izskatu ar CSS, tie iegūst daudz plašāku pielietojumu — sarakstus var izmantot ne tikai kā vienkāršu lietu uzskaitījumu tekstā, bet arī daudzlīmeņu izvēlnēs, komentāru attēlošanā, saišu blokos, attēlu galerijās u.c. Praksē tie tiek izmantoti gandrīz jebkurā mājas lapā.

HTML valoda sevī ietver 3 sarakstu tipus:

  • sakārtots saraksts <ol> (ordered list) — uzskaitījumam lieto skaitļus vai burtus. Šādus sarakstus parasti izvēlas tur, kur saturiski ir nozīme elementu secībai.
  • nesakārtots saraksts <ul> (unordered list) — uzskaitījumam lieto simbolus (aizzīmes).
  • definīciju saraksts <dl> (definition list) — pielieto, lai veidotu terminu definīcijas un skaidrojumus.

Sakārtotais saraksts

Piemērs

<ol>
<li>Pirmais solis</li>
<li>Otrais solis</li>
<li>Trešais solis</li>
</ol>

Rezultāts

  1. Pirmais solis
  2. Otrais solis
  3. Trešais solis

Nesakārtotais saraksts

Piemērs

<ul>
<li>Piens</li>
<li>Maize</li>
<li>Sviests</li>
</ul>

Rezultāts

  • Piens
  • Maize
  • Sviests

Ligzdotie saraksti

Sarakstus var ievietot citu sarakstu elementos, veidojot daudzlīmeņu struktūru. Šādi ligzdoti saraksti tiek bieži izmantoti izvēlnēs un satura rādītājos.

Piemērs

<ul>
<li>Augļi
<ul>
<li>Āboli</li>
<li>Bumbieri</li>
</ul>
</li>
<li>Dārzeņi
<ul>
<li>Burkāni</li>
<li>Kartupeļi</li>
</ul>
</li>
</ul>

Rezultāts

  • Augļi
    • Āboli
    • Bumbieri
  • Dārzeņi
    • Burkāni
    • Kartupeļi

Definīciju saraksts

<dl> saraksts sastāv no terminu un definīciju pāriem. Terminu apzīmē ar <dt> (definition term), bet tā skaidrojumu — ar <dd> (definition description).

Piemērs

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — hiperteksta iezīmēšanas valoda</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — kaskadētas stilu tabulas</dd>
<dt>JS</dt>
<dd>JavaScript — programmēšanas valoda interaktivitātei</dd>
</dl>

Rezultāts

HTML
HyperText Markup Language — hiperteksta iezīmēšanas valoda
CSS
Cascading Style Sheets — kaskadētas stilu tabulas
JS
JavaScript — programmēšanas valoda interaktivitātei

Sarakstu noformēšana ar CSS

Sarakstu izskatu var pilnībā mainīt ar CSS — noņemt aizzīmes, sakārtot elementus horizontāli, pievienot atstarpes un izveidot pilnvērtīgas izvēlnes. Vairāk par to lasi CSS pamācībā.

Laboja mad, labots 1x