HTML’de Listeler: Ordered List (OL) ve Unordered List (UL)

HTML, web sayfalarındaki bilgileri düzenli ve anlaşılır bir şekilde sunmak için listeleme özellikleri sunar. Ordered List (OL) ve Unordered List (UL), HTML’de kullanılan iki ana liste türüdür. Bu yazıda, bu liste türlerinin nasıl kullanılacağı, farkları ve iç içe geçmiş listelerle nasıl çalışılacağı ele alınacaktır.

Ordered List (OL): Numaralı Listeler

Ordered List, yani numaralı listeler, öğelerin belirli bir sıraya göre sıralandığı durumlarda kullanılır. Bu liste türü, her bir öğeyi otomatik olarak numaralandırır.

Örnek Kullanım:

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

Çıktı:

1. Öğe 1
2. Öğe 2
3. Öğe 3

Unordered List (UL): Madde İşaretli Listeler

Unordered List, yani madde işaretli listeler, öğelerin belirli bir sıralama gerektirmediği durumlarda kullanılır. Bu listeler, öğelerin başında madde işaretleri (bullet points) gösterir.

Örnek Kullanım:

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

Çıktı:

• Öğe 1
• Öğe 2
• Öğe 3

Listelerdeki Ortak Yapı: LI (List Item)

Her iki liste türü de öğelerini <li> (List Item) etiketi ile tanımlar. <li> etiketleri, liste öğelerini belirtir ve sadece <ul> veya <ol> etiketlerinin içinde kullanılabilir.

Örnek:

<ul>
    <li>Birinci Öğeyi Tanımlar</li>
    <li>İkinci Öğeyi Tanımlar</li>
</ul>

İç İçe Geçmiş Listeler (Nested Lists)

HTML listelerinde, bir liste öğesi içine başka bir liste yerleştirilebilir. Bu, iç içe geçmiş (nested) listeler oluşturmayı sağlar. Bu tür bir yapı, kategoriler veya alt gruplar oluştururken oldukça kullanışlıdır.

Örnek:

    <ul>
        <li>Frontend
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </li>
        <li>Backend
            <ul>
                <li>Node.js</li>
                <li>Python (Django, Flask)</li>
                <li>PHP</li>
            </ul>
        </li>
    </ul>

Çıktı:

• Frontend
  • HTML
  • CSS
  • JavaScript
• Backend
  • Node.js
  • Python (Django, Flask)
  • PHP

Bu yapı, alt kategorileri açık bir şekilde sunar.

Listelerin Karışık Kullanımı

Bir liste içinde ordered list (OL) ve unordered list (UL) bir arada kullanılabilir. Bu, numaralı ve madde işaretli listelerin aynı yapıda sunulmasını sağlar.

Örnek:

   <ol>
        <li>Frontend
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </li>
        <li>Backend
            <ul>
                <li>Node.js</li>
                <li>Python (Django, Flask)</li>
                <li>PHP</li>
            </ul>
        </li>
        <li>Diğer Teknolojiler
            <ul>
                <li>Git ve Versiyon Kontrol</li>
                <li>Docker</li>
                <li>CI/CD</li>
            </ul>
        </li>
    </ol>

Çıktı:

1. Frontend
   • HTML
   • CSS
   • JavaScript
2. Backend
   • Node.js
   • Python (Django, Flask)
   • PHP
3. Diğer Teknolojiler
   • Git ve Versiyon Kontrol
   • Docker
   • CI/CD

CSS ile Liste Stillerini Özelleştirme

HTML listeleri, varsayılan stil ayarlarına sahiptir. Ancak CSS kullanarak listeleri daha estetik hale getirebiliriz. Örneğin:

• Madde işaretlerini değiştirme
• Numaralandırmayı Roma rakamlarına çevirme
• Boşlukları düzenleme

Örnek:

<style>
    ul {
        list-style-type: square;
    }

    ol {
        list-style-type: upper-roman;
    }
</style>

Bu örnekte:

• Unordered list (UL) madde işaretleri kareye çevrilir.
• Ordered list (OL) numaralandırma Roma rakamları ile yapılır.

Sonuç

HTML listeleri, bilgileri düzenlemek ve kategorize etmek için güçlü araçlardır. Ordered list (OL) ve unordered list (UL) yapıları, basit listelerden iç içe geçmiş karmaşık yapılar oluşturmaya kadar geniş bir kullanım alanı sunar. CSS ile stillerini özelleştirerek, web sayfalarınızda daha şık ve düzenli listeler oluşturabilirsiniz. Listelerle çalışırken, <li> etiketlerini doğru kullanmayı ve iç içe listeler oluştururken mantıklı bir yapı kurmayı unutmayın!