XHTML Tutorial - Kapitel 8: Listor

Ett annat vanligt sätt att formatera text på webben, är att dela upp den i punkt-listor för saker man vill räkna upp. Man kan också göra numrerade listor, men de är generellt sett mer ovanliga. Ett exempel på båda skulle kunna se ut såhär:

Jag tycker om:

  • Kaffe
  • Broccoli
  • Glass

Och jag föredrar dem i den här ordningen:

  1. Glass
  2. Kaffe
  3. Broccoli

Så hur åstadkommer vi då detta? Tja, listor finns i två varianter: oordnade ("unordered", den första) och ordnade ("ordered", den sista) och taggarna är <ul> respektive <ol>. Men - nu har det blivit dags att introducera ännu ett nytt koncept på vår HTML-resa - något som jag för denna tutorial valt att kalla multi-tagg-element.



Vad menar jag då med multi-tagg-element? Jo, skillnaden mellan listor och tidigare introducerade element är att medan listan själv kan sägas vara ett enda objekt på din bildskärm, så är det också beroende av andra "interna" objekt innanför <ul>- eller <ol>-taggarna för att bidra med de enskilda raderna som innehållet består av. Detta innehåll skrivs in som "list item"-taggar, <li>, och de ska alltid användas tillsammans med <ul> eller <ol> som ett enda stort objekt på dina sidor.

Låter det vettigt? Om inte, så kanske det underlättar om vi tittar på hur koden ser ut för kaffe, glass och broccoli-exemplet ovan:

<p>Jag tycker om:</p>
<ul>
  <li>Kaffe</li>
  <li>Broccoli</li>
  <li>Glass</li>
</ul>

<p>Och jag föredrar dem i den här ordningen:</p>
<ol>
  <li>Glass</li>
  <li>Kaffe</li>
  <li>Broccoli</li>
</ol>

Så för att summera: <li>-taggarna används för att skriva in alla enskilda rader du vill presentera som en lista, och <ul>- och <ol>-taggarna läggs "runtom" <li>-taggarna och låter därmed webbläsaren få veta om det är en oordnad lista (punkter) eller en ordnad lista (siffror) vi har att göra med.





< Tidigare: Bilder

robert@eagleowl.se 026-16 13 61 www.eagleowl.se
©2018 EagleOwl