HTML Listeler: ul, ol, li, dl, dt, dd ve menu Öğeleri

ul: sırasız liste

<ul> sıranın önemli olmadığı maddeleri gruplar. Maddeler genellikle bir madde işaretiyle (nokta, daire ya da kare) gösterilir; ancak işaretin biçimi HTML'de değil, CSS'in list-style-type özelliğiyle belirlenir. İzin verilen içeriği sıfır ya da daha fazla <li>, <script> ve <template> öğesidir; yani <ul> öğesinin doğrudan çocuğu olarak düz metin, <p> ya da <div> yazılamaz. Başlangıç ve bitiş etiketleri zorunludur.

<p>Kahve demlemek için gerekenler:</p>
<ul>
  <li>Taze çekilmiş kahve</li>
  <li>Filtre kağıdı</li>
  <li>Sıcak su</li>
</ul>

Eski compact ve type (circle, disc, square) öznitelikleri kullanımdan kalkmıştır. MDN, type yerine list-style-type özelliğinin, compact yerine de CSS'in kullanılmasını söyler. type verilmez ve bir CSS kuralı da uygulanmazsa tarayıcı madde işaretini listenin iç içe geçme düzeyine göre seçer.

ol: sıralı liste ve öznitelikleri

<ol> sıranın anlam taşıdığı maddeler içindir. MDN'nin verdiği örnekler bir tarifin adımları, adım adım yol tarifi ve besin etiketlerinde azalan oranla sıralanan içerik listesidir. Maddeler varsayılan olarak bir sayı ya da harfle gösterilir. <ol> üç önemli öznitelik kabul eder:

<p>Yarışmayı ilk üçün dışında bitirenler:</p>
<ol start="4">
  <li>Ayşe</li>
  <li>Mehmet</li>
  <li>Zeynep</li>
</ol>

<p>Geri sayım:</p>
<ol reversed>
  <li>Hazırlık</li>
  <li>Kontrol</li>
  <li>Başlangıç</li>
</ol>

İlk liste 4'ten başlayarak 4, 5, 6 diye numaralanır. İkinci listede reversed bulunduğu için numaralar büyükten küçüğe iner. start değerinin her zaman sayı olduğuna dikkat edin: Roma rakamlarıyla 'iv' den başlamak istiyorsanız type="i" ile birlikte start="4" yazarsınız.

type özniteliği konusunda MDN önemli bir ayrım yapar: numaralandırma türü belgenin anlamı için önemliyse (örneğin maddelere numarası ya da harfiyle atıf yapılan hukuki veya teknik belgelerde) type kullanın; yalnızca görünüm için seçiyorsanız CSS'in list-style-type özelliğini tercih edin.

<p>Sözleşmenin ekleri:</p>
<ol type="A">
  <li>Teknik şartname</li>
  <li>Fiyat cetveli</li>
  <li>Teslim takvimi</li>
</ol>

Bu örnekte maddelere metnin başka bir yerinde 'Ek B' gibi harfle atıf yapılacağı için harf türü anlamın parçasıdır ve type="A" doğru seçimdir.

li: liste maddesi ve value özniteliği

<li> bir listedeki maddeyi temsil eder ve bir <ol>, <ul> ya da <menu> öğesinin içinde bulunmak zorundadır. İzin verilen içeriği flow içeriktir; yani bir madde paragraf, görsel, başka bir liste hatta form içerebilir. Bitiş etiketi, maddenin hemen ardından başka bir <li> geliyorsa ya da üst öğede başka içerik kalmamışsa yazılmayabilir; yine de okunabilirlik için yazmanızı öneririz.

value özniteliği, bir <ol> içindeki maddenin sıra değerini belirleyen bir tam sayıdır. Liste Roma rakamı ya da harfle gösterilse bile değer sayı olarak yazılır ve sonraki maddeler bu değerden itibaren numaralanmaya devam eder. Sırasız listede ve <menu> içinde bu özniteliğin bir anlamı yoktur. <li> üzerindeki type özniteliği ise kullanımdan kalkmıştır.

<ol>
  <li>Siparişi oluşturun</li>
  <li>Ödemeyi yapın</li>
  <li value="5">Kargoyu takip edin</li>
  <li>Ürünü teslim alın</li>
</ol>

Bu listede üçüncü madde 5 olarak numaralanır, ardından gelen madde de 6 olur. Bu teknik, örneğin bir listenin araya açıklama paragrafı girdiği için iki parçaya bölündüğü durumlarda numarayı sürdürmek için kullanılabilir; aynı iş <ol> üzerindeki start ile de yapılabilir.

İç içe listeler

<ul> ve <ol> (ya da onun eş anlamlısı <menu>) istenildiği kadar derin iç içe kullanılabilir ve türler birbirinin içinde serbestçe karışabilir. Tek kural şudur: alt liste, üst listenin bir <li> öğesinin içine yazılır. Bir liste öğesi doğrudan başka bir <ul> ya da <ol> öğesinin çocuğu olamaz. MDN örneklerinde bu yüzden kapanış </li> etiketinin alt listeden sonra geldiği özellikle vurgulanır:

<ol>
  <li>Malzemeleri hazırlayın
    <ul>
      <li>Kahve</li>
      <li>Su</li>
    </ul>
  </li>
  <li>Suyu ısıtın</li>
  <li>Demleyin</li>
</ol>

Sık yapılan hata, alt listeyi iki <li> arasına, doğrudan <ol> içine yazmaktır. Bu işaretleme geçersizdir, çünkü <ol> öğesinin izin verilen içeriği yalnızca <li>, <script> ve <template> öğeleridir; ayrıca alt listenin hangi maddeye ait olduğu yapıdan anlaşılamaz.

dl, dt ve dd: tanım listesi

<dl> terim ve açıklama gruplarından oluşan bir açıklama listesidir. Terimler <dt>, açıklamalar <dd> ile yazılır. MDN'nin belirttiği yaygın kullanımlar bir sözlük (glossary) oluşturmak ve ad-değer çiftlerinden oluşan meta verileri göstermektir. Gruplar esnektir: bir terime birden fazla açıklama, birden fazla terime tek açıklama verilebilir.

<dl>
  <dt>HTML</dt>
  <dd>Web sayfalarının yapısını ve anlamını tanımlayan işaretleme dili.</dd>

  <dt>Tarayıcı</dt>
  <dt>Web tarayıcısı</dt>
  <dd>Web sayfalarını indirip görüntüleyen program.</dd>

  <dt>Çerez</dt>
  <dd>Sitenin tarayıcıda sakladığı küçük veri parçası.</dd>
  <dd>Fırında pişirilen küçük, tatlı bir hamur işi.</dd>
</dl>

İlk grupta bir terim ve bir açıklama, ikinci grupta aynı şeyi anlatan iki terim ve tek açıklama, üçüncü grupta bir terim ve iki farklı açıklama vardır. Teknik özete göre <dt> içine flow içerik konabilir, ancak <header>, <footer>, bölümleme içeriği ya da başlık öğesi konamaz; <dd> ise herhangi bir flow içerik alabilir.

Ad-değer çiftlerini gösterirken her grubu bir <div> ile sarmak da geçerlidir. MDN bunun microdata kullanırken, bir gruba global öznitelik vermek istediğinizde ya da stil amacıyla işe yarayabileceğini belirtir. Bu durumda <dl> içinde yalnızca <div> öğeleri (ve <script>/<template>) bulunur; iki yazımı aynı listede karıştırmayın.

<dl>
  <div>
    <dt>Ürün</dt>
    <dd>Filtre kahve makinesi</dd>
  </div>
  <div>
    <dt>Kapasite</dt>
    <dd>1,2 litre</dd>
  </div>
  <div>
    <dt>Garanti</dt>
    <dd>2 yıl</dd>
  </div>
</dl>

Erişilebilirlik açısından MDN, her ekran okuyucunun <dl> içeriğini farklı sunduğunu (toplam madde sayısı, terim-açıklama bağlamı ve gezinme yöntemleri) ve bu farkların hata olmadığını not eder. VoiceOver'ın tanım listelerini nasıl duyurduğuna dair notlar da sayfada yer alır; term ve definition ARIA rollerini <dl> yapılarına eklerken dikkatli olmanız önerilir.

menu: komut listesi

<menu> HTML belirtiminde <ul> öğesinin anlamsal bir alternatifi olarak tanımlanır, ancak MDN'ye göre tarayıcılar onu <ul> ile aynı şekilde ele alır ve erişilebilirlik ağacında da aynı biçimde sunar. Aradaki fark amaçtadır: <ul> ağırlıklı olarak gösterilecek maddeleri, <menu> ise kullanıcının çalıştırabileceği komutlardan oluşan bir araç çubuğunu temsil eder. İçeriği <ul> gibi <li>, <script> ve <template> öğeleridir.

<menu>
  <li><button type="button">Kopyala</button></li>
  <li><button type="button">Kes</button></li>
  <li><button type="button">Yapıştır</button></li>
</menu>

MDN, HTML belirtiminin erken sürümlerinde <menu> öğesinin bağlam menüsü olarak da kullanıldığını, bu işlevin artık eski sayıldığını ve belirtimde yer almadığını belirtir. Düğmelerin kendisi HTML button etiketi yazısında anlatılıyor.

Listeler ve erişilebilirlik: list ve listitem rolleri

MDN teknik özetlerine göre <ul>, <ol> ve <menu> öğelerinin örtük ARIA rolü list, <li> öğesinin rolü ise listitem olarak tanımlanır. Yani yerel liste öğelerini kullandığınızda yardımcı teknolojiler içeriği ek bir işaretleme gerekmeden liste ve liste maddesi olarak tanır. Bu yüzden içerik gerçekten bir listeyse onu <p> ve <br> ile değil, liste öğeleriyle yazmak gerekir.

ARIA'da bir <div> öğesine role="list", içindekilere role="listitem" vererek liste oluşturmak mümkündür. MDN'nin ARIA list rolü sayfası ise bunu yalnızca HTML'i değiştiremediğiniz, erişilebilirliği sonradan JavaScript ile iyileştirmek zorunda kaldığınız durumlar için önerir. Ayrıca ARIA'nın list rolü sıralı ve sırasız liste arasında ayrım yapmaz; <ol> ile <ul> arasındaki anlam farkı yalnızca yerel HTML öğeleriyle korunur.

Aynı sayfada dikkat çekici bir ayrıntı daha vardır: bir <ul> ya da <ol> öğesine role="presentation" verirseniz, ARIA liste maddelerinin bir liste üst öğesi gerektirmesi nedeniyle içindeki <li> öğeleri de bu rolü devralır ve yardımcı teknolojilere madde olarak sunulmaz; ancak maddelerin içindeki öğeler (iç içe listeler dahil) görünmeye devam eder. Sekmeli bir arayüz kuruyorsanız liste rolleri yerine tablist, tab ve tabpanel rolleri kullanılır. ARIA'nın genel kuralları için ARIA nedir yazısına bakın.

Uygulamalı örnek: hangi liste?

Bir ürün sayfasını düşünün. Ürünün öne çıkan özellikleri (sessiz çalışma, zaman ayarı, otomatik kapanma) hangi sırayla yazılırsa yazılsın aynı anlamı taşır, bu yüzden <ul> uygundur. Kurulum adımları ise sırayla yapılmalıdır; adımların yeri değişirse talimat bozulur, bu yüzden <ol> gerekir. Teknik özellikler (kapasite, güç, ağırlık) birer ad ve değer çiftidir; <dl> bu yapıyı en doğru şekilde ifade eder. Ürün kartının altındaki 'Sepete ekle', 'Karşılaştır', 'Paylaş' komutları ise kullanıcının çalıştırdığı eylemlerdir ve <menu> içinde düğmeler olarak yazılabilir. Aynı sayfada dört farklı liste öğesini görmek olağandır; her biri içeriğin farklı bir yapısını anlatır.

Sık yapılan hatalar

• Alt listeyi li dışına yazmak: iç içe liste, üst maddenin <li> öğesinin içinde olmalıdır.
• ul içine doğrudan metin ya da div koymak: <ul> ve <ol> yalnızca <li>, <script> ve <template> alır.
• Listeyi girinti için kullanmak: MDN, <dl> ya da <ul> öğelerinin yalnızca girinti oluşturmak için kullanılmasının anlamı bozan kötü bir uygulama olduğunu söyler; girinti için CSS'in margin özelliği kullanılır.
• Görünüm için type kullanmak: numaralandırma türü anlam taşımıyorsa list-style-type tercih edilir; <ul> ve <li> üzerindeki type zaten kullanımdan kalkmıştır.
• start değerini harfle yazmak: start ve value her zaman sayıdır.
• Sıralı içeriği ul ile yazmak: adımları ya da sıralamaları <ul> ile yazmak sıra bilgisini kaybettirir.

Sık Sorulan Sorular

Madde işaretlerini kaldırmak için ne yapmalıyım?

Madde işaretinin biçimi HTML'de değil CSS'te, list-style-type özelliğiyle belirlenir. Listeyi başka bir öğeyle değiştirmek yerine işaretleri CSS ile gizleyin; içerik bir liste olduğu sürece <ul> ya da <ol> kullanmaya devam edin.

start ve value için hangi değerler yazılabilir?

MDN start değerini bir tam sayı, value değerini de tam sayı olarak tanımlar. Değerin her zaman Arap rakamıyla yazıldığını, liste harf ya da Roma rakamıyla gösterilse bile böyle olduğunu unutmayın.

Menü bağlantıları için ul mi, menu mü kullanmalıyım?

Sitenin gezinme bağlantıları için <nav> içinde bir <ul> yaygın ve doğru bir yapıdır. <menu> ise MDN'ye göre kullanıcının çalıştıracağı komutlardan oluşan bir araç çubuğu içindir. Tarayıcılar ikisini aynı şekilde ele aldığı için fark anlamsaldır.

Liste maddesinin içine paragraf, görsel veya başlık koyabilir miyim?

Evet. <li> öğesinin izin verilen içeriği flow içeriktir; bu yüzden bir madde paragraf, görsel, başlık, başka bir liste ya da form alanı içerebilir. Kısıt listenin kendisindedir: <ul> ve <ol> öğelerinin doğrudan çocukları yalnızca <li>, <script> ve <template> olabilir. Yani içerik her zaman bir <li> içine yazılır.

dl yerine tablo kullanmak daha mı doğru?

Tek bir nesnenin ad-değer çiftleri için <dl> uygundur. Satır ve sütunlardan oluşan, birden fazla nesneyi karşılaştıran veriler ise tablodur; onun için HTML tablo oluşturma yazısına bakın.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · HTML semantik etiketler · HTML tablo oluşturma · HTML button etiketi · sık yapılan HTML hataları