Loendid (lists) võivad veebilehel olla nagu tavapärastes tekstideski nummerdatud või täpploendid . Mõlemat tüüpi loendi sisuks on loendi elemendid <li> (list item).

Nummerdatud loend

Nummerdatud loendi jaoks on kasutusel element <ol> (ordered list). Näiteks nummerdatud loendi kirjeldus ja selle tulemus:

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

1. Esimene loendi element
2. Teine loendi element
3. Kolmas loendi element

Kui me soovime nummerdatud loendi puhul alustada loendust mingist muust numbrist kui 1, siis saame kasutada atribuuti start.

<ol start="10">
  <li>Esimene loendi element</li> 
  <li>Teine loendi element</li> 
  <li>Kolmas loendi element</li> 
</ol>

10. Esimene loendi element
11. Teine loendi element
12. Kolmas loendi element

Nummerdatud loendi type atribuut

Kasutades atribuuti <type> saame me numbrid asendada ka tähtede või rooma numbritega.
type =”1″ – loendi elemendid on nummerdatud (vaikeväärtus)
type=”A” – loendi elemendid on nummerdatud suurtähtedega
type=”a” – loendi elemendid on nummerdatud väiketähtedega
type=”I” – loendi elemendid on nummerdatud suurte rooma numbritega
type=”i” – loendi elemendid on nummerdatud väikeste rooma numbritega

<ol type="i"> 
  <li>Esimene loendi element</li> 
  <li>Teine loendi element</li> 
  <li>Kolmas loendi element</li> 
</ol>

i. Esimene loendi element
ii. Teine loendi element
iii. Kolmas loendi element

Täpploend

Täpploendi jaoks kasutatakse elementi <ul> (unordered list). Näiteks täpploendi kirjeldus ja selle tulemus:

<ul>
  <li>Esimene loendi element</li>
  <li>Teine loendi element</li>
  <li>Kolmas loendi element</li>
</ul>

• Esimene loendi element
• Teine loendi element
• Kolmas loendi element

Vaikeväärtusena tähistatakse täpploendi elemendid väikeste mustade täppidega. Soovi korral saame me valida aga ka teiste tähistajate vahel kasutades omadust list-style-type. Teiste hulgas on meil valikus näiteks disc (vaikeväärtus), circle, square, decimal, decimal-leading-zero, lower-roman, upper-latin jt või hoopis valik none, mille puhul ei kuvata ühtegi tähistajat.

<ul style="list-style-type:circle;"> 
  <li>Esimene loendi element</li> 
  <li>Teine loendi element</li> 
  <li>Kolmas loendi element</li> 
</ul>

Või siis asendame täpploendi täpi hoopis enda poolt valitud pildiga kasutades omadust list-style-image.

<ul style="list-style-image:url(pildid/banaan.jpg);"> 
  <li>Esimene loendi element</li> 
  <li>Teine loendi element</li> 
  <li>Kolmas loendi element</li> 
</ul>

Kirjelduste loend

Kui on tarvis loetleda terve hulk mõisteid/kirjeldusi, siis selleks kasutatakse spetsiaalset loendielementi <dl> (Description List).

Selle loendi elemendid defineeritakse elementidega <dt> (Description Term) ja nende selgitused – kirjeldused elementidega <dd> (Description Description).

<dl>
  <dt>Arvuti</dt>
    <dd>Masin, mis pakub meelelahutust, infot ja paljut muud</dd>
  <dt>Monitor</dt>
    <dd>Muudab arvutis toimuva nähtavaks</dd>
  <dt>Printer</dt>
    <dd>Kirjutab arvutis toimuva paberile</dd>
</dl>

Arvuti

Masin, mis pakub meelelahutust, infot ja paljut muud

Monitor

Muudab arvutis toimuva nähtavaks

Printer

Kirjutab arvutis toimuva paberile

Mitmetasandiline loend

Loomulikult on võimalik luua ka mitmetasemelisi loendeid ning seejuures täpp- ja nummerdatud loendeid omavahel kombineerida. Näiteks liigendatud loend, milles esimene tase on nummerdatud, teine tase täpploend:

<ol>
  <li>Esimene loendi element
    <ul>
      <li>Esimene alamelement</li>
      <li>Teine alamelement</li>
    </ul>
  </li>
  <li>Teine loendi element
    <ul>
      <li>Esimene alamelement</li>
      <li>Teine alamelement</li>
    </ul>
  </li>
  <li>Kolmas loendi element</li>
</ol>

1. Esimene loendi element

• Esimene alamelement
• Teine alamelement

2. Teine loendi element

• Esimene alamelement
• Teine alamelement

3. Kolmas loendi element

Enesekontroll (1 ülesanne)

Lisalugemist: loome loendi ja CSS abil lehele navigatsiooni menüü

CSS abil saame loendit kujundada väga mitmel viisil. Allpool on toodud kaks näidet, kuidas saame loendi muuta CSS abil oma veebilehe navigatsiooni menüüks.

Vertikaalne menüü:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  font-family: verdana;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: lightgray;
}
li a {
  display: block;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: green;
  color: white;
}

li a:hover:not(.active) {
  background-color: gray;
  color: white;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="index.html">Avaleht</a></li>
  <li><a href="uudised.html">Uudised</a></li>
  <li><a href="kontakt.html">Kontakt</a></li>
</ul>

</body>
</html>

Horisontaalne menüü:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  font-family: verdana;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: lightgray;
}
li{
  float:left;
}
li a {
  display: block;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: green;
  color: white;
}

li a:hover:not(.active) {
  background-color: gray;
  color: white;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="index.html">Avaleht</a></li>
  <li><a href="uudised.html">Uudised</a></li>
  <li><a href="kontakt.html">Kontakt</a></li>
</ul>

</body>
</html>