2.10 Listat

Listat ovat hyvin yleisiä, joten niitä varten on kehitetty omat tagit, jotta niiden tekeminen olisi mahdollisimman helppoa ja nopeaa. Listoja on kolmenlaisia:

  • järjestetyt listat (ordered list, ol)
  • järjestämättömät listat (unordered list, ul) sekä
  • määrittelylistat (definition list, dt)

Kukin listassa oleva elementti on nimeltään list item, li.

Esimerkiksi ylläoleva lista on järjestämätön lista, joka on tehty ol-elementillä:

<ul>
	<li>järjestetyt listat (ordered list, ol)</li>
	<li>järjestämättömät listat (unordered list, ul) sekä</li>
	<li>määrittelylistat (definition list, dt)</li>
</ul>

Tässä esimerkit kaikista vaihtoehdoista

<ul (type=disc)> <ul type=square> <ul type=circle>
  • yksi
  • kaksi
  • kolme
  • yksi
  • kaksi
  • kolme
  • yksi
  • kaksi
  • kolme

<ol (type="1")> <ol type="a"> <ol type="A"> <ol type="I">
  1. yksi
  2. kaksi
  3. kolme
  1. yksi
  2. kaksi
  3. kolme
  1. yksi
  2. kaksi
  3. kolme
  1. yksi
  2. kaksi
  3. kolme

Merkintätavoista:

Jatkossa attribuutin vaihtoehtoisia arvoja merkitään seuraavalla tavalla:

<tunniste attribuutti="arvo 1 | arvo 2 | arvo 3">
esim.
<ul type="disc | square | circle">

Ja lopuksi vielä vielä määrittelylistan esimerkki:

<dl>
  <dt>Dweeb</dt>

  <dd>young excitable person who may mature
    into a <em>Nerd</em> or <em>Geek</em></dd>

  <dt>Hacker</dt>

  <dd>a clever programmer</dd>

  <dt>Nerd</dt>
  <dd>technically bright but socially inept person</dd>
</dl>
Dweeb
young excitable person who may mature into a Nerd or Geek
Hacker
a clever programmer
Nerd
technically bright but socially inept person

Listoja voi laittaa myös sisäkkäin:

<ol>
	<li>ensimmäinen</li>
	<li>toinen
		<ol type="a">
			<li>vaihtoehto 1</li>

			<li>vaihtoehto 2</li>
		</ol>
	</li>
	<li>kolmas</li>
</ol>
  1. ensimmäinen
  2. toinen
    1. vaihtoehto 1
    2. vaihtoehto 2
  3. kolmas

Tässä kaikki listoista suoraan HTML-standardin ylläpitäjän sivuilta (englanniksi):
http://www.w3.org/TR/REC-html40/struct/lists.html