🚀 HTML'de Veri Hiyerarşisi: Listeler ve Semantik Yapı

Selamlar, ben Ovid Game ekibinden teknik tarafı sırtlanan geliştirici dostunuz. Bugün web sayfalarının (ve aslında çoğu UI bileşeninin) iskeleti olan listelere, bir senior developer gözüyle bakacağız.

Çoğu kişi listeleri sadece madde işareti koymak sanıyor ancak işin içine girdiğinizde; navigasyon menülerinden tutun, oyun içi envanter sistemlerine kadar her şeyin temelinde bu hiyerarşik yapı yatar. HTML tarafında üç ana listemiz var:

1. Sırasız Listeler (<ul>)

Önem sırası veya bir işlem dizisi belirtmeyen, genellikle madde işaretli (bullet points) yapılardır. Modern web'de en çok navbar (menü) yapımında kullanılırlar.

2. Sıralı Listeler (<ol>)

Adımların veya sıralamanın önemli olduğu durumlar içindir. Örneğin bir oyun kurulum rehberi veya 'Top 10 Player' listesi için biçilmiş kaftandır.

3. Açıklama Listeleri (<dl>)

Bu genellikle ihmal edilir ama 'anahtar-değer' (key-value) çiftlerini göstermek için semantik olarak en doğru yoldur. <dt> (terim) ve <dd> (açıklama) etiketleriyle kullanılır.

Teknik Bir Not: İçimizdeki Savaş projemizde karakter envanterini tasarlarken, eşyaların özelliklerini (Ağırlık: 5kg, Güç: +10 gibi) düz divler yerine <dl> yapısıyla kurgulamıştık. Bu hem ekran okuyucular (accessibility) için daha anlamlı hem de CSS ile stil vermesi çok daha düzenli bir yapı sunuyor.

Hiyerarşi Kuralları

Unutmayın, bir listenin doğrudan çocuğu sadece <li> (veya açıklama listesinde <dt>/<dd>) olabilir. Bir listenin içine başka bir liste eklemek istiyorsanız, bunu yeni bir <ul> açarak mevcut bir <li> etiketinin içine yerleştirmelisiniz.

Örnek hatalı kullanım: <ul> <li>Başlık</li> <ul> <li>Alt Başlık</li> </ul> </ul> (Yanlış!)

Örnek doğru kullanım: <ul> <li>Başlık <ul> <li>Alt Başlık</li> </ul> </li> </ul> (Doğru!)

Kodlamaya devam edin, yapılar geliştikçe karmaşıklık artacak ama temel hep aynı kalacak.

Ovid Game Studio | Teknik Notlar ovidgame.com