Förord

Listor är ett underskattat hjälpmedel för att få ordning på sin HTML. Här följer en guide för listor.

Innehåll

  » Exempel på listor
  » Punktlista
  » Nivåer
  » Numrerad lista
  » Definitionslista
  » Blandade listor

Exempel på listor

Punktlista
* Ett
* Två
* Tre
* Fyra
Numrerad: 1 2 3

1. Ett
2. Två
3. Tre
4. Fyra

Numrerad: A B C

A. Ett
B. Två
C. Tre
D. Fyra

Numrerad: I II III

I. Ett
II. Två
III. Tre
IV. Fyra

Definitionslistor är listor utan punkter eller numrering

Ett
Två
Tre
Fyra

Punktlista

En lista med punkter skrivs mellan

och

Det som ska listas skrivs mellan

och

Så här:

• Ett


• Två


• Tre

* Ett
* Två
* Tre

Radbrytningen sker automatiskt!
Med CSS kan man också ersätta punkterna med egna bilder! Detta går jag inte igenom här.

Nivåer

Man kan också göra en lista i flera nivåer!

Så här kan det se ut:

• Ett


• Två


• Tre
  
  
  
  • Trekommaett
  
  
  • Trekommatvå
  
  
  • Trekommatre
  
  
  
  

* Ett
* Två
* Tre
o Trekommaett
o Trekommatvå
o Trekommatre

Numrerad lista

En numrerad lista fungerar på samma sätt som en punktlista men skrivs mellan taggarna

och

Det som ska listas skrivs fortfarande mellan

och

Så här:

1. Ett


2. Två


3. Tre

1. Ett
2. Två
3. Tre

Fler varianter

En numrerad lista behöver inte vara numrerad... Med CSS kan du förändra utseendet så att siffrorna blir bokstäver eller romerska siffror i stället!

Så här ser det ut:
A. Ett
B. Två
C. Tre
D. Fyra

I. Ett
II. Två
III. Tre
IV. Fyra

Definitionslista

Man kan också skapa listor utan punkter eller numrering. Detta är användbart när informationen inte nödvändigtvis har en inbördes ordning. En definitionslista som skrivs mellan

och

Listans stycken definieras med

och med

kan man skapa en rubrik för varje stycke.

Godis

Är gott men inte särskilt bra för tänderna

HTML

Är ganska enkel när man får öva lite

CSS

Hjälper till att snygga upp och förenkla din HTML

Så här skulle det kunna bli:

Godis
Är gott men inte särskilt bra för tänderna
HTML
Är ganska enkel när man får öva lite
CSS
Hjälper till att snygga upp och förenkla din HTML

Blandade listor

Det går bra att blanda olika listtyper. Här är ett exempel:
Inför resan

1. Köp biljett


2. Packa


3. Kolla:
   
   
   
   • Spisen
   
   
   • Fönstren
   
   
   
   


4. Beställ taxi!


5. Lås dörren!

Ha så kul!!

Blir så här:
Inför resan

1. Köp biljett
2. Packa
3. Kolla:
* Spisen
* Fönstren
4. Beställ taxi!
5. Lås dörren!

Ha så kul!!

0 Kommentarer

Skriv en kommentar på artikeln

Ditt betyg på artikeln

UtmärktLäsvärdIntressantMindre braDålig

Kommentar: