XHTML: Listat 2008-01-31 23:37

Verkkokirjoittamisessa kannattaa suosia listoja niiden helpon silmäiltävyyden vuoksi. XHTML:llä on mahdollista merkitä kolmenlaisia listoja: järjestämättömiä, järjestettyjä, sekä määrittelylistoja. Otsikoihin ja leipäteksteihin verrattuna rakenne on hiukan monimutkaisempi elementtien sisäkkäisyyden myötä.

Järjestämätön lista | Unordered list <ul>...</ul> Listarivi <li>...</li>

Järjestämätöntä listaa tehdessä listan alku ja loppu merkitään ul-tunnisteella. Tämän jälkeen jokainen listarivi merkitään omaksi li-elementikseen.

<ul>
  <li>XHTML</li>
  <li>CSS</li>
  <li>FTP</li>
</ul>

Selaimet lisäävät ul-elementin listarivien eteen pallukat. Tätä oletusulkoasua voidaan muuttaa CSS-tyyleillä. Normaalien luettelolistojen lisäksi navigointilistat merkitään ul-elementeillä.

Järjestetty lista | Ordered list <ol>...</ol>

Järjestetty lista toimii samalla periaatteella kuin järjestämätönkin, tunnisteena ol.

<ol>
  <li>Ensin merkitään rakenne</li>
  <li>Sitten muotoillaan ulkoasu</li>
  <li>Lopuksi tiedostot siirretään palvelimelle</li>
</ol>

Selaimet lisäävät ol-elementin listarivien eteen oletusulkoasuna järjestysnumeron. Numeroinnin tapaan voidaan vaikuttaa myöhemmin CSS-tyyleillä: esim. a, b, c... tai i, ii, ii...

Määrittelylista | Definition list <dl><dt></dt><dd></dd></dl>

Rakenteeltaan aavistuksen monimutkaisempaan määrittelylistaan (dl) voi sijoittaa esimerkiksi määriteltävien termien (dt) määrittelyjä (dd).

<dl>
  <dt>XHTML</dt>
  <dd>Extensible HyperText Markup Language</dd>
  <dd>Kieli web-asiakirjan rakenteen merkkaamiseen</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dd>Kieli web-asiakirjan ulkoasun määrittelemiseksi</dd>
  <dt>FTP</dt>
  <dd>File Transfer Protocol</dd>
  <dd>Protokolla tiedostojen siirtämiselle</dd>
</dl>

Sisäkkäiset listat

Listarivien sisään voi lisätä uusia listoja.

<ul>
  <li>Järjestämätön lista
    <ul>
      <li>koko lista ul-elementiksi</li>
      <li>jokainen listarivi li-elementiksi</li>
    </ul>
  </li>
  <li>Järjestetty lista
    <ol>
      <li>koko lista ol-elementiksi</li>
      <li>jokainen listarivi li-elementiksi</li>
    </ol>
  </li>
  <li>Määrittelylista
    <dl>
      <dt>määriteltävä termi</dt>
      <dd>termin määritelmä</dd>
    </dl>
  </li>
</ul>