HTML <ol> Etiketi


Örnek

İki farklı sıralı liste (ilk liste 1'den, ikincisi 50'den başlar):

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.


Tanım ve Kullanım

<ol>etiketi sıralı bir liste tanımlar . Sıralı bir liste sayısal veya alfabetik olabilir.

<li> etiketi , her liste öğesini tanımlamak için kullanılır.

İpucu: Listelere stil vermek için CSS kullanın .

İpucu: Sırasız liste için <ul> etiketini kullanın. 


Tarayıcı Desteği

Element
<ol> Yes Yes Yes Yes Yes


Öznitellikler

Attribute Value Description
reversed reversed Specifies that the list order should be reversed (9,8,7...)
start number Specifies the start value of an ordered list
type 1
A
a
I
i
Specifies the kind of marker to use in the list

Genel Özellikler

Etiket ayrıca HTML'deki Global Nitelikleri<ol> de destekler .


Etkinlik Özellikleri

Etiket ayrıca HTML'deki Etkinlik Niteliklerini<ol> de destekler .


Daha fazla örnek

Örnek

Farklı liste türleri ayarlayın (CSS ile):

<ol style="list-style-type:upper-roman">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol style="list-style-type:lower-alpha">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Örnek

CSS ile kullanılabilen tüm farklı liste türlerini görüntüleyin:

<style>
ol.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style-type: decimal-leading-zero;}
ol.e {list-style-type: georgian;}
ol.f {list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h {list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style-type: lower-alpha;}
ol.l {list-style-type: lower-greek;}
ol.m {list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}
ol.r {list-style-type: none;}
ol.s {list-style-type: inherit;}
</style>

Örnek

Listelerde satır yüksekliğini azaltın ve genişletin (CSS ile):

<ol style="line-height:80%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol style="line-height:180%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Örnek

Sırasız bir listeyi sıralı bir listenin içine yerleştirin:

<ol>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ol>

İlgili Sayfalar

HTML öğreticisi: HTML Listeleri

HTML DOM referansı: Ol Object

CSS Eğitimi: Stil Listeleri


Varsayılan CSS Ayarları

Çoğu tarayıcı, <ol>öğeyi aşağıdaki varsayılan değerlerle görüntüler:

Örnek

ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}