Listeler

HTML ile üç farklı türde liste oluşturmak mümkündür. Bunlar sıralı liste, sırasız liste ve açıklamalı listedir. Sırasız listede her bir liste elemanının başına bir işaret konur. Tüm elemanların başındaki işaret aynıdır. Sıralı listede her liste elemanının başına sıralı olduğunu belirtecek bir numara ya da harf konur. Açıklamalı listede ise liste elemanlarının altına açıklama eklenebilir.


<ul> ve <ol>

<ul> elemanı sırasız bir liste tanımlar liste elemanları bu etiketlerin arasına yazılır. <ol> elemanı da benzerdir, fakat sıralı bir liste oluşturur. Sırasız listedeki elemanların başındaki işaret CSS özellikleri ile belirlenebilir. Varsayılan değer dairedir.

Sıralı listedeki elemanların başında varsayılan olarak sayı bulunur fakat type niteliği ile bu değiştirilebilir. type niteliğinin alabileceği değerler 1, a, A, I ve i'dir. Bu değerler sırasıyla elemanların başında sayı, küçük harf, büyük harf, büyük harflerle yazılmış Roma rakamı ve küçük harflerle yazılmış Roma rakamı olacağını belirtir.

start niteliğinin karşısına sayı girilerek sıralı listenin hangi sayı ile başlayacağı belirtilebilir. HTML5 ile birlikte gelen reversed niteliği ise karşısına değer girilmeden kullanılır ve listenin yüksek sayıdan düşük sayıya doğru oluşturulacağını belirtir. Bu nitelik yazının yazıldığı an itibariyle Internet Explorer tarafından desteklenmemektedir.


<li>

Bu elemanlar <ol> veya <ul> elemanları arasına yerleştirilir. Her bir <li> elemanı bir liste elemanını temsil eder. <li> elemanı sıralı bir listede kullanıldığında value niteliğiyle nitelendirilebilir. value niteliğinin karşısına sayı girilir ve bu sayı o liste elemanının başına yerleştirilir. Sonraki elemanlar numaralandırılırken bu sayıdan itibaren numaralandırılırlar.


<dl>

<dl> elamanı açıklamalı bir liste tanımlar, liste elemanları ve bu elemanların açıklamaları bu etiketlerin arasına yazılır.


<dt> ve <dd>

<dt> elemanı <dl> ile tanımlanmış liste içindeki bir elemanı tanımlar, hemen arkasından eklenecek olan <dd> elemanı ise bu elemanın açıklamasını verir.

Yukarıdaki bilgilerin nasıl kullanıldığıyla ilgili örnek bir HTML5 kodu aşağıda görülebilir:

<!DOCTYPE html>
<html>
<head>
<title>Liste Örneği</title>
</head>
<body>
<ul>
    <li>İstanbul</li>
    <li>Ankara</li>
    <li>İzmir</li>
</ul>
<ol>
    <li>İstanbul</li>
    <li>Ankara</li>
    <li>İzmir</li>
</ol>
<ol type="A">
    <li>İstanbul</li>
    <li>Ankara</li>
    <li>İzmir</li>
</ol>
<ol type="I">
    <li>İstanbul</li>
    <li>Ankara</li>
    <li>İzmir</li>
    <li value="10">Bursa</li>
    <li>Adana</li>
</ol>
<dl>
    <dt>İstanbul</dt>
    <dd>Türkiye'nin en büyük şehridir.</dd>
    <dt>Ankara</dt>
    <dd>Türkiye'nin en büyük ikinci şehri ve başkentidir.</dd>
    <dt>İzmir</dt>
    <dd>Türkiye'nin en büyük ikinci şehridir ve Ege kıyısında bulunur.</dd>
</dl>
</body>
</html>