HTML'de Liste Oluşturma: Temel Söz Diziminden Stil Vermeye

Bir web sayfasında liste oluşturmak için madde işaretli (sırasız) liste için <ul> etiketini veya numaralı (sıralı) liste için <ol> etiketini kullanın. Her liste öğesi mutlaka <li> etiketi içine alınmalıdır. Bu, içeriğin okunabilirliğini artıran ve arama motorlarının sayfa yapısını daha iyi anlamasına yardımcı olan standart bir veri yapılandırma yöntemidir.

Madde İşaretli ve Numaralı Liste Arasındaki Fark

Liste türünün seçimi, görüntülediğiniz verilerin anlamına bağlıdır:

• Madde işaretli liste (<ul>), öğelerin sırasının önemli olmadığı durumlarda kullanılır. Örnekler: alışveriş listesi, ürün özellikleri listesi, gezinme menüsü.
• Numaralı liste (<ol>), sıralamanın önemli olduğu durumlarda uygulanır. Örnekler: adım adım talimatlar, en iyi 10 listesi, kayıt aşamaları.

Temel Söz Dizimi ve Kod Örnekleri

Madde İşaretli Liste (Unordered List)

Noktalı (madde işaretli) bir liste oluşturmak için <ul> ve <li> etiketlerinin kombinasyonu kullanılır.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Tarayıcıdaki Sonuç:

• HTML
• CSS
• JavaScript

Numaralı Liste (Ordered List)

Rakamlı bir liste için <ol> etiketi kullanılır. Tarayıcı numaraları otomatik olarak sırayla yerleştirir.

<ol>
  <li>Kod düzenleyicisini açın</li>
  <li>index.html dosyasını oluşturun</li>
  <li>Temel yapıyı yazın</li>
</ol>

Tarayıcıdaki Sonuç:

1. Kod düzenleyicisini açın
2. index.html dosyasını oluşturun
3. Temel yapıyı yazın

İç İçe Geçmiş Listeler

Hiyerarşi oluşturmak için listeler birbirinin içine yerleştirilebilir. İç içe geçmiş liste, üst öğenin <li> etiketi içine yerleştirilir.

<ul>
  <li>Meyveler
    <ul>
      <li>Elmalar</li>
      <li>Muzlar</li>
    </ul>
  </li>
  <li>Sebzeler
    <ul>
      <li>Havuç</li>
      <li>Salatalar</li>
    </ul>
  </li>
</ul>

CSS ile Listelerin Stilize Edilmesi

Tarayıcılar varsayılan olarak boşluklar (padding veya margin) ve standart işaretçiler ekler. Bunların görünümünü CSS aracılığıyla değiştirebilirsiniz.

İşaretçileri Kaldırma

Genellikle nokta veya rakamların gerekli olmadığı gezinme menülerinde kullanılır.

ul.no-bullets {
  list-style-type: none; /* İşaretçileri kaldırır */
  padding: 0;            /* İç boşluğu kaldırır */
}

İşaretçi Görünümünü Değiştirme

Standart noktayı kare, daire veya Roma rakamlarıyla değiştirebilirsiniz.

/* Noktalar yerine kareler */
ul.square-list {
  list-style-type: square;
}

/* Numaralı liste için Roma rakamları */
ol.roman-list {
  list-style-type: upper-roman;
}

Kendi Görsellerinizi Kullanma

Tasarım benzersiz simgeler gerektiriyorsa list-style-image özelliğini kullanın.

ul.custom-icons {
  list-style-image: url('icon-check.svg');
}

Temel Özelliklerin ve Niteliklerin Karşılaştırılması

Listeleri Kodlarken Sık Yapılan Hatalar

1. Boşluklar için liste kullanımı. Sadece boşluk oluşturmak amacıyla asla boş listeler veya bölünemez boşluk ( ) içeren listeler oluşturmayın. Bunun için CSS (margin, padding) kullanın.
2. Yapının bozulması. <li> etiketi, <ul> veya <ol> etiketinin doğrudan alt öğesi olmalıdır. Diğer etiketlerin (örneğin <div>) <li> kapsayıcısı olmadan doğrudan <ul> içine yerleştirilmesi geçersiz HTML'dir.
3. <br> yanılgısı. Yeni maddeler oluşturmak için <li> içinde <br> kullanmayın. Her yeni madde kendi <li> etiketi içine alınmalıdır.

SSS

Numaralı bir listeye 1 dışındaki bir rakamla başlanabilir mi? Evet, <ol> etiketinde start niteliğini kullanın. Örneğin, <ol start="10"> listeyi 10 rakamıyla başlatır.

Yatay bir liste nasıl yapılır? HTML etiketi tek başına listeyi yatay yapmaz. Bu işlem CSS aracılığıyla yapılır. Genellikle üst <ul> öğesine display: flex verilir ve <li> öğelerine gerekli boşluklar atanır.

Listeler SEO'yu etkiler mi? Evet. Arama motorları yapılandırılmış içeriği sever. Listelerin kullanılması, algoritmaların anahtar maddeleri, adımları veya özellikleri vurgulamasına yardımcı olur; bu da sitenin arama sonuçlarındaki snippet'ini iyileştirebilir.