HTML ile Liste Oluşturma

Bu makalede HTML ile basit listeler oluşturmayı öğreneceğiz. <ul> etiketini kullanarak sırasız (kare, çember vb. ile), <ol> etiketini kullanarak sıralı listeler (harfler, numaralar vb. ile) oluşturmak mümkündür. Bu etiketler ile iç içe birçok liste oluşturulabilir.

1) Sırasız Liste (unordered)

Sırasız listeler için <ul> etiketi kulllanılır ve listenin her maddesi <li> etiketi ile başlayıp biter.

Örnek 1)

• Türkiye
• Azerbaycan
• İsviçre

HTML Kodu

<ul>
    <li>Türkiye</li>
    <li>Azerbaycan</li>
    <li>İsviçre</li>
</ul>

Örnek 2)

• Türkiye
  • Ankara
  • İstanbul
  • İzmir
• Azerbaycan
• İsviçre

HTML Kodu

<ul>
    <li>Türkiye</li>
    <ul>
        <li>Ankara</li>
        <li>İstanbul</li>
        <li>İzmir</li>
    </ul>
    <li>Azerbaycan</li>
    <li>İsviçre</li>
</ul>

2) Sıralı Liste (ordered)

Sıralı listeler için <ol> etiketi kullanılır ve listenin her maddesi <li> etiketi ile başlayıp biter.

Örnek 1)

1. Türkiye
2. Azerbaycan
3. İsviçre

HTML Kodu

<ol>
    <li>Türkiye</li>
    <li>Azerbaycan</li>
    <li>İsviçre</li>
</ol>

Örnek 2)

1. Türkiye
   1. Ankara
   2. İstanbul
   3. İzmir
2. Azerbaycan
3. İsviçre

HTML Kodu

<ol>
    <li>Türkiye</li>
    <ol>
        <li>Ankara</li>
        <li>İstanbul</li>
        <li>İzmir</li>
    </ol>
    <li>Azerbaycan</li>
    <li>İsviçre</li>
</ol>

Not: Madde işaretlerini biçimlendirmek için CSS ile Liste Biçimlendirme makalesini inceleyebilirsiniz.