HTML Liste (HTML List)
HTML dökümanlarında liste etiketleri pek çok amaç için kullanılmaktadır. Liste şeklinde görüntülenecek verilerden tutun da HTML sayfalarındaki menü gibi yapıları oluşturmaya varıncaya kadar kullanılabilmektedir.
HTML Liste Oluşturma
HTML üç farklı tür liste tipi sağlar. Bunlar sırayla:
- Sırasız liste (Unordered list)
- Sıralı liste (Ordered list)
- Tanımlı liste (Definition list)
HTML Sırasız liste ( HTML Unordered list)
HTML’de sırasız liste, unordered list kelimelerinin baş harfleri olan <ul> elementi ile oluşturulur. Liste içindeki elemanlar ise list item kelimelerinin baş harfleri olan <li> elementi ile oluşturulur:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Liste öğe işaretcisi varsayılan olarak tarayıcıdan içi dolu yuvarlak şeklinde yukarıdaki gibidir. Bunu pekala CSS ile list-style-type özniteliğini kullanarak değiştirebiliriz:
| Değer | Görev |
|---|---|
| disc | İçi dolu yuvarlak |
| circle | İçi boş yuvarlak |
| square | İçi dolu kare |
| none | İşaretçi yok |
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
HTML Sıralı Listeleme (Ordered list)
Sıralı liste, ordered list kelimelerinin baş harfleri olan <ol> elementi ile oluşturulur. Liste içindeki elemanlar ise benzer şekilde <li> elementi ile oluşturulur.
Varsayılan olarak, sıralı bir liste 1’den saymaya başlar. Belirli bir sayıdan saymaya başlamak istiyorsanız, start özniteliğini kullanabilirsiniz:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
HTML belgelerinde sıralı liste oluştururken illede sayıların kullanılması gerekmez. Type özniteliği ile aşağıdaki gibi tablodaki gibi değişiklikler yapılabilir:
| Type | Görev |
|---|---|
| type=”1″ | Listeleme sayılar ile yapılır |
| type=”A” | Listeleme büyük harfler ile yapılır |
| type=”a” | Listeleme küçük harfler ile yapılır |
| type=”I” | Listeleme büyük roma rakamları ile yapılır |
| type=”i” | Listeleme küçük roma rakamları ile yapılır |
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
HTML Tanımlı Liste (Definition list)
Tanımlı listeleme (Definition lists) diğer iki listeleme türünden farklıdır. Zira alt kategorilere ayırarak kategorik bir listeleme yapmak mümkün.
Definition list kelimelerinin baş harflerinden türetilen <dl> elementi ile tanımlı liste oluşturulur. Beraberinde definition term kelimelerinin baş harfleri olan <dt> etiketi ile listelenecek öğelere başlık verilirken <dd> ile liste elemanları yazılır.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
İç İçe Listeler (Nested List)
HTML dökümanlarında listeler pekala iç içe de yerleştirilebilir:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.