HTML'de Listeler

HTML'de listeler sıralı ve sırasız olarak ikiye ayrılıyor. Sırasız listeler <ul> etiketi içerisinde, sıralı listeler <ol> etiketi içerisinde yazılır. Ve her liste elemanı <li> etiketi içerisinde yazılmalıdır.

Şimdi sırasıyla bu liste örneklerini inceleyelim.

Sırasız Liste <ul>

Sırasız liste oluşturmak için <ul> etiketini kullanacağız. Hemen örneklendirelim;

<ul>
    <li>Çay</li>
    <li>Şeker</li>
    <li>Kaşık</li>
</ul>

Bu örneğin çıktısı şöyle olacaktır;

Her liste elemanının başında içi dolu yuvarlak daire var, bunları isterseniz type niteliği vererek değiştirebilirsiniz. Değer olarak şunları verebilirsiniz;

• circle - içi boş daire
• disc - içi dolu daire
• square - içi dolu kare

Örnek vermek gerekirse;

<ul type="square">
    <li>Çay</li>
    <li>Şeker</li>
    <li>Kaşık</li>
</ul>

Çıktısı şöyle olacaktır;

Sıralı Liste <ol>

Sıralı liste oluşturmak içinde <ol> etiketi kullanılır. Hemen bir örnek verelim;

<ol>
    <li>HTML Nedir?</li>
    <li>HTML'e Başlangıç</li>
    <li>HTML'de Etiketler</li>
</ol>

Çıktısı ise şöyle olacaktır;

Şimdi farkını daha iyi anladık sanırım. Bunda sayılı bir liste oluşturuyoruz yani sıralı bir liste. Tabi bunun içinde type niteliği belirleyebiliriz. Bu niteliğin alabileceği değerler ise;

• 1 - 1'den başlayan sayılı
• a - Küçük harfle a'dan başlayan sayılı
• A - Büyük harfle A'dan başlayan sayılı
• i - Küçük harflerle başlayan romen rakamı sayılı
• I - Büyük harflerle başlayan romen rakamı sayılı

Örneklerini görmek isterseniz ise;

Ayrıca sayımın nereden başlayacağını belirlemek için start niteliğini kullanabilirsiniz. Örneğin;

<ol start="3">
    <li>HTML Nedir?</li>
    <li>HTML'e Başlangıç</li>
    <li>HTML'de Etiketler</li>
</ol>

Bu şekilde 3.den başladığını görebilirsiniz.

İç İçe Liste Kullanımı

Genelde sıkça listeleri iç içe kullanmamız gerekecek. Kullanırken yeni bir liste <li> etiketi içerisinde yazılır. Örnek verelim;

<ul>
    <li>HTML</li>
    <li>
        CSS
        <ul>
            <li>SASS</li>
            <li>LESS</li>
        </ul>
    </li>
    <li>
        JavaScript
        <ul>
            <li>
                Client-side
                <ul>
                    <li>jQuery</li>
                    <li>React</li>
                </ul>
            </li>
            <li>
                Server-side
                <ul>
                    <li>Nodejs</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        PHP
        <ul>
            <li>Laravel</li>
            <li>Symfony</li>
        </ul>
    </li>
</ul>

Bu örneğin çıktısı şöyle olacaktır;

HTML'de Açıklama Listesi

HTML'de aynı zamanda açıklama listeleri oluşturabilirsiniz. Yani bir liste oluşturup her elemanın ne işe yaradığını bu etiketleri kullanarak yapabilirsiniz. Listeyi oluşturmak için <dl> etiketini, açıklanacak terim için <dt> etiketi, açıklama için <dd> etiketi kullanılır. Örnek verelim;

<dl>
    <dt>Mustafa Kemal Atatürk</dt>
    <dd>Türkiye Cumhuriyeti'nin kurucusu.</dd>
    <dt>Einstein</dt>
    <dd>Nobel Fizik Ödüllü Yahudi asıllı Alman teorik fizikçi</dd>
</dl>

Bu örnek tarayıcıda şöyle gözükecektir;