HTML Listeleri

Malzeme menüleri, sabah rutinleri, özellik madde işaretleri ve paket kontrol listeleri liste olarak taranması daha kolaydır. HTML iki günlük yapı sunar: sırasız ve sıralı listeler. Plug-in uyarısından sonra (tarihçe, kod örneği yok) bu oturum neredeyse her içerik sayfasında yeniden kullanacağınız pratik işaretlemeye döner. Listeleri grup ve sıra anlamı olarak düşünün — çok sütunlu layout kısayolu olarak değil.

Listeler ne işe yarar

Liste, ilgili öğeler grubunu bir grup olarak işaretler. Tarayıcılar ve yardımcı teknolojiler kaç öğe olduğunu duyurabilir ve tek tek gezebilir. Bu yapı göz atmaya, taslaklara ve tariflere yardım eder. Madde işaretlerini düz paragraflarda rastgele tirelerle taklit ederseniz veya ul öğesini yalnızca metni görsel sütunlara itmek için gererseniz anlam kaybolur. İçerik gerçekten bir küme veya sıra olduğunda liste işaretlemesini seçin. Süs boşluğunu ve grid layout'u sonra CSS'e bırakın.

Doğrudan yanıt

• ul — sırasız liste (tarayıcıda varsayılan madde işareti)
• ol — sıralı liste (varsayılan numaralar)
• li — her liste öğesi
  Alt öğe gerektiğinde başka bir ul veya ol öğesini bir li içinde yuvalayın. li öğesini üst listenin dışında bırakmayın. Kapanış etiketleri, özellikle bir adımın altına alt liste ekledikten sonra, açılışın ters sırasıyla yuvalanmalıdır.

Ne zaman hangi liste

Sonra CSS'in ekleyeceğini umduğunuz görünüme değil, yazdığınız fikre uyan öğeyi seçin. Madde işaretleri ve numaralar varsayılan sunumlardır; HTML kararı sıranın anlamın parçası olup olmadığıdır.

Sırasız liste

Alışveriş tarzı madde işaretli liste klasik ul demosudur. Her öğe bir lidir. Öğeler eş düzeydeyse buradan başlayın — meyve adları, hobi etiketleri veya dersi bozmadan karıştırılabilecek özellik vurguları.

Sırasız örneği okumak

• ul sırasız liste kabını açar
• Her li o gruptaki bir öğedir
• Kapanış etiketleri doğru yuvalanmalı: ul kapanmadan önce her liyi bitirin
• Varsayılan madde işaretleri tarayıcı stilidir; sonra CSS işaretçileri değiştirebilir ama HTML anlamı «sırasız küme» kalır
• Boş li ve eksik kapanışlar yaygın yazım hatalarıdır — yakalamak için sayfayı erken görüntüleyin

Yuvalanmış alt listeli sıralı liste

Numaralı adımlar sık sık bir adımın altında küçük bir madde grubuna ihtiyaç duyar — oluşturulacak dosyalar, açılacak araçlar veya yalnızca o adımın malzemeleri. İç listeyi tüm olün yanında kardeş olarak değil, o adımın lisi içinde koyun. Dış numaralar okunaklı kalır, iç madde işaretleri ayrıntıyı netleştirir.

Yuvalanmış örneği okumak

• Dış ol ana adımları sırayla numaralandırır
• İkinci li giriş metni artı bir çocuk ul içerir
• İç li öğeleri yuvalanmış ulye aittir; o ul, üst li kapanmadan önce kapanır
• Üçüncü adım, yuvalanmış blok bittikten sonra dış sıralı diziyi sürdürür
• Bu kalıp daha derin yuvalara ölçeklenir ama aç/kapa sırası açık kalsın diye yeni başlayan ağaçlarını sığ tutun
• Numaralar «yanlış» görünüyorsa, bir linin erken kapanıp yuvalanmış listeyi dışarı itip itmediğini kontrol edin

Önce anlam, sonra stil

Tarayıcılar ekstra CSS olmadan madde işareti ve numara çizer. Bu kolaylık listeleri girinti makineleri veya sahte kenar çubukları olarak kötüye kullanmaya iter. Burada direnin. İçerik bir küme veya sıra ise, işaretçileri yeniden stillendirmeden önce bile liste işaretlemesi doğru anlamsal seçimdir. Yan yana kartlar, nav çubuğu ızgarası veya dergi sütunları istiyorsanız CSS ve yapısal layout derslerini bekleyin — menüler bazen sonra dikkatli stille listeleri kullandığı için ulyi sayfa iskeletine çevirmeyin.

Erişilebilirlik ve tarama alışkanlıkları

Listeler göz atmaya yardım eder ve yardımcı teknolojinin «üç öğelik liste» gibi ifadeler duyurmasına yardım eder. Mümkün olduğunda her liyi bir fikre odaklayın. İçerik gerçekten o derinliği gerektirmediği sürece her öğeye büyük ilgisiz paragraflar sıkıştırmayın. Yalnızca hiyerarşi gerçek olduğunda yuvalayın — yalnızca girinti için sahte yuvalama hem insanları hem araçları şaşırtır. Listenin üstündeki kısa bir başlık çoğu zaman ilk madde işaretinden önce grubun ne hakkında olduğunu netleştirir.

Editörünüzde alıştırma

1. Üç hobiden (veya üç yiyecekten — öğeleri kısa tutun) bir ul yapın.
2. Gerçekten yaptığınız sırayla üç sabah adımından bir ol yapın.
3. Bu lilerden birinin altına küçük bir ul yuvalayın (örneğin açılacak dosyalar veya alınacak araçlar).
4. Zihinsel doğrulayın: her li bir ul veya ol içindedir; yuvalanmış listeler bir li içindedir.
5. Bir listenin türünü değiştirin (ul ↔ ol) ve anlamın hâlâ içeriğe uyup uymadığını sorun.
6. Sayfayı tarayıcıda görüntüleyin ve henüz CSS yazmadan madde/numara göründüğünü doğrulayın.
7. Bilerek bir kez yuvayı bozun, outline'ın ne kadar yanlış göründüğünü not edin, sonra kapanışları düzeltin.

Kolay hatalar

• Herhangi bir ul/ol dışında li yazmak (yetim öğeler)
• Listeleri yalnızca rastgele paragrafları girintilemek veya sahte sütunlar için kullanmak
• Yuvalanmış listeleri doğru sırada kapatmayı unutmak
• Yuvalanmış ulyi bir li içinde değil li kardeşi olarak koymak
• Anlamı düşünmeden sırasız öğeler için ol (veya katı adım numaraları için ul) seçmek
• Önce semantiği öğretmeden ulyi menü ızgarası sayan yalnızca-layout eğitimlerinden liste işaretlemesi kopyalamak
• Uzun yuvalanmış bloktan sonra dış listeyi kapatmadan bırakmak

Özet

• Sırasız kümeler için ul + li (varsayılan madde işareti)
• Sıralı diziler için ol + li (varsayılan numaralar)
• Alt listeyi üst listenin yanında değil bir li içinde yuvalayın
• Anlama uyan liste türünü seçin
• Listeleri CSS layout sütunlarının yerine kullanmayın
• Plug-in tarihçe notundan sonra listeler sizi yeniden kullanmaya devam edeceğiniz günlük yapısal HTML'e geri getirir