HTML Liste Etiketleri

Sıralanmış Liste <ol> (Order List)

Sıralanmış liste etiketiyle (<ol>) oluşturulan listelerin her bir liste elemanında sıra numarası bulunur. Bu sıralanmış liste yapısının varsayılan özelliği olarak gelir. CSS ayarları düzenlenerek bu görünüm değiştirilebilir.

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>SEO</li>
</ol>

Default <ol> CSS Yapısı

ol {
   display: block;
   list-style-type: decimal;
   margin-block-start: 1em;
   margin-block-end: 1em;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
   padding-inline-start: 40px;
}

<ol> Etiketiyle Uyumlu Tarayıcılar

Yukarıdaki tablonun güncel versiyonunu ve daha fazla detayını incelemek için https://caniuse.com/?search=ol linkine tıklayın.

Sıralanmamış Liste <ul> (Unordered List)

Sıralanmamış liste etiketiyle (<ul>) oluşturulan listelerin her bir liste elemanının başında nokta bulunur. Sıralanmamış liste etiketinde bu varsayılan olarak gelen bir CSS özelliğidir, ayarlar düzenlenerek bu görünüm değiştirilebilir.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>SEO</li>
</ul>

Default <ul> CSS Yapısı

ul {
   display: block;
   list-style-type: disc;
   margin-block-start: 1em;
   margin-block-end: 1em;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
   padding-inline-start: 40px;
}

<ul> Etiketiyle Uyumlu Tarayıcılar

Yukarıdaki tablonun güncel versiyonunu ve daha fazla detayını incelemek için https://caniuse.com/?search=ul linkine tıklayın.

Liste Elemanı <li> (List Item)

Liste elemanı etiketi (<li>) sıralanmış liste (<ol>) ve sıralanmamış liste (<ul>) etiketleri içerisinde kullanılır, bu etiketler olmadan kullanılması teknik olarak doğru değildir.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>SEO</li>
</ul>

Default <li> CSS Yapısı

li {
   display: list-item;
   text-align: -webkit-match-parent;
}

<li> Etiketiyle Uyumlu Tarayıcılar

Yukarıdaki tablonun güncel versiyonunu ve daha fazla detayını incelemek için https://caniuse.com/?search=li linkine tıklayın.