HTML Listeleme

Web sayfasında benzer öğelerin bir düzen içinde sıralı şekilde gösterimi için listeler kullanılır. Listeler <ol> ve <ul> tagları ile başlar ve her öğe <li> tagıları arasına yazılır. ul ve ol arasında gösterim farkı vardır.

<ol> sıralı liste, <ul> ise sırasız listedir. <ul> ve <ol> arasındaki fark öntanımlı sıralamada, birnde numaralı sıralama diğerinde ise daire kullanılmasıdır. <li> liste tagı her iki listede de kullanılır.

<ol> Örnek HTML Kodu

<ol>
    <li>Mavi</li>
    <li>Siyah</li>
    <li>Kırmızı</li>
    <li>Yeşil</li>
</ol>

1. Mavi
2. Siyah
3. Kırmızı
4. Yeşil

 Listedeki her öğenin başındaki rakam farlı gösterim şekilleri ile gösterilebilir. Bunun için <ol> type özelliğine aşağıdaki değerlerden biri verilebilir.

1: Öğeleri birden başlayarak numaralandırır. Öntanımlı değeri budur.
A: Her öğeye 'A'dan başlayarak büyük harf verir.
a: Her öğeye 'a'dan başlayarak küçük harf verir.
I: Her öğeye birden başlayarak büyük roma rakamı verir.
i: Her öğeye birden başlayarak küçük roma rakamı verir.

Listenin Roma Rakamı İle Gösterimi

<ol type="I">
    <li>Mavi</li>
    <li>Siyah</li>
    <li>Kırmızı</li>
    <li>Yeşil</li>
</ol>

Örnek kodun çıktısı:

1. Mavi
2. Siyah
3. Kırmızı
4. Yeşil

<ul> Örnek HTML Kodu

<ul>
    <li>Mavi</li>
    <li>Siyah</li>
    <li>Kırmızı</li>
    <li>Yeşil</li>
</ul>

<ul> örneğinin çıktısı:

• Mavi
• Siyah
• Kırmızı
• Yeşil

Listelerin CSS Özellikleri

Listedeki öğelerinin başında bulunan işaret CSS ile değiştirilebilir. <ul> ve <ol> elementlerinin her ikisi içinde geçerlidir. Liste öğelerinin başındaki işareti CSS list-style-type özelliğine değer vererek değiştirebiliriz. list-style-type özelliği için aşağıdaki değerlerden biri kullanılabilir.

disc : Daire.
circle : Çember.
square : Kare.
decimal : Birden başlayan rakam.
decimal-leading-zero : Rakamların başına sıfır yazılır.
lower-roman : Küçük Roma Rakamı.
upper-roman : Büyük Roma Rakamı.
lower-greek : Yunan alfabesi (küçük harf).
lower-latin : Latin alfabesi (küçük harf).
upper-latin : Latin alfabesi (büyük harf).
armenian : Armenian.
georgian : Gregorian.
lower-alpha : Küçük harf.
upper-alpha : Büyük harf.
none : Hiçbir işaret çıkmaz