HTML Listeler

HTML Listeleme etiketlerini pek çok amaç için kullanırız.

Öncelikle elimizde liste şeklinde görüntülenecek veri varsa listeleme etiketleri ile biçimlendirebiliriz.

Ayrıca HTML sayfalardaki menü gibi yapıları oluştururken de listeleme etiketlerinden faydalanırız.

HTML'de üç tür liste vardır:

• Sıralı Liste
• Sırasız Liste
• Tanımlı Liste

HTML Sırasız Liste

HTML sırasız liste <ul> etiketi ile başlar. Liste içindeki elemanlar <li> etiketi ile yazılır.

<ul>
 <li>İstanbul</li>
 <li>Ankara</li>
 <li>İzmir</li>
</ul>

Liste öğe işaretcisi istenirse değiştirilebilir. Bunun için CSS'den faydalanabiliriz.

Sırasız Listeleme Liste Öğe İşaretcisi Değiştirme

CSS list-style-type özelliği ile işaretcinin görünümü değiştirilebilir.

<ul style="list-style-type:square">
  <li>Elma</li>
  <li>Armut</li>
  <li>Kiraz</li>
</ul> 

HTML Sıralı Listeleme

HTML sıralı liste <ol> etiketi ile başlar. Liste içindeki elemanlar <li> etiketi ile yazılır.

<ol>
  <li>Galatasaray</li>
  <li>Fenerbahçe</li>
  <li>Beşiktaş</li>
</ol> 

Sıralı Listeleme Type Özniteliği

Sıralı listelemede sıralama yaparken sadece sayılar kullanılmaz. Type özniteliği ile işaretci türü değiştirilebilir.

<ol type="A">
  <li>Uçak</li>
  <li>Araba</li>
  <li>Gemi</li>
</ol> 

HTML Tanımlı Liste

Tanımlı listeleme diğer iki listeleme türünden biraz farklıdır.

Bu listeleme türünde, listelenecek öğelere başlık eklemek mümkündür.

Tanımlı listede, <dl> ile tanımlı liste oluşturulur. <dt> etiketi ile listelencek öğelere başlık verilir, <dd> ile liste elemanları yazılır.

<dl>
  <dt>İçecekler</dt>
  <dd>Kahve</dd>
  <dd>Çay</dd>
  <dd>Su</dd>
  <dt>Tatlılar</dt>
   <dd>Baklava</dd>
   <dd>Sütlaç</dd>
   <dd>Tiramisu</dd>
</dl>