Der er forskellige typer lister i HTML. Først er der punktlister. I denne liste er de enkelte listeemner udstyret med et punkttegn kaldet en bullet.
Punktlister introduceres med ul-elementet. De enkelte listeemner er markeret med li-elementet.
<p>Nuværende emner fra forumet</p> <ul> <li>CSS afvikles ikke længere</li> <li>Showroom Hollywood-stil fra 40'erne</li> <li>Nedklapsliste i CSS</li> <li>PHP forbindelse/frakobling</li> <li>Min lille showroom - Begynder søger råd!</li> </ul>
Her er et kig på resultatet i browseren:
Der indsættes et punkttegn foran hvert indlæg. Hvordan dette ser ud som standard, bestemmer browsere. Der er tilføjet attributter, der kan påvirke listenes udseende, men disse bør ikke længere bruges. I stedet skal CSS-egenskaber anvendes.
Punktlister kan også skrives indeni hinanden. Se først på følgende billede:
Dette viser, hvad det indebærer at have indlejrede lister.
Syntaksen er som følger:
<ul>
<li>Tutorials
<ul>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ul>
</li>
<li>Videokurser
<ul>
<li>3D</li>
<li>Mediedesign</li>
<li>Web</li>
</ul>
</li>
<li>Tips</li>
<li>Butikker</li>
</ul>
Inde i et listeemne kan der også være en anden liste. Det behøver ikke nødvendigvis at være en punktliste. Faktisk kan også andre listetyper - som vil blive præsenteret i denne vejledning - indsættes.
I HTML5 er det ikke strengt nødvendigt at bruge det afsluttende </li>. Af hensyn til læsbarheden anbefales det dog altid at lukke det. Syntaktisk korrekt ville være noget i retning af dette:
<p>Nuværende emner fra forumet</p> <ul> <li>CSS afvikles ikke længere <li>Showroom Hollywood-stil fra 40'erne <li>Nedklapsliste i CSS <li>PHP forbindelse/frakobling <li>Min lille showroom - Begynder søger råd! </ul>
Nummererede lister
Udover punktlister kan der også defineres nummererede lister. Her er først et billede, der viser, hvad der egentlig menes med sådanne nummererede lister.
De enkelte listeelementer får tildelt løbende numre. Nummererede lister indledes med ol-elementet.
Følgende eksempel viser, hvordan dette element kan bruges.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
Som med punktlister markeres de enkelte indgange også med li-elementet.
Teoretisk set kan punktlister også indlejres.
<ol>
<li>Tutorials
<ol>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ol>
</li>
<li>Videokurser
<ol>
<li>3D</li>
<li>Mediedesign</li>
<li>Web</li>
</ol>
</li>
<li>Tips</li>
<li>Butikker</li>
</ol>Resultatet i browseren er imidlertid skuffende.
En nummerering efter dette skema opnås ikke på denne måde:
1. Tutorials 2D
1.1 3D
1.2 Web
- Videokurser 3D
2.1 Mediedesign
2.2 Web - Tips
- Butikker
Dette er ikke muligt med ren HTML. Faktisk er det nødvendigt at bruge CSS for at lade indhold automatisk nummerere efter en sådan struktur.
Definisionslister
En anden listevariant er såkaldte definitionslistser. Her er først et eksempel på, hvordan en sådan liste endelig ser ud i browseren:
Definitionslistens hovedanvendelsesområde er glossarer. Her er syntaksen, der førte til den tidligere viste output:
<dl>
<dt>AM</dt>
<dd>AM - Luftpost</dd>
<dd>AM - Luftmarskal</dd>
<dd>AM - Amberg</dd>
<dd>AM - Americium</dd>
<dd>AM - Amstetten</dd>
<dt>AN</dt>
<dd>AN - ovennævnte</dd>
<dd>AN - Adgangsknotepunkt</dd>
<dd>AN - Ancona</dd>
</dl>Ved definitionslister har man altid med tre elementer at gøre. Listene indledes med dl-elementet. Dette udgør den ydre struktur. Udtrykket, der skal defineres, angives ved hjælp af et dt-element. Dette udgør i sidste ende definitionen. Definitionen af beskrivelsen gives ved hjælp af dd-elementet.
Det er i øvrigt også muligt at indlejre definitionslister. Dette fungerer på samme måde som vist for de andre listetyper.
Hvordan definitionslister ser ud standardmæssigt, bestemmes igen af browseren. Men til sidst kan du via CSS selv definere det ønskede layout.
I tidligere versioner af HTML var der også menu- og kataloglister. De to elementer, menu og dir, blev brugt til dette formål. Dir-elementet er ikke længere inkluderet i HTML5. Men det ser anderledes ud med menu. Dette element er blevet genimplementeret og skulle i fremtiden kunne bruges til kontekstmenuer og værktøjslinjer. Her er et eksempel på, hvordan W3C forestiller sig en typisk menu-anvendelse:
<menu type="toolbar"> <li> <menu label="Fil"> <button type="button" onclick="fnew()">Ny...</button> <button type="button" onclick="fopen()">Åbn...</button> <button type="button" onclick="fsave()">Gem</button> <button type="button" onclick="fsaveas()">Gem som...</button> </menu> </li> <li> <menu label="Rediger"> <button type="button" onclick="ecopy()">Kopiér</button> <button type="button" onclick="ecut()">Klip</button> <button type="button" onclick="epaste()">Indsæt</button> </menu> </li> <li> <menu label="Hjælp"> <li><a href="help.html">Hjælp</a></li> <li><a href="about.html">Om</a></li> </menu> </li> </menu>
På nuværende tidspunkt understøttes dette dog endnu ikke af nogen browser i denne form.
Derfor bør menu på nuværende tidspunkt heller ikke anvendes.
Oprette lister
Et andet tip vedrørende lister. På mange hjemmesider bruges specifikke HTML-attributter til at designe lister. Således kan du f.eks. bruge <ul type="square"> til at vise rektangler foran punkterne på opstillingslister.
Ligeledes kan du også definere nummereringsformatet for nummererede lister.
<ol type="A">
Husk dog, at det ikke altid er en god idé at bruge alt det, der tilbydes. Passende CSS-egenskaber er mere velegnede. I virkeligheden bør du bruge disse til at tilpasse dine lister efter dine ønsker. Der følger detaljerede oplysninger om CSS i denne serie.
