HTML UL, OL, LI Liste Elementleri Nedir, Örnekli Nasıl Kullanılır?

HTML liste elemanlarını galeri, menü oluşturmaktan çok genel işlevi olan listeleme türleri ve şekilleri üzerinde yüzeysel olarak duracağız. Makale devamında liste oluşturma için kulladığımız örnek kodlar ve çıktılarından göreceğiniz gibi nasıl liste oluşturulur ve farklı türde listeler nasıl oluşturulur gibi sorulara cevap vereceğiz.

HTML UL, OL, LI Liste Elementleri Nedir, Örnekli Nasıl Kullanılır?

HTML UL, OL, LI Liste Elementleri Nedir, Örnekli Nasıl Kullanılır?

Klasik bir listeleme oluşturmak için yapmanız gereken eğer sırasız liste(disk, square, circle) oluşturacaksanız ul(Unordered List) etiketini kullanmalısınız fakat sıralı(1,2,3 veya A,B,C) şeklinde listeleme oluşturmak için yapmanız gereken ol(Ordered List) etiketini kullanmaktır.

Unordered List

Örnek(Html)

Unordered list etiketi kullanıldığında her ne kadar tarayıcının default’una göre değişsede default liste türü disk’dir.

Unordered List’de kullanılabilecek diğer liste türleri şöyledir.

Liste TürüAçıklama
diskDefault olarak bu kullanılmaktadır type attribute’ünü kullanmasanızda olur disk değeri için, liste görünümü içi dolu daire şeklinde olmaktadır.
squareListe türünü kareli olarak göstermek için kullanılmaktadır.
circledisk’den farklı yanı içi boş daire şeklinde listeleme yapılmaktadır.

Ordered List

Örnek(Html)

Ordered List’de kullanılabilecek diğer liste türleri şöyledir.

Liste TürüAçıklamaÖrnek
A veya upper-alphaAlfabe’ye göre A-dan Z-ye kadar Büyük harflerle sıralı liste oluşturmak için kullanabilirsiniz.A, B, C
a veya lower-alphaAlfabe’ye göre a-dan z-ye kadar Küçük harflerle sıralı liste oluşturmak için kullanabilirsiniz.a, b, c
I veya upper-romanRoman alfabesine göre Büyük harflerle sıralı liste oluşturabilirsiniz.I, II, III
i veya lower-romanRoman alfabesine göre Küçük harflerle sıralı liste oluşturabilirsiniz.i, ii, iii
1 veya decimalSayısal olarak sıralı liste oluşturabilirsiniz.1, 2, 3
decimal-leading-zeroSayılsal olarak sıralı liste oluşturur ve tek haneli sayılara başına sıfır ekleyerek gösterir(CSS ile list-style-type değeri değiştirilerek kullanılabilir.)01, 02, 03

📚 HTML Liste Benzeri Makaleler


✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki makalede görüşmek dileğiyle.

5/5 - (2 votes)