Det finns olika typer av listor i HTML. Först och främst finns punktlistorna. I denna typ av lista är varje listobjekt utrustat med en punkt, kallad Bullet.
Punktlistor introduceras med elementet ul. Varje listobjekt markeras med elementet li.
<p>Aktuella ämnen från forumet</p> <ul> <li>CSS utförs inte längre</li> <li>Showroom Hollywood stil från 40-talet</li> <li>Fällbar lista för CSS</li> <li>PHP anslutning/frånkoppling</li> <li>Min lilla showroom - Nybörjare ber om tips!</li> </ul>
Här är en bild på resultatet i webbläsaren:
För varje inlägg läggs en punkt till. Hur det ser ut som standard bestäms av webbläsaren. Det finns attribut med vilka listornas utseende kan påverkas, men dessa bör inte längre användas. Istället används CSS-egenskaper.
Punktlistor kan också vara inbäddade. Ta först en titt på illustrationen nedan:
Här framgår vad en sådan inbäddning innebär.
Syntaxen för detta ser ut på följande sätt:
<ul>
<li>Handledningar
<ul>
<li>2D</li>
<li>3D</li>
<li>Webb</li>
</ul>
</li>
<li>Videoträningar
<ul>
<li>3D</li>
<li>Mediedesign</li>
<li>Webb</li>
</ul>
</li>
<li>Tips</li>
<li>Butiker</li>
</ul>
Inom ett listobjekt kan det finnas en annan lista. Det behöver inte nödvändigtvis vara en punktlista. Andra listtyper - som kommer att introduceras i den här handledningen - kan också infogas.
Förresten är det inte obligatoriskt att använda det avslutande </li> i HTML5. Av läsbarhetsskäl rekommenderas det dock alltid att stänga det. Syntaktiskt korrekt skulle vara något sådant här:
<p>Aktuella ämnen från forumet</p> <ul> <li>CSS utförs inte längre <li>Showroom Hollywood stil från 40-talet <li>Fällbar lista för CSS <li>PHP anslutning/frånkoppling <li>Min lilla showroom - Nybörjare ber om tips! </ul>
Numrerade listor
Förutom punktlistor kan också numrerade listor definieras. Här är också en bild som visar vad numrerade listor innebär.
Listobjekten har alltså löpnummer framför sig. Numrerade listor introduceras med ol-elementet.
Följande exempel visar hur detta element kan användas.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
Precis som med punktlistor markeras varje post med elementet li.
Teoretiskt sett kan även punktlistor vara inbäddade.
<ol>
<li>Handledningar
<ol>
<li>2D</li>
<li>3D</li>
<li>Webb</li>
</ol>
</li>
<li>Videoträningar
<ol>
<li>3D</li>
<li>Mediedesign</li>
<li>Webb</li>
</ol>
</li>
<li>Tips</li>
<li>Butiker</li>
</ol>Resultatet i webbläsaren är dock nedslående.
En numrering enligt detta schema uppnås inte på detta sätt:
1. Handledningar 2D
1.1 3D
1.2 Webb
- Videoträningar 3D
2.1 Mediedesign
2.2 Webb - Tips
- Butiker
Sådant är inte möjligt med enbart HTML. Faktum är att man måste använda CSS för att automatiskt numrera innehåll enligt ett sådant schema.
Definitionslistor
En annan typ av lista är de så kallade definitionslistorna. Här är ett exempel på hur en sådan lista ser ut i webbläsaren:
Huvudanvändningsområdet för definitionslistor är glossarier. Här är syntaxen som ledde till den tidigare visade utmatningen:
<dl>
<dt>AM</dt>
<dd>AM - Luftpost</dd>
<dd>AM - Luftherr</dd>
<dd>AM - Amberg</dd>
<dd>AM - Americium</dd>
<dd>AM - Amstetten</dd>
<dt>AN</dt>
<dd>AN - ovan nämnd</dd>
<dd>AN - Access Node</dd>
<dd>AN - Ancona</dd>
</dl>I definitionsförteckningar har man alltid att göra med tre element. Listorna inleds med elementet dl. Det är alltså den yttre strukturen. Uttrycket som ska definieras markeras med ett dt-element. Det är i slutändan definitionstermen. Definitionsbeskrivningen ges sedan via elementet dd.
Nästling av definitionsförteckningar är för övrigt också möjligt. Det fungerar då på samma sätt som visas för de andra listvarianterna.
Hur definitionsförteckningar ser ut som standard bestäms återigen av webbläsaren. Till slut kan ni dock genom CSS själva ange den önskade layouten.
I tidigare HTML-versioner fanns det även meny- och kataloglistor. För detta användes de två elementen menu och dir. dir-elementet är inte längre inkluderat i HTML5. Annorlunda ser det ut med menu. Detta element har nyimplementerats och förväntas kunna användas för popupmenyer och verktygsfält i framtiden. Här är ett exempel på hur W3C ser en typisk användning av menu:
<menu type="toolbar"> <li> <menu label="Fil"> <button type="button" onclick="fnew()">Nytt...</button> <button type="button" onclick="fopen()">Öppna...</button> <button type="button" onclick="fsave()">Spara</button> <button type="button" onclick="fsaveas()">Spara som...</button> </menu> </li> <li> <menu label="Redigera"> <button type="button" onclick="ecopy()">Kopiera</button> <button type="button" onclick="ecut()">Klipp ut</button> <button type="button" onclick="epaste()">Klistra in</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>
För närvarande stöds detta dock ännu inte av någon webbläsare i denna form.
Därför bör menu inte användas i nuläget heller.
Utforma listor
Ett tips om listor. På många webbplatser använder man passande HTML-attribut för att formge listor. På så sätt kan man t.ex. med <ul type="square"> se till att rektanglar visas före punkterna i punktlistor.
På samma sätt kan man för numrerade listor ange numreringens typ.
<ol type="A">
Här gäller dock att man inte bör använda allt som erbjuds. Bättre lämpade är de motsvarande CSS-egenskaperna. Ni bör faktiskt använda dessa för att anpassa listorna efter era önskemål. Utförlig information om CSS kommer inom ramen för denna serie.
