Web sayfaları oluştururken bilgileri düzenli, okunabilir ve mantıksal bir yapı içinde sunmak son derece önemlidir. Bir yemek tarifi adımlarını, alışveriş listesini, bir sözlükteki terimleri veya bir web sitesinin üst menüsünü (navigasyon) düşünün; bunların hepsi temelde birer “liste”dir. HTML (Hiper Metin İşaretleme Dili), içeriklerimizi gruplandırmak ve hiyerarşik bir düzene sokmak için bize özel listeleme etiketleri sunar.
Daha önceki rehberlerimizde HTML’in temel iskeletini ve metin biçimlendirmeyi öğrenmiştik. Bu rehberde ise, web dünyasının en çok kullanılan yapılarından biri olan HTML Listeleme Etiketleri konusunu derinlemesine, bol örneklerle ve modern SEO/Erişilebilirlik kurallarına uygun olarak inceleyeceğiz.
1. Sırasız Listeler (Unordered Lists) – <ul>
Sırasız listeler, maddelerin sırasının önemli olmadığı durumlar için kullanılır. Bir alışveriş listesi veya yapılacaklar listesi buna en iyi örnektir. HTML’de sırasız liste oluşturmak için <ul> (Unordered List) etiketi kullanılır. Listenin içindeki her bir madde ise <li> (List Item) etiketi ile sarmalanır.
Tarayıcılar, sırasız listeleri varsayılan olarak başlarında birer madde işareti (genellikle içi dolu siyah bir daire/nokta) ile gösterirler.
Örnek Kullanım:
<h2>Market Alışveriş Listesi</h2>
<ul>
<li>Süt</li>
<li>Yumurta</li>
<li>Tam buğday ekmeği</li>
<li>Elma</li>
</ul>
Eski HTML ve Modern CSS Farkı: Eski HTML sürümlerinde (HTML 4.01 ve öncesi), listelerin madde işaretini değiştirmek için <ul> etiketinin içine type="circle" (içi boş daire), type="square" (kare) veya type="disc" (dolu daire) gibi nitelikler (attributes) yazılırdı. Ancak modern HTML5 standartlarında, tasarımsal olan bu nitelikler kullanımdan kaldırılmıştır (deprecated). Artık madde işaretlerinin görünümünü değiştirmek için HTML değil, CSS’in list-style-type özelliği kullanılmalıdır. Örneğin bir listenin madde işaretlerini kaldırmak için CSS’te list-style-type: none; kuralı uygulanır.
2. Sıralı Listeler (Ordered Lists) – <ol>
Sıralı listeler, adımların veya maddelerin belirli bir sıraya, hiyerarşiye veya önceliğe sahip olduğu durumlar için kullanılır. Bir yemek tarifinin yapılış aşamaları, bir yarışmanın kazananları veya kurulum talimatları sıralı listelere örnektir. HTML’de sıralı liste oluşturmak için <ol> (Ordered List) etiketi kullanılır. İçerisindeki maddeler yine <li> etiketi ile belirtilir.
Tarayıcılar sıralı listeleri varsayılan olarak 1, 2, 3 şeklinde artan sayılarla numaralandırır.
Örnek Kullanım:
<h2>Kek Yapılışı</h2>
<ol>
<li>Fırını 180 dereceye ısıtın.</li>
<li>Yumurta ve şekeri köpürene kadar çırpın.</li>
<li>Unu ve kabartma tozunu ekleyip karıştırın.</li>
<li>Karışımı kalıba döküp 30 dakika pişirin.</li>
</ol>
<ol> Etiketinin Güçlü Nitelikleri (Attributes)
Sıralı listeleri özelleştirmek için HTML5’te kullanabileceğimiz harika nitelikler (attributes) vardır:
type(Tür): Numaralandırmanın rakamlarla mı, harflerle mi yoksa Roma rakamlarıyla mı yapılacağını belirler. Alabileceği değerler şunlardır:type="1": Varsayılan değerdir (1, 2, 3…).type="A": Büyük harflerle sıralar (A, B, C…).type="a": Küçük harflerle sıralar (a, b, c…).type="I": Büyük Roma rakamlarıyla sıralar (I, II, III…).type="i": Küçük Roma rakamlarıyla sıralar (i, ii, iii…).
start(Başlangıç): Listenin kaçıncı numaradan veya harften başlayacağını belirler. Örneğinstart="5"yazarsanız, liste 5, 6, 7 şeklinde devam eder. Eğer liste tipi harf ise (örneğintype="A" start="3"), liste alfabenin 3. harfi olan “C” ile başlar,.reversed(Ters Çevrilmiş): HTML5 ile gelen bu harika nitelik, sıralamanın geriye doğru (örneğin 10, 9, 8…) yapılmasını sağlar,. “En İyi 10 Film” gibi geriye sayım listeleri için mükemmeldir.
Detaylı <ol> Örneği:
<h2>En Çok Gişe Yapan 3 Film (Geriye Sayım)</h2>
<ol reversed start="3" type="I">
<li>Avatar</li>
<li>Avengers: Endgame</li>
<li>Titanic</li>
</ol>
Bu liste ekranda III. Avatar, II. Avengers: Endgame, I. Titanic şeklinde görünecektir.
3. Tanımlama Listeleri (Description Lists) – <dl>, <dt>, <dd>
HTML’deki en az bilinen ama en semantik (anlamsal) listeleme türlerinden biri tanımlama listeleridir. Bu listeler, bir terimi ve o terimin açıklamasını eşleştirmek için kullanılır. Bir sözlük, sıkça sorulan sorular (SSS/FAQ) veya bir ürünün teknik özelliklerini listelemek için biçilmiş kaftandır.
Tanımlama listeleri üç farklı etiketin bir araya gelmesiyle oluşur:
<dl>(Description List): Tüm listeyi kapsayan ana sarmalayıcı etikettir,.<dt>(Definition Term): Tanımlanacak olan terimi veya başlığı belirtir,.<dd>(Definition Description): İlgili terimin tanımını veya açıklamasını içerir,. Tarayıcılar genellikle<dd>içeriklerini görsel olarak biraz içeriye girintili (indented) olarak gösterir.
Örnek Kullanım:
<h2>Web Geliştirme Terimleri Sözlüğü</h2>
<dl>
<dt>HTML</dt>
<dd>Web sayfalarının iskeletini ve yapısını oluşturan işaretleme dilidir.</dd>
<dt>CSS</dt>
<dd>Web sayfalarının görsel tasarımını ve renklerini belirleyen stil şablonudur.</dd>
<dt>JavaScript</dt>
<dd>Web sayfalarına dinamizm ve etkileşim katan programlama dilidir.</dd>
</dl>
Not: Bir <dt> (terim) etiketinin birden fazla <dd> (açıklama) etiketi olabilir, veya tam tersi birden fazla terimin tek bir ortak açıklaması olabilir. Aralarında birebir eşleşme zorunluluğu yoktur,.
4. İç İçe Listeler (Nested Lists) ve En Sık Yapılan Hata
Listeleri birbirinin içine yerleştirerek daha karmaşık ve alt kategorileri olan yapılar (örneğin açılır menüler veya içindekiler tabloları) oluşturabilirsiniz. Ancak burada web geliştirmeye yeni başlayanların en sık yaptığı büyük bir HTML kural hatası vardır.
<ul> veya <ol> etiketlerinin içine sadece ve sadece <li> etiketleri yazılabilir,. Bir listeyi başka bir listenin içine gömmek istiyorsanız, o yeni listeyi doğrudan <ul> etiketinin içine değil, bir <li> etiketinin içine yerleştirmelisiniz.
Hatalı (Yanlış) Kullanım:
<ul>
<li>Meyveler</li>
<ul> <!-- YANLIŞ! <ul> doğrudan <ul>'nin çocuğu olamaz -->
<li>Elma</li>
<li>Armut</li>
</ul>
</ul>
Doğru (Kurallı) Kullanım:
<ul>
<li>Meyveler
<ul> <!-- DOĞRU! Yeni liste <li> etiketinin İÇİNDE yer alıyor -->
<li>Elma</li>
<li>Armut</li>
</ul>
</li> <!-- Üstteki li etiketi ancak burada kapanıyor -->
<li>Sebzeler</li>
</ul>
5. Listelerin Navigasyon (Menü) Olarak Kullanımı
Web sitelerinin tepesinde gördüğümüz “Ana Sayfa”, “Hakkımızda”, “Hizmetler”, “İletişim” gibi menü bağlantıları (navigasyon), modern web tasarımında her zaman HTML listeleri kullanılarak oluşturulur. Bir menü, temelde “bağlantıların bir listesi”dir.
HTML5 ile birlikte gelen semantik <nav> etiketi ile <ul> ve <li> etiketleri birleştirilerek mükemmel ve erişilebilir bir menü iskeleti oluşturulur:
<nav>
<ul>
<li><a href="index.html">Ana Sayfa</a></li>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="iletisim.html">İletişim</a></li>
</ul>
</nav>
Geliştiriciler bu iskeleti kurduktan sonra CSS kullanarak listelerin başındaki siyah noktaları kaldırır (list-style-type: none;), bağlantıları alt alta değil yan yana dizer ve onlara birer “buton” görünümü verirler.
6. SEO ve Erişilebilirlik (Accessibility) Açısından Listelerin Önemi
Listeleri sadece “ekranda alt alta düzenli maddeler göstermek” için tasarlanmış basit yapılar olarak görmemelisiniz. Anlamsal (Semantic) HTML açısından listeler, sitenizin kalitesini belirleyen en kritik faktörlerden biridir:
- SEO (Arama Motoru Optimizasyonu) Faydaları: Google gibi arama motorlarının botları sitenizi tararken
<ol>,<ul>ve<dl>etiketlerini gördüğünde, bu içeriklerin birbiriyle ilişkili bir grup veya bir adım dizisi olduğunu anlar. Örneğin, “Kek Nasıl Yapılır?” diye aratan bir kullanıcıya, Google sizin<ol>ile yazdığınız adımları arama sonuçlarında doğrudan Zengin Snippet (Rich Snippet) olarak kutu içinde gösterebilir. Eğer bu adımları sadece düz paragraflar (<p>) veya anlamsız<div>etiketleri ile yazsaydınız, Google bu yapısal bağıntıyı kuramazdı. - Erişilebilirlik (WCAG Standartları): Görme engelli kullanıcıların faydalandığı “Ekran Okuyucu” (Screen Reader) yazılımlar, anlamsal HTML’e dayanır. Ekran okuyucu bir listeye geldiğinde, kullanıcıya düz metin okumak yerine “Sırasız liste, 4 öğe içeriyor” diyerek bir ön bilgi verir. Kullanıcı dilerse klavye kısayollarıyla liste elemanları arasında hızla gezinebilir.
- Yapılmaması Gerekenler: Sırf metni sayfanın solundan biraz içeriye doğru kaydırmak (girinti/indentation vermek) için asla
<ul>veya<dl>etiketlerini kullanmayın. Bu, ekran okuyucuları kullanan engelli bireylerin kafasını karıştırır; onlara ortada bir liste olmadığı halde “liste başlıyor” mesajı verir. Görsel boşluklar ve kaydırmalar her zaman CSS (margin ve padding özellikleri) ile yapılmalıdır.
Özetle; HTML listeleme etiketleri (<ul>, <ol>, <dl>), web sayfalarınızdaki bilgileri yapılandırmak, gruplandırmak ve kullanıcılara temiz bir deneyim sunmak için en güçlü araçlarınızdandır. İçeriğinizdeki maddesel verileri sıradan metinler olarak alt alta yazmak yerine doğru listeleme etiketlerini kullanarak hem arama motorlarının sitenizi ödüllendirmesini sağlayabilir hem de özel gereksinimli bireylerin web sitenizde kolayca gezinmesine olanak tanıyabilirsiniz.
