Çalıştırılabilir HTML Dokümanları: HTML listeler

Q: HTML'de madde işaretli liste nasıl yapılır?

Sırasız bir liste kullan: her madde için bir olacak şekilde , örneğin Milk Eggs . Tarayıcı her maddenin önüne bir madde işareti çizer ve listeye girinti verir.

Q: HTML'de bir listeden madde işaretlerini nasıl kaldırırım?

CSS'te elementine list-style: none ver. Tarayıcının madde işaretleri için eklediği girintiyi kaldırmak için ayrıca padding-inline-start: 0 (ya da padding: 0) ayarla.

Q: Sıralı bir listeyi farklı bir sayıdan nasıl başlatırım?

start özelliğini kullan: ilk öğeyi 5 olarak numaralandırır. reversed geriye doğru sayar, bir üzerindeki value da o öğenin ve ondan sonrakilerin numarasını belirler.

Q: HTML'de iç içe liste nasıl yapılır?

İçteki ya da listesini, dıştaki listenin bir öğesinin içine, o öğenin metninden sonra koy. Başka bir içine, elementlerinin arasına doğrudan konan bir liste geçersizdir.

HTML listeler: ul, ol ve li

HTML'de iki ana liste vardır. <ul> (unordered list, sırasız liste) madde işaretleri, <ol> (ordered list, sıralı liste) numaralar gösterir. Her öğe bir <li> (list item) olur.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lists</title>
</head>
<body>
  <h3>Shopping</h3>
  <ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
  </ul>

  <h3>Recipe</h3>
  <ol>
    <li>Whisk the eggs</li>
    <li>Heat the pan</li>
    <li>Cook for two minutes</li>
  </ol>
</body>
</html>

Sıra bir anlam taşıdığında (adımlar, sıralamalar, bir içindekiler tablosu) <ol>, taşımadığında <ul> kullan. Ekran okuyucular ikisini de "list, 3 items" gibi öğe sayısıyla birlikte liste olarak duyurur; bu yüzden gerçek bir liste, elle yazılmış "•" ya da "1." ile başlayan satırlardan daha iyidir.

Bir liste doğrudan yalnızca <li> elementleri içerebilir. Başlıklar, paragraflar ve başka listeler dahil diğer her şey bir <li> içine girer.

Madde işareti stilleri

<ul> üzerindeki list-style-type madde işaretini değiştirir. ::marker sözde elementi ise madde işaretine ya da numaranın kendisine, metinden ayrı olarak stil verir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bullet styles</title>
  <style>
    .disc { list-style-type: disc; }
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .custom { list-style-type: "\2713  "; }
    .colored li::marker { color: #2563eb; font-size: 1.3em; }
  </style>
</head>
<body>
  <ul class="disc"><li>disc (the default)</li></ul>
  <ul class="circle"><li>circle</li></ul>
  <ul class="square"><li>square</li></ul>
  <ul class="custom"><li>any text as the bullet</li></ul>
  <ul class="colored"><li>blue, larger marker</li><li>text stays the same</li></ul>
</body>
</html>

Bir string değer o metni madde işareti olarak kullanır. "\2713 " bir onay işareti ve ardından tek bir boşluktur: ilk boşluk yalnızca \2713 kaçış dizisini bitirir. ::marker yalnızca birkaç özellik kabul eder, esas olarak color, font-size ve diğer yazı tipi özellikleri; bu da yaygın "renkli madde işaretleri" isteğini ek işaretleme olmadan karşılar.

Sıralı listeler: sayılar, harfler ve Roma rakamları

<ol> elementinin numaralandırması için özellikleri vardır:

Özellik	Örnek	Sonuç
`type`	`type="a"`	a, b, c (`A`, `i`, `I` ve `1` de çalışır)
`start`	`start="5"`	Saymaya 5'ten başlar
`reversed`	`reversed`	Geriye doğru sayar
`value` (`<li>` üzerinde)	`<li value="10">`	Bu öğe 10 olur, sonrakiler oradan devam eder

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ordered lists</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <ol type="A">
    <li>Option A</li>
    <li>Option B</li>
  </ol>

  <ol type="i">
    <li>Preface</li>
    <li>Contents</li>
  </ol>

  <ol start="4">
    <li>Fourth step</li>
    <li>Fifth step</li>
  </ol>

  <ol reversed>
    <li>Bronze</li>
    <li>Silver</li>
    <li>Gold</li>
  </ol>
</body>
</html>

type HTML'de sorun değildir, çünkü harfler anlam taşıyabilir ("B seçeneğini seç"). Tamamen görsel değişiklikler için CSS list-style-type: upper-alpha ya da lower-roman aynı işi yapar.

İç içe listeler

Bir alt liste, ait olduğu <li> öğesinin içine, o öğenin metninden sonra girer. Tarayıcılar her seviyede madde işaretini değiştirir: dolu daire, sonra boş daire, sonra kare.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested list</title>
</head>
<body>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS
          <ul>
            <li>Flexbox</li>
            <li>Grid</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Backend</li>
  </ul>
</body>
</html>

</li> etiketinin nereye gittiğine dikkat et: "Frontend" öğesi ancak alt listesinden sonra kapanır. Onu <ul> etiketinden önce kapatmak, alt listeyi doğrudan dıştaki <ul> içine koyar; bu neredeyse aynı görünse de geçersizdir.

Sıralı listeler de aynı şekilde iç içe yazılır ve numaralandırma her alt listede 1'den yeniden başlar. 1.1 ve 1.2 gibi numaralar için CSS sayaçları gerekir.

Tanım listeleri: dl, dt ve dd

Tanım listesi terimleri açıklamalarıyla eşleştirir: bir sözlük, bir siparişin ayrıntıları, SSS benzeri çiftler. <dt> terim, <dd> açıklamadır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Description list</title>
  <style>
    dt { font-weight: bold; }
    dd { margin: 0 0 10px; color: #4b5563; }
  </style>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>The structure and content of a page.</dd>
    <dt>CSS</dt>
    <dd>How the page looks.</dd>
    <dt>JavaScript</dt>
    <dd>What the page does.</dd>
  </dl>
</body>
</html>

Bir terimin birkaç <dd> öğesi olabilir, birkaç <dt> de tek bir <dd> öğesini paylaşabilir. Tarayıcılar <dd> öğesine varsayılan olarak girinti verir; yukarıdaki margin kuralı bunu kaldırır. Birkaç sütunlu veriler için tablo daha uygundur.

Madde işaretsiz listeler: menüler ve yatay listeler

Gezinme menüleri link listeleridir. Madde işaretlerini list-style: none, girintiyi padding: 0 ile kaldır, sonra öğeleri flexbox ile yan yana diz:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal list</title>
  <style>
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 8px;
    }
    nav a {
      display: block;
      padding: 8px 14px;
      border-radius: 6px;
      background: #e5e7eb;
      color: #111827;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#courses">Courses</a></li>
      <li><a href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</body>
</html>

Liste, ekran okuyucular için hâlâ bir listedir ("navigation, list, 3 items"). Bir istisna var: VoiceOver ile Safari, madde işaretleri kaldırıldığında liste anlamını düşürebilir. Öğe sayısı kullanıcıların için önemliyse <ul> elementine role="list" ekle.

Varsayılan boşluklar

Tarayıcılar listelere 1em üst ve alt margin verir ve onlara padding-inline-start: 40px ile girinti verir; madde işaretleri de burada durur. Padding baş taraftadır, bu yüzden sağdan sola yazılan dillerde madde işaretleri ve girinti otomatik olarak diğer tarafa geçer. Padding'i kaldırırsan madde işaretleri liste kutusunun dışına çıkar ve kesilebilir; ya biraz padding bırak ya da list-style-position: inside kullan.

Sık yapılan hatalar

Üst listesi olmayan <li>. <ul>, <ol> ya da <menu> içinde olmalı.
<li> öğesinin dışında kalan iç içe liste. Alt listeyi ait olduğu öğenin içine koy.
Doğrudan <ul> içinde metin ya da başka etiketler, örneğin <ul><p>Note</p><li>...</li></ul>. Onları bir <li> içine ya da listenin dışına taşı.
Madde işaretlerini ya da numaraları • ve <br> ile elle yazmak. Ekran okuyucular bir liste değil, bir paragraf duyar.
padding: 0 olmadan list-style: none, bu da gizemli bir 40 piksellik girinti bırakır.
Görünüşü için <ol> kullanmak. Sıra önemli değilse <ul> kullan ve ona stil ver.

Sıkça Sorulan Sorular

HTML'de madde işaretli liste nasıl yapılır?

Sırasız bir liste kullan: her madde için bir <li> olacak şekilde <ul>, örneğin <ul><li>Milk</li><li>Eggs</li></ul>. Tarayıcı her maddenin önüne bir madde işareti çizer ve listeye girinti verir.

ul ile ol arasındaki fark nedir?

<ul> sırasız listedir, madde işaretleriyle gösterilir ve sıranın önemli olmadığı öğeler içindir. <ol> sıralı listedir, numaralarla gösterilir ve sıranın önemli olduğu adımlar ve sıralamalar içindir. İkisi de <li> öğeleri barındırır.

HTML'de bir listeden madde işaretlerini nasıl kaldırırım?

CSS'te <ul> elementine list-style: none ver. Tarayıcının madde işaretleri için eklediği girintiyi kaldırmak için ayrıca padding-inline-start: 0 (ya da padding: 0) ayarla.

Sıralı bir listeyi farklı bir sayıdan nasıl başlatırım?

start özelliğini kullan: <ol start="5"> ilk öğeyi 5 olarak numaralandırır. reversed geriye doğru sayar, bir <li> üzerindeki value da o öğenin ve ondan sonrakilerin numarasını belirler.

HTML'de iç içe liste nasıl yapılır?

İçteki <ul> ya da <ol> listesini, dıştaki listenin bir <li> öğesinin içine, o öğenin metninden sonra koy. Başka bir <ul> içine, <li> elementlerinin arasına doğrudan konan bir liste geçersizdir.

İlgili kavramlar