4. Listor

Eftersom XHTML-sidor oftast har som uppgift att hantera varierade mängder information så finns det många tillfällen då denna information behöver listas. För det ändamålet använder man sig av listor. I XHTML finns det 3 typer av listor: ordnade listor, oordnade listor och definitionslistor.
Oordnad lista:   <ul></ul>
En oordnad lista är en lista där alla uppradade objekt endast föregås av punkter. Elementet som indikerar att listan är oordnad är ul-taggen (unordered list). Inuti ul-taggen ska det sedan finnas en li-tagg (list item) för varje listat objekt.

Ex.

<body>
   <ul>
      <li>
         äpple
      </li>
      <li>
         päron
      </li>
      <li>
         apelsin
      </li>
   </ul>
</body>

ger utskriften:
  • äpple
  • päron
  • apelsin

Ordnad lista:   <ol></ol>
En ordnad lista gör stort sett samma sak, med skillnaden att den numrerar objekten i den ordning de presenteras. I en ordnad lista ska li-taggarna placeras innanför ol-taggarna (ordered list) istället.

Ex.

<body>
   <ol>
      <li>
         äpple
      </li>
      <li>
         päron
      </li>
      <li>
         apelsin
      </li>
   </ol>
</body>

ger utskriften:
  1. äpple
  2. päron
  3. apelsin

Definitionslista:   <dl></dl>
En definitionslista skiljer sig lite grann från de två ovanstående. I en definitionslista radar man upp termer tillsammans med sina förklaringar. Innanför dl-taggarna ska det först finnas ett dt-objekt (definition term) som anger termen som ska definieras. Därefter som den följas av ett dd-objekt (definition description) som innehåller själva definitionen av termen.

Ex.

<body>
   <dl>
      <dt>
         äpple
      </dt>
      <dd>
         En rund, grön, saftig frukt.
      </dd>
      <dt>
         päron
      </dt>
      <dd>
         En mer avlång, sötare frukt.
      </dd>
      <dt>
         banan
      </dt>
      <dd>
         En smal, böjd, gul frukt.
      </dd>
   </dl>
</body>

ger utskriften:
äpple
En rund, grön, saftig frukt.
päron
En mer avlång, sötare frukt.
banan
En smal, böjd, gul frukt.

Valid XHTML Basic 1.0!