Html Ders 5 – Listeler

Liste Etiketi (<ul>, <ol>, <li>)

Listeler, web sayfalarındaki bilgileri düzenli ve yapılandırılmış bir şekilde sunmak için kullanılır. Özellikle sıralı olmayan öğelerin listesini oluşturmak veya adımları sıralamak için idealdirler.

Liste Türleri:

Sırasız Liste (<ul>): Öğelerin belirli bir sırası olmadığı durumlarda kullanılır. Tarayıcılar genellikle madde işaretleriyle görüntülenirler.

  • <ul> etiketi listeyi başlatır.
  • <li> (List Item) etiketi her bir öğeyi tanımlar.
  • </ul> etiketi listeyi sonlandırır.

Sıralı Liste (<ol>): Öğelerin belirli bir sırası olduğu durumlarda kullanılır. Tarayıcılar genellikle numaralarla görüntülenirler (1, 2, 3…).

  • <ol> etiketi listeyi başlatır.
  • <li> (List Item) etiketi her bir öğeyi tanımlar.
  • </ol> etiketi listeyi sonlandırır.

<li> Etiketi – Liste Öğeleri:

<li> etiketi, hem sıralı (<ol>) hem de sırasız (<ul>) listelerin içindeki her bir öğeyi tanımlar. Bu etiket olmadan liste oluşturulamaz.

İç İçe Listeler (Nested Lists):

Listeler içinde başka listeler oluşturarak daha karmaşık yapıları temsil edebilirsiniz. Bu, hiyerarşik bilgileri düzenlemek için çok kullanışlıdır.

  • İç içe listeler oluşturmak için, bir listenin <li> etiketi içine başka bir liste (<ul> veya <ol>) yerleştirilir.

Örnek:

HTML
<ul>
  <li>Kategori 1
    <ul>
      <li>Alt Kategori A</li>
      <li>Alt Kategori B</li>
    </ul>
  </li>
  <li>Kategori 2</li>
</ul>

Liste Stili Özellikleri (CSS ile):

HTML, listelerin temel yapısını sağlar, ancak görünümünü CSS kullanarak özelleştirebilirsiniz.

  • Madde İşaretlerinin veya Numaraların Stilini Değiştirme: Madde işaretlerinin rengini, boyutunu ve şeklini değiştirebilirsiniz. Sıralı listelerdeki numaralandırma stilini (harfler, Roma rakamları vb.) değiştirebilirsiniz.
  • Liste Öğelerinin Boşluklarını Ayarlama: margin ve padding özelliklerini kullanarak liste öğeleri arasındaki boşluğu ayarlayabilirsiniz.
  • Listelerin Kenarlıklarını ve Arka Planlarını Değiştirme: Listelere kenarlık ekleyebilir veya arka plan renkleri uygulayabilirsiniz.

Erişilebilirlik İpuçları:

  • Listelerin anlamlı bir şekilde yapılandırıldığından emin olun.
  • Ekran okuyucular için listelerin doğru şekilde yorumlanması önemlidir.
  • Gereksiz veya anlamsız listelerden kaçının.

Örnek:

Sırasız Liste (Alışveriş Listesi):

HTML
<ul>
  <li>Süt</li>
  <li>Ekmek</li>
  <li>Peynir</li>
  <li>Meyve</li>
</ul>

Sıralı Liste (Pişirme Talimatları):

HTML
<ol>
  <li>Fırını 180 dereceye ayarlayın.</li>
  <li>Malzemeleri karıştırın.</li>
  <li>Karışımı fırına koyun.</li>
  <li>20 dakika pişirin.</li>
</ol>

İç İçe Liste (Web Sitesi Menüsü):

HTML
<ul>
  <li>Ana Sayfa</li>
  <li>Hakkımızda
    <ul>
      <li>Misyonumuz</li>
      <li>Vizyonumuz</li>
      <li>Ekibimiz</li>
    </ul>
  </li>
  <li>Ürünler</li>
  <li>İletişim</li>
</ul>

Kaynak: https://developer.mozilla.org/en-US/docs/Web/HTML

Etiketler