HTML Sıralı Listeler: Tanımı, Oluşturulması ve Kullanım Örnekleri

HTML Sıralı Listeler: Tanımı, Oluşturulması ve Kullanım Örnekleri

HTML 06 Oca 2025 Ahmet Halit DURUSOY Ahmet Halit DURUSOY 3 dakika okuma
Paylaş:

HTML Sıralı Listeler: Tanımı, Oluşturulması ve Kullanım Örnekleri

HTML, web sayfalarını yapılandırmak ve içeriği biçimlendirmek için kullanılan temel bir işaretleme dilidir. Bu makalede, HTML içinde sıralı listelerin tanımını, nasıl oluşturulduğunu ve uygun kullanım örneklerini inceleyeceğiz.

Sıralı Listelerin Tanımı

HTML'de, sıralı listeler ol etiketi ile tanımlanır. Bu listeler, maddelerin belirli bir sıralamada olduğu, numaralandırılmış veya harflerle işaretlenmiş listelerdir. Her bir öğe, li (list item) etiketi içinde yer alır.

Örnek bir sıralı liste:

<ol>
  <li>Birinci Öğe</li>
  <li>İkinci Öğe</li>
  <li>Üçüncü Öğe</li>
</ol>

Sıralı Liste Türleri

Sıralı listeler, listelenen öğelerin türüne göre numaralar, harfler veya Roma rakamları ile sıralanabilir. type özelliği kullanılarak sıralama türü belirlenebilir.

  • Sayılar (Varsayılan):
    <ol>
      <li>Birinci Öğe</li>
      <li>İkinci Öğe</li>
      <li>Üçüncü Öğe</li>
    </ol>
    
  • Harfler:
    <ol type="A">
      <li>Birinci Öğe</li>
      <li>İkinci Öğe</li>
      <li>Üçüncü Öğe</li>
    </ol>
  • Roma Rakamları:
    <ol type="I">
      <li>Birinci Öğe</li>
      <li>İkinci Öğe</li>
      <li>Üçüncü Öğe</li>
    </ol>Kullanımı

Sıralı listeler, web sayfalarında adım adım talimatlar, tarifler, prosedürler veya belirli bir sırada sunulması gereken herhangi bir içerik için idealdir. Örneğin, bir yemek tarifinin adımlarını göstermek için sıralı listeler kullanılabilir.

Örnek Kullanım Alanları

 

  1. Adım Adım Rehberler:
    <ol>
      <li>Bilgisayarınızı açın.</li>
      <li>İnternete bağlanın.</li>
      <li>Tarayıcınızı açın ve arama motorunuza gidin.</li>
    </ol>
  2. Tarifler:

    <ol>
      <li>Malzemeleri hazırlayın.</li>
      <li>Fırını 180 dereceye ısıtın.</li>
      <li>Hamuru yoğurun ve tepsiye yerleştirin.</li>
    </ol>
      

İlgili Etiketler

Çerez Ayarları

Deneyiminizi iyileştirmek için çerezler kullanıyoruz. Daha fazla bilgi için Çerez Politikamızı ziyaret edin.