Liste etiketleri

Photo by Jackson Sophat on Unsplash

Liste etiketleri HTML'de listeleri oluşturmak için kullanılan yapısal etiketlerdir. Bu etiketler, sıralı (numaralı) ve sırasız (noktalı) listeler oluşturmak için kullanılır.

Sıralı Liste Etiketi

<ol> etiketi, sıralı bir liste oluşturmak için kullanılır. Bu liste türünde her bir liste öğesi numaralandırılır. Örneğin, bir alışveriş listesi veya adımların bulunduğu bir liste gibi durumlarda kullanılabilir.

<ol>
  <li>Elma</li>
  <li>Armut</li>
  <li>Portakal</li>
</ol>

Yukarıdaki örnekte, <ol> etiketi ile sıralı bir liste oluşturulmuş ve her liste öğesi <li> etiketi içine yazılmıştır. Tarayıcılar, otomatik olarak liste öğelerine numaralar ekleyecektir.

Sırasız Liste Etiketi

<ul> etiketi, sırasız bir liste oluşturmak için kullanılır. Bu liste türünde liste öğeleri numaralandırılmaz ve genellikle madde işaretleriyle gösterilir. Örneğin, bir özellikler listesi veya noktalarla ayrılmış bir liste gibi durumlarda kullanılabilir.

<ul>
  <li>Kırmızı</li>
  <li>Mavi</li>
  <li>Yeşil</li>
</ul>

Yukarıdaki örnekte, <ul> etiketi ile sırasız bir liste oluşturulmuş ve her liste öğesi <li> etiketi içine yazılmıştır. Tarayıcılar, otomatik olarak liste öğelerine noktalama işaretleri ekleyecektir.

Liste Öğesi Etiketi

<li> etiketi, bir liste öğesini belirtmek için kullanılır. <ol> veya <ul> etiketlerinin içinde kullanılan her bir <li> etiketi, bir liste öğesini temsil eder.

<ul>
  <li>Öğe 1</li>
  <li>Öğe 2</li>
  <li>Öğe 3</li>
</ul>

Yukarıdaki örnekte, <ul> etiketi içindeki her <li> etiketi bir liste öğesini temsil eder. Tarayıcılar, her bir liste öğesini sırasıyla gösterecektir.

Sıralı ve sırasız listeleri birleştirmek veya iç içe oluşturmak da mümkündür:

<ol>
  <li>Meyveler</li>
  <li>
    Sebzeler
    <ul>
      <li>Havuç</li>
      <li>Domates</li>
      <li>Salatalık</li>
    </ul>
  </li>
  <li>Et ve Balık</li>
</ol>

Yukarıdaki örnekte, sıralı bir liste içinde sırasız bir liste yer almaktadır. Bu şekilde, daha karmaşık listeler oluşturulabilir.

Liste etiketleri, içeriği bölümlendirerek okunabilirliği artırır ve belge yapısını düzenler. CSS (Cascading Style Sheets) kullanarak listeleri biçimlendirebilir ve stil verebilirsiniz.