Bu makalede HTML’de listeleme işlemlerini gösteren örnekler yer almaktadır.
Sıralı Liste
Sıralı liste oluşturmak için HTML’de `
- ` etiketi kullanılır. Bu etiketin içinde her bir liste elemanı `
- ` etiketiyle belirtilir. Örneğin, aşağıdaki kod ile HTML’de sıralı bir liste oluşturabilirsiniz:
- İlk liste elemanı
- İkinci liste elemanı
- Üçüncü liste elemanı
Yukarıdaki kodu kullanarak tarayıcıda aşağıdaki gibi bir sıralı liste görüntülenecektir:
- İlk liste elemanı
- İkinci liste elemanı
- Üçüncü liste elemanı
Her bir liste elemanı, `
- ` etiketiyle tanımlanır. Bu etiketin içerisinde liste elemanının içeriği yer alır. Sıralı listelerde numaralar otomatik olarak tanımlanır ve listede sıra numaralarıyla görüntülenir. Örneğin, yukarıdaki örnekte ilk liste elemanı sıra numarası 1, ikinci liste elemanı sıra numarası 2, üçüncü liste elemanı ise sıra numarası 3 ile gösterilmektedir.
Sıralı listeler genellikle sıralı bilgi veya adımların gösterimi için kullanılır. Örneğin, bir reçetenin maddelerini liste halinde göstermek veya numaralı adımlarla yapılması gereken bir işlemi açıklamak için sıralı listeler tercih edilebilir.
Numarasız Liste
=Numarasız bir liste oluşturmak için <ul> etiketi kullanılır ve her bir liste elemanı yine <li> etiketiyle belirtilir.
Numarasız liste, HTML’de listeleme işlemleri için önemli bir yapıdır. Bu liste türü, sıralı bir şekilde numaralandırılmadan sadece maddelerin sunulmasını sağlar. Numarasız liste oluşturmak için <ul> etiketi kullanılır ve her bir liste elemanı <li> etiketiyle belirtilir.
Örneğin, bir alışveriş listesi oluşturmak istediğinizi düşünelim. Kahve, çay, ekmek, tereyağı ve peynir gibi ürünleri belirtmek istediğinizde numarasız liste yapısını kullanabilirsiniz. Bunun için <ul> etiketiyle bir liste başlatılır ve her bir ürün <li> etiketiyle ayrı bir liste elemanı olarak eklenir. Sonuç olarak, kullanıcılarınıza liste şeklinde bu ürünleri sunabilirsiniz.
Numarasız listeler görsel olarak sıralama gerektirmeyen, ancak mantıksal bir gruplama veya kategorizasyonu temsil eden maddelerin sunulması için oldukça kullanışlıdır. HTML’de bu liste yapısını kullanmak, içeriği düzenli ve okunabilir hale getirirken aynı zamanda sayfanın yapısal bütünlüğünü korumanızı sağlar.
Gömülü Liste
Gömülü Liste
Bir liste içinde başka bir liste oluşturmak için gömülü liste yapısı kullanılır. İç içe geçmiş ‘
<ul>‘ ve ‘<ol>‘ etiketleriyle bu yapı oluşturulur. Gömülü liste, alt liste olarak da adlandırılır ve birden fazla seviyede listeleme yapılmasını sağlar. Bu yapı, belgenin hiyerarşik bir düzen içinde sunulmasını sağlar ve bilgilerin anlaşılabilirliğini arttırır.Sıralı Liste Numarasız Liste - Birinci madde
- İkinci madde
- Üçüncü madde
- İlk nokta
- İkinci nokta
- Üçüncü nokta
Gömülü listeler, iç içe kullanılarak daha karmaşık bir yapı oluşturabilir. Aşağıdaki örnek, hem sıralı listeyi hem de numarasız listeyi gömülü olarak kullanmaktadır:
- Birinci madde
- İkinci madde
- Alt nokta 1
- Alt nokta 2
- Üçüncü madde
Gömülü listeler, belgenin yapısını daha düzenli ve okunabilir hale getirirken, bilgilerin hiyerarşik olarak sunulmasını sağlar. Bu şekilde, kullanıcılar daha iyi bir deneyim yaşar ve aradıkları bilgilere daha kolay erişebilir.
Çok Düzeyli Gömülü Liste
Çok düzeyli gömülü listeler, birden fazla seviyeli listeler oluşturmak için kullanılır. Bu tür bir liste oluştururken her düzeydeki liste için ayrı
<ul>veya<ol>etiketi kullanılır. İlk düzey liste için<ul>veya<ol>etiketi kullanılırken, iç içe geçen listeler için her bir seviye için ayrı<ul>veya<ol>etiketi eklenir.Bir örnekle açıklamak gerekirse, aşağıdaki şekilde bir çok düzeyli gömülü liste oluşturulabilir:- Seviye 1, Öğe 1
- Seviye 1, Öğe 2
- Seviye 1, Öğe 3
- Seviye 2, Öğe 1
- Seviye 2, Öğe 2
- Seviye 2, Öğe 3
- Seviye 3, Öğe 1
- Seviye 3, Öğe 2
Bu örnekte, ilk düzey liste için
<ul>kullanılırken, ikinci ve üçüncü düzey listeler için<ul>etiketi kullanılmıştır. Bu şekilde, her seviyedeki öğeleri belirlemek ve görsel olarak açık bir şekilde hiyerarşiyi göstermek mümkündür.
