Att göra listor

Listor använder man för att presentera en uppställning och det finns tre olika alternativ att välja på. De allra vanligaste är punktlistorna, därefter kommer de numrerade listorna. Sist har vi definitionslistorna. Listor har något som heter list item – det vill säga en listpost – och denna märks ut som <li>. Varje <li> är en egen rad i listan.

Om vi börjar med punktlistorna inleds denna lista med attributet <ul> – vilket betyder unorderedlist – en lista som inte har givits någon definition. Framför varje listelement uppkommer då en liten punkt. Koden för en odefinierad lista ser ut så här:

<ul>
	<li>listpost 1</li>
	<li>listpost 2</li>
	<li>listpost 3</li>
	</ul>

Numrerade listor skiljer sig inte annat än att listan nu får ett definitionsattribut. En numrerad lista börjar med attributet <ol> – vilket betyder ordered list – en ordnad lista. Fortfarande måste vi givetvis använda oss av vårt list item – <li>. Koden för en ordered list – eller numrerad lista – ser ut så här:

<ol>
	<li>listpost 1</li>
	<li>listpost 2</li>
	<li>listpost 3</li>
	</ol>

Se exempel:

1. listpost 1
2. listpost 2
3. listpost 3

Denna typ av lista är mycket bra om man vill numrera en uppställning eller ranka något i fallande skala.

Den tredje varianten av listor skiljer sig däremot från de två andra. Eftersom det handlar om en definitionslista använder vi helt andra attribut. Just definitionslistor är mycket bra att använda om du vill göra en lista med underbeskrivningar. Du ges möjlighet att skapa en listrubrik och under denna kan du sedan fylla på med din beskrivning. Vi ska nu kika lite närmare på hur denna lista fungerar och ser ut.

Definitionslistorna börjar med attributet <dl>. Men istället för att använda ett list item/listpost – använder vi något som kallas för definition term – en definierad term. Denna märks ut som <dt>. Det är i <dt> som varje definition i listan anges. Du kan se det som en “rubrik”. Under denna kommer sedan din detaljerade förklaring/beskrivning till listans definition/rubrik. Denna kod märks ut som <dd> – en detaljerad definition.
Koden ser ut så här:

<dl>
<dt>Kaxigt</dt>
<dd>En site för dig</dd>
<dt>Besökare</dt>
<dd>Här finns många webguider</dd>
<dt>Skoj</dt>
<dd>Webdesign är kul!</dd>
</dl>

Och den ger denna lista – här är listdefinitionerna per rad grönmarkerade för att underlätta förståelsen i uppbyggnaden.

dl

Kaxigt » dt

En site för dig » dd

Besökare » dt

Här finns många webguider » dd

Skoj » dt

Webdesign är kul! » dd

/dl

Visste du att du kan styla dina listor med css?