HTML <ul> Etiketi


Örnek

Sırasız bir HTML listesi:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

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


Tanım ve Kullanım

<ul>etiketi, sırasız (madde işaretli) bir liste tanımlar .

Sırasız listeler oluşturmak için etiketi <li><ul> etiketiyle birlikte kullanın .

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

İpucu: Sıralı listeler için <ol> etiketini kullanın. 


Tarayıcı Desteği

Element
<ul> Yes Yes Yes Yes Yes

Genel Özellikler

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


Etkinlik Özellikleri

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



Daha fazla örnek

Örnek

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

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Örnek

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

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

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

Örnek

Bir liste içinde bir liste oluşturun (iç içe liste):

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

Örnek

Daha karmaşık bir iç içe liste oluşturun:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

İlgili Sayfalar

HTML öğreticisi: HTML Listeleri

HTML DOM referansı: Ul Nesnesi

CSS Eğitimi: Stil Listeleri


Varsayılan CSS Ayarları

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

Örnek

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