HTML’de Liste Etiketleri (ul ol li)

Web sayfalarında bilgiyi düzenli, okunabilir ve hiyerarşik bir biçimde sunmak kullanıcı deneyimi açısından kritik bir öneme sahiptir. Metin blokları arasına sıkışmış maddeleri ayırt etmek zor olduğundan, tarayıcılara bu yapıların birer liste olduğunu bildirmemiz gerekir. HTML liste etiketleri, hem kullanıcıların içeriği daha rahat taramasını sağlar hem de arama motorları ile ekran okuyucu yazılımların sayfa yapısını doğru anlamasına yardımcı olur.

HTML Liste Yapısının Temelleri

HTML ortamında listeler oluşturulurken iki ana parça kullanılır: Listenin türünü belirleyen kapsayıcı etiket ve listenin içerisindeki maddeleri temsil eden etiket. Bir listenin sırasız mı yoksa sıralı mı olacağını belirlemek için kapsayıcı etiketler devreye girerken, her bir madde li etiketi ile sarmalanır.

Listelerin doğru kullanımı sadece görsel düzenleme sağlamaz, aynı zamanda semantik web standartlarına uygun bir kodlama yapısı sunar. Web sitelerindeki navigasyon menüleri, adım adım işlem rehberleri, ürün özellikleri ve kategori hiyerarşileri doğrudan liste etiketleri kullanılarak inşa edilir.

Liste Elemanı: li Etiketi

Açılımı “list item” olan li etiketi, her listenin yapı taşıdır. Kendi başına bağımsız olarak kullanılamaz; mutlaka bir kapsayıcı liste etiketinin (ul veya ol) doğrudan alt elemanı (child) olmak zorundadır. Tarayıcılar, li etiketlerini varsayılan olarak alt alta dizer ve ait oldukları kapsayıcıya göre başlarına bir simge veya numara ekler.

Sırasız Listeler: ul Etiketi

Açılımı “unordered list” olan ul etiketi, maddelerin diziliş sırasının bir önem taşımadığı durumlar için tercih edilir. Örneğin bir market alışverişi listesinde veya bir cihazın donanım özelliklerinde maddelerin hangi sırayla yazıldığı süreci değiştirmez.

Varsayılan tarayıcı stilinde ul etiketi, maddelerin başına içi dolu daireler (bullet points) yerleştirir ve sol taraftan belirli bir girinti uygular.

<ul>
  <li>HTML temel yapısı</li>
  <li>CSS stillendirme kuralları</li>
  <li>JavaScript programlama mantığı</li>
</ul>

Bu örnekte ul etiketi listeyi başlatır ve kapsar. İçerideki üç li elemanı ise sıralaması değiştiğinde anlamı bozulmayacak üç ayrı konuyu listeler. Tarayıcı bu listeyi maddelerin başında siyah birer nokta ile ekrana basacaktır.

Sıralı Listeler: ol Etiketi

Açılımı “ordered list” olan ol etiketi, liste maddeleri arasında mantıksal, kronolojik ya da aşamalı bir sıranın bulunduğu durumlarda kullanılır. Bir yemek tarifi, kurulum yönergesi veya bir yarışmanın ilk üç derecesi gibi maddelerin yer değiştirmemesi gereken durumlar için idealdir.

Tarayıcılar ol etiketini işlerken maddelerin başına varsayılan olarak artan sayılar (1, 2, 3…) yerleştirir.

<ol>
  <li>Sunucu bağlantısını kurun.</li>
  <li>Veritabanı yapılandırma dosyasını açın.</li>
  <li>Gerekli izinleri onaylayarak işlemi tamamlayın.</li>
</ol>

Yukarıdaki kod çalıştırıldığında adımlar otomatik olarak numaralandırılır. Maddeler arasına sonradan yeni bir li elemanı eklendiğinde tarayıcı tüm numaraları kendiliğinden günceller, manuel olarak sayı yazma ihtiyacı ortadan kalkar.

Sıralı Listelerde Kullanılan Nitelikler

Sıralı listelerin davranışlarını ve görünümünü HTML öznitelikleri (attributes) ile değiştirmek mümkündür.

• type niteliği: Numaralandırma türünü belirler. Varsayılan rakamlar yerine büyük harf (A), küçük harf (a), Roma rakamları (I veya i) atanabilir.
• start niteliği: Listenin birden değil, belirtilen herhangi bir sayısal değerden başlamasını sağlar.
• reversed niteliği: Listenin geriye doğru sayılmasını sağlar.

<ol type="A" start="3">
  <li>Üçüncü aşama</li>
  <li>Dördüncü aşama</li>
</ol>

Bu örnekte type özniteliğine “A” verilerek alfabetik sıralama seçilmiş, start değerine “3” verilerek listenin alfabenin üçüncü harfi olan “C” harfinden başlaması sağlanmıştır.

İç İçe Listeler (Nested Lists)

Karmaşık bilgi mimarilerinde bir liste maddesinin altında alt kategorilerin yer alması gerekebilir. HTML’de iç içe liste oluştururken yapılan en yaygın hata, yeni bir ul veya ol etiketini doğrudan kapsayıcı listenin içine koymaktır. Doğru standart, alt listenin bir li etiketinin içine yerleştirilmesidir.

<ul>
  <li>Frontend Teknolojileri
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend Teknolojileri
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Bu kod yapısında “Frontend Teknolojileri” isimli li etiketi kapanmadan hemen önce yeni bir ul listesi açılmıştır. Tarayıcı bu hiyerarşiyi algılar ve alt listeyi daha içeriden başlatarak genellikle madde imi simgesini farklılaştırır (örneğin içi boş daireye dönüştürür).

Liste Etiketlerinin CSS ile Özelleştirilmesi

Modern web tasarımında liste etiketleri yalnızca metin sıralamak için değil, menü ve navigasyon çubukları (navbar) geliştirmek için de standart kabul edilir. Ancak bu tasarımlarda varsayılan nokta simgelerine ve kenar boşluklarına ihtiyaç duyulmaz.

CSS kullanarak listelerin varsayılan davranışları kolayca sıfırlanabilir ve yatay bir düzen oluşturulabilir.

ul.ozel-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 15px;
}

Bu CSS bloğu bir menüye uygulandığında:

• list-style-type özelliği none yapılarak baştaki noktalar gizlenir.
• margin ve padding değerleri sıfırlanarak tarayıcının varsayılan girintileri kaldırılır.
• display özelliği flex yapılarak alt alta dizilen maddelerin yatayda yan yana gelmesi sağlanır.
• gap özelliği ile menü elemanları arasında düzenli boşluk bırakılır.

Semantik Web ve Erişilebilirlik Açısından Önemi

Birbirini takip eden bağlantıları veya metinleri salt span veya div etiketleriyle alt alta getirmek görsel olarak bir liste gibi algılanabilir; fakat yazılımsal olarak bir liste niteliği taşımaz. Ekran okuyucu kullanan görme engelli bir ziyaretçi sayfayı incelerken, doğru kodlanmış bir html liste yapısıyla karşılaştığında sistem “Bu liste 5 öğeden oluşuyor” gibi net bir bildirim yapar. Bu durum kullanıcıların sayfada nerede olduğunu anlamalarını kolaylaştırır.

Özet ve Sonraki Adımlar

HTML’de ul etiketi sırasız, ol etiketi ise sıralı listelerin kapsayıcısıdır. Her iki yapıda da listenin elemanları li etiketi ile tanımlanır. Kodlama yaparken li etiketlerinin doğrudan liste kapsayıcısı altında yer almasına ve iç içe listelerde doğru hiyerarşinin kurulmasına dikkat edilmelidir.

Bir sonraki adımda, liste etiketlerini nav etiketi ile birleştirip CSS Flexbox özelliklerini kullanarak tamamen responsive bir site menüsü kodlamayı deneyebilirsiniz.