HTML-dokumenttiin voidaan tehdä erilaisia listoja, jotka voidaan luetella allekkain tai vierekkäin vaakatasossa.

Lista-elementit voidaan jakaa kolmeen luokkaan, jotka ovat järjestämätön lista, järjestetty lista sekä määritelmäluettelo.

Järjestämätön lista
Järjestämättömässä listassa käytetään luettelomerkkinä ympyrää.
Järjestetty lista
Järjestetyssä listassa käytetään luettelomerkkinä numeroa.
Määritelmäluettelo
Määritelmäluettelossa ensin kerrotaan asia ja sitten määritellään se.
Horisontaalinen lista
Vaakatasossa olevan listan voi tehdä helposti display-attribuutilla.

Järjestämätön lista (ul)

Lista aloitetaan UL-tagilla, joka tulee myös lopettaa. LI-tagilla tehdään kohtia listaan. Nykyisten web-standardien mukaan myös LI-tagit tulee sulkea, ennen se ei ollut pakollista.

Listaan voidaan laittaa TYPE-attribuutti, jolla voidaan muuttaa Li-tagissa olevia luettelomerkkejä. Attribuutin mahdollisia arvoja ovat: disc (pallo), square (neliö) ja circle (ympyrä). Jos TYPE-attribuuttia ei laiteta ollenkaan, käyttää lista oletuksena palloa.

<ul>
	<li>Ensinmäinen kohta</li>
	<li>Toinen kohta</li>
	<li>Kolmas kohta</li>
</ul>
Esimerkki näyttää tältä

Listaan voidaan tehdä myös alakohtia esimerkiksi järjestämättömällä listalla (ul), tai järjestetyllä listalla (ol). LI-tagin sisään laitetaan tällöin uusi lista-elementti ja siihen normaaliin tapaan kohtia. Jos TYPE-attribuutilla ei muuteta listan luettelomerkkiä, niin lista käyttää oletuksena ympyrää.

<ul>
	<li>Ensimmäinen kohta
		<ul>
			<li>Ensinmäisen kohdan alakohta</li>
			<li>Ensinmäisen kohdan toinen alakohta</li>
		</ul>
	</li>
	<li>Toinen kohta</li>
	<li>Kolmas kohta</li>
</ul>
Esimerkki näyttää tältä

Järjestetty lista (ol)

Järjestetyssä listassa käytetään luettelomerkkinä oletuksena numeroita. TYPE-attribuutilla voidaan muuttaa luettelomerkkiä. Mahdollisia arvoja ovat: 1 (numerot), a (pienet kirjaimet), A (suuret kirjaimet), i (pienet roomalaiset numerot) ja I (suuret roomalaiset numerot).

Lista aloitetaan OL-tagilla, joka tulee myös lopettaa. LI-tagilla tehdään kohtia listaan. Nykyaikaisten web-standardien mukaan myös LI-tagit tulee lopettaa.

<ol>
	<li>Ensinmäinen kohta</li>
	<li>Toinen kohta</li>
	<li>Kolmas kohta</li>
</ol>
Esimerkki näyttää tältä
  1. Ensimmäinen kohta
  2. Toinen kohta
  3. Kolmas kohta

Listaan voidaan tehdä myös alakohtia esimerkiksi järjestämättömällä listalla (ul) tai järjestetyllä listalla (ol). LI-tagin sisään laitetaan tällöin uusi listaelementti ja siihen normaaliin tapaan kohtia. TYPE-attribuutilla voidaan muuttaa luettelomerkkiä.

<ol>
	<li>Ensimmäinen kohta
		<ol>
			<li>Ensinmäisen kohdan alakohta</li>
			<li>Ensinmäisen kohdan toinen alakohta</li>
		</ol>
	</li>
	<li>Toinen kohta</li>
	<li>Kolmas kohta</li>
</ol>
Esimerkki näyttää tältä
  1. Ensimmäinen kohta
    1. Ensinmäisen kohdan alakohta
    2. Ensinmäisen kohdan toinen alakohta
  2. Toinen kohta
  3. Kolmas kohta

Määritelmäluettelo (dl)

Määritelmäluettelolla voidaan tehdä lista, jossa ensin kerrotaan määriteltävä asia ja sen alapuolelle sen määritelmä.

Määritelmäluettelo aloitetaan DL-tagilla, jonka sisään laitetaan määriteltävä asia DT-tagilla ja määritelmä DD-tagilla. Jokainen tagi tulee myös sulkea. Luettelossa ei saa käyttää mitään muita tageja, kuin edellä mainittuja.

<dl>
<dt>Ensimmäinen asia.</dt>
	<dd>Asian määritelmä.</dd>
<dt>Toinen asia.</dt>
	<dd>Asian määritelmä.</dd>
<dt>Kolmas asia.</dt>
	<dd>Asian määritelmä.</dd>
</dl>
Esimerkki näyttää tältä
Ensimmäinen asia.
Asian määritelmä.
Toinen asia.
Asian määritelmä.
Kolmas asia.
Asian määritelmä.

Horisontaalinen lista

Jos halutaan tehdä lista, joka näyttää listattavat asiat horisontaalisesti eli vaakatasossa, tulee käyttää CSS:n display-attribuuttia. Attribuutin arvoksi annetaan "inline". Attribuutti pitää antaa jokaiselle listattavalle asialle.

<ul>
	<li style="display:inline;">Ensinmäinen kohta</li>
	<li style="display:inline;">Toinen kohta</li>
	<li style="display:inline;">Kolmas kohta</li>

</ul>
Esimerkki näyttää tältä