Referensbok

HTML © Eva von Pepel

* [ HTML-referensbok ] * [ Referensböcker ] *

Listor

Inledning

HTML-listor används för att lista information. Det finns två typer av listor: Ordlistor "Glossary Lists" och "Vanliga" listor "Regular Lists" som kan innehålla både sorterade och osorterade poster.

Varje lista är en behållare för sina poster och måste innehålla åtminstone en post. Inga andra element får förekomma i dem. Poster däremot får innehålla andra element.

Typ av av listor:

Ordlistor som
<DL></DL> - Termlista (Definition List); används för ordlistor (termer och definitioner).
"Vanliga" listor som
<OL></OL> - Sorterad lista, numrerad, (Ordered List); används för att lista enstaka meningar/ord
<UL></UL> - Osorterad lista, onumrerad, (Unordered List); såsom numrerad används för att lista enstaka meningar/ord. Punktlista

HTML 3.2 och HTML 4.0 Transitional tillåter även:

<MENU></MENU> - Meny lista (Menu List); används för att lista osorterade kortare stycken
<DIR></DIR> - Katalog lista (Directory List); används för att lista kortare meningar eller enstaka ord och kan arrangeras i kolumner (ges support av enstaka www.klienter).

Listorna MENU och DIR är nedskrivna i HTML 4.0 Transitional och deras fortsatta support garanteras inte i framtida versioner av HTML.

Varje lista öppnar du med en specifik för listan starttagg och slutar med en sluttag. Båda är obligatoriska. Dessa taggar används för att markera listans början och slut. Poster som listan innehåller markeras separat.

Oftast visas listorna med en vänster marginal. Det utnyttjas av några i layoutsyfte - man skapar listor utan poster. Sådana listor är ogiltiga ur HTML-perspektiv då varje lista måste innehålla åtminstone en post.

Listorna med undantag för DIR och MENU kan nästläggas, dvs en lista kan innehålla ett obegränsat antal andra listor.

Termlista <DL> </DL>

En termlista används för att lista olika termer och tillhörande definitioner eller endast termer/definitioner.

Början på listan markeras med starttaggen <DL> och slut med </DL>. Båda är obligatoriska. Elementet DL får inte innehålla några andra element förutom elementen DT och DD. Ett av dessa element, antingen DT eller DD måste följa direkt efter DL. Både DT och DD kan förekomma ett obegränsat antal gånger i DL.

Elementet DT används för att definiera termer. Början på elementet markeras med starttaggen <DT> och slut med </DT>. Sluttaggen är valfri då elementets slut är underförstått så fort en annan post öppnas eller om listan slutar. Även då sluttaggen är valfri kan det ibland vara nödvändigt att använda den speciellt om du formaterar dokumenten med stilmallar och på så sätt undvika arv (eller andra) buggar som finns i vissa www-klienter. Förutom vanlig text får DT innehålla endast inlineelement, t ex IMG eller A.

Elementet DD används för definitioner. Början på elementet markeras med starttaggen <DD> och slut med </DD>. Sluttaggen är valfri (se info i DT). Förutom vanlig text får DD innehålla alla andra BODY-element, dvs både block- och inline element.

Attribut

HTML 4.0HTML 4.0 TransitionalHTML 3.2
DL, DT, DD
Alla attribut som beskrivs i %attrs;
DL - Alla attribut som beskrivs i %attrs; och
COMPACT - minskar avstånd mellan posterna
DT, DD - Alla attribut som beskrivs i %attrs;
DL
COMPACT - minskar avstånd mellan posterna
DT, DD
Inga

Exempel

MarkeringResultat
<DL>
<DT> - Första termen, t ex "Språk"</DT>
<DD> - Första definitionen, t ex "svenska"</DD>
<DD> - Andra definitionen, t ex "engelska"</DD>
</DL>
Språk
svenska
engelska

Numrerad lista <OL> </OL>

Början på listan markeras med starttaggen <OL> och slut med </OL>. Båda är obligatoriska. Elementet OL får inte innehålla några andra element förutom elementet LI (post) som är dessutom obligatoriskt. OL får innehålla ett obegränsat antal LI.

Elementet LI används för att lista poster. Början på elementet markeras med starttaggen <LI> och slut med </LI>. Sluttaggen är valfri (se info i DT). Förutom vanlig text får LI innehålla alla andra BODY-element, dvs både block- och inline element. Listans poster är numrerade.

Attribut

HTML 4.0HTML 4.0 TransitionalHTML 3.2
OL, LI
Alla attribut som beskrivs i %attrs;
OL - Alla attribut som beskrivs i %attrs; och
COMPACT, TYPE, START
LI - Alla attribut som beskrivs i %attrs; och
TYPE, VALUE
OL
COMPACT, TYPE, START
LI
TYPE, VALUE

COMPACT

OBS! Endast HTML 4.0 Transitional där det är nedskrivet samt HTML 3.2. Minskar avstånd mellan posterna

TYPE

OBS! Endast HTML 4.0 Transitional där det är nedskrivet samt HTML 3.2.

Med attributet TYPE kan du specificera hur posterna ska numreras. Tillåtna värden är 1, a, A, i, I. Både OL och LI kan ta detta attribut. Om attributet saknas numreras listan enligt standardvärdet 1,2,3

TYPE=1 (1, 2, 3 osv)
TYPE=a (a, b, c osv)
TYPE=A (A, B, C osv)
TYPE=i (i, ii, iii osv)
TYPE=I (I, II, III osv)

START

OBS! Endast HTML 4.0 Transitional där det är nedskrivet samt HTML 3.2. Attributet START (endast OL) talar om från vilken siffra/bokstav numreringen ska börja och används när listan avbryts och fortsätter längre ner i dokumentet. Om första delen av listan slutar t ex på nr 5 kan du börja fortsättningen med nr 6.

<OL START=6>

Om första delen av listan slutar på t ex E är START=6 lika med F.

VLAUE

OBS! Endast HTML 4.0 Transitional där det är nedskrivet samt HTML 3.2. Attributet VALUE (endast LI) specificerar värdet i den aktuella posten - ställer om numrering.

<OL>
<LI START=6>Denna post är nr 6</LI>
<LI>Denna post är nr 7</LI>
</OL>

Exempel

MarkeringResultat
<OL> - Öppnar listan
<LI> - Första posten, t ex "Post 1"</LI>
<LI> - Andra posten, t ex "Post 2"</LI>
</OL> - Slutar listan
  1. Post 1
  2. Post 2

Onumrerad Lista <UL> </UL>

Onumrerade och numrerade listor har samma konstruktion. Den enda skillnaden är att poster punkteras istället för att numreras.

Början på listan markeras med starttaggen <UL> och slut med </UL>. Båda är obligatoriska. Elementet UL får inte innehålla några andra element förutom elementet LI (post) som är dessutom obligatoriskt. UL får innehålla ett obegränsat antal LI.

Elementet LI används för att lista poster. Början på elementet markeras med starttaggen <LI> och slut </LI>. Sluttaggen är valfri (se info i DT). Förutom vanlig text får LI innehålla alla andra BODY-element, dvs både block- och inline element.

Attribut

HTML 4.0HTML 4.0 TransitionalHTML 3.2
UL, LI
Alla attribut som beskrivs i %attrs;
UL - Alla attribut som beskrivs i %attrs; och
COMPACT, TYPE
LI - Alla attribut som beskrivs i %attrs; och
TYPE, VALUE
UL
COMPACT, TYPE
LI
TYPE, VALUE

COMPACT, VALUE

OBS! Endast HTML 4.0 Transitional där det är nedskrivet samt HTML 3.2. Fungerar på samma sätt som i OL.

TYPE

OBS! Endast HTML 4.0 Transitional där det är nedskrivet samt HTML 3.2. Fungerar på samma sätt som i OL men istället för numrering väljer du typ av punkter. Du kan välja mellan tre värden DISC, SQUARE och CIRCLE. Om attributet saknas för posterna "vanliga" punkter.

Exempel

MarkeringResultat
<UL> - Börjar listan
<LI> - Första post, t ex "Post 1" </LI>
<LI> - Andra post, t ex "Post 2"</LI>
</UL> - Slutar listan
  • Post 1
  • Post 2

Listorna DIR och MENU

Dessa listor får endast användas i HTML 4.0 Transitional (är nedskrivna) och HTML 3.2. Listorna är identiska med den onumrerade listan UL och tar samma attribut. Istället för UL skriv DIR eller MENU.

Lista i en lista

Förutom DIR och MENU kan alla listor nästläggas, dvs en lista får innehålla en annan. Listorna nästlägges i elementen DD (termlista) eller LI ("vanliga" listor).

Exempel

MarkeringResultat
<UL> - Öppnar listan
<LI> - Lista nr 1 Post 1
<LI> - Lista nr 1 Post nr 1
<UL> - Öppnar Lista nr 2
<LI> - Lista nr 2 Post 1
<LI> - Lista nr 2 Post 2
</LI> </ul> </li> - Stänger Lista nr 2
<LI> - Lista nr 1 Post 3
</UL> - Stänger Lista nr 2
  • Post 1, Lista 1
  • Post 2, Lista 1
    • Post 1, Lista 2
    • Post 2, Lista 2
  • Post 3, Lista 1

Formatering med stilmallar

HTML 4.0 åtskiljer struktur från presentation. Därför är attributen som TYPE inte tillåtna. All formatering, t ex numrering, typ av punkter samt även färgsättning positionering ska ske via stilmallar. Info om detta finner du i avsnittet om stilmallar.

Regel Presentation
LI {display: list-item} Börja med denna regel
och fortsätt med en av följande:

UL {list-style-type: disc} punkter
UL {list-style-type: circle} ringar
UL {list-style-type: square} kvadrater
OL {list-style-type: decimal} 1 2 3 osv
OL {list-style-type: lower-alpha} a b c osv
OL {list-style-type: upper-alpha} A B C osv
OL {list-style-type: lower-roman} i ii iii osv
OL {list-style-type: upper-roman} I II III osv
UL {list-style-image: url(bild.gif)} bild istället för punkter
UL {list-style-position: outside} hängande indrag
UL {list-style-position: inside} texten på nästa rad fortsätter i början av raden

UL {list-style: square outside} Förkortning av ovan nämnda egenskaperna

Upp | HTML-referensbok | Referensböcker

Valid HTML 4.0 dok.