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?
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 |
|---|---|
| disk | Default 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. |
| square | Liste türünü kareli olarak göstermek için kullanılmaktadır. |
| circle | disk’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-alpha | Alfabe’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-alpha | Alfabe’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-roman | Roman alfabesine göre Büyük harflerle sıralı liste oluşturabilirsiniz. | I, II, III |
| i veya lower-roman | Roman alfabesine göre Küçük harflerle sıralı liste oluşturabilirsiniz. | i, ii, iii |
| 1 veya decimal | Sayısal olarak sıralı liste oluşturabilirsiniz. | 1, 2, 3 |
| decimal-leading-zero | Sayı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.
