HTML Sıralı Listeler

<ol> etiketi HTML dilinde sıralı listeler oluşturmak için kullanılır.

Sıralı Listeler

Sıralı listeler <ol> etiketiyle başlar ve aynı sırasız listelerde olduğu gibi <li> etiketiyle devam eder. Listeler varsayılan olarak sayılarla sıralanırlar.

<!DOCTYPE html>
<html>
<body>

<ol>
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ol>

</body>
</html>

HTML Sıralı Listelerde type Özelliği

<ol> etiketinin type özelliği, liste ögesi işaretçisinin türünü tanımlar.

TürAçıklama
type=”1″Varsayılan değerdir. Sayısal değerlerle başlar.
type=”A”Büyük harfle başlar.
type=”a”Küçük harfle başlar.
type=”I”Büyük harfli roma rakamlarıyla başlar.
type=”i”Küçük harfli roma rakamlarıyla başlar.
<!DOCTYPE html>
<html>
<body>

<ol type="1">
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ol>

<ol type="A">
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ol>

<ol type="a">
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ol>

<ol type="I">
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ol>

<ol type="i">
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ol>

</body>
</html>

Başlıklarda Kontrol Sistemi

Varsayılan olarak listeler 1’den başlar. Listeye belirli bir sayıdan başlamak için start özelliği kullanılabilir.

<!DOCTYPE html>
<html>
<body>

<ol start="50">
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ol>
 
</body>
</html>

HTML İç İçe Sıralı Listeler

Sırasız listelerde olduğu gibi sıralı listeler de iç içe olabilir.

<!DOCTYPE html>
<html>
<body>

<ol>
  <li>Kahve</li>
  <li>Çay
    <ol>
      <li>Siyah</li>
      <li>Yeşil</li>
      <li>Beyaz</li>
    </ol>
  </li>
  <li>Süt</li>
</ol>

</body>
</html>

Not : Sıralı listelerde de <li> yeni bir ögeyi gösterir. Yeni ögeler resimler, bağlantılar veya diğer html ögelerini içerebilir.

Bölüm Özeti

  • Sıralı liste tanımlamak için <ol> etiketi kullanılır.
  • Numaralandırma türü type ile belirlenir.
  • <li> ile yeni liste ögesi tanımlanır.
  • Listeler iç içe yerleştirilebilir.
  • Listeler başka HTML ögelerini içerebilir.
18 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir