0Pricing
HTML Academy · Ders

Sırasız Listeler: ul ve li

ul ve li öğeleriyle madde işaretli listeler oluşturmayı öğrenin.

Sırasız Listeler: ul ve li, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Sırasız Liste Nedir

Sırasız liste, öğeleri madde işaretleriyle — points sıralamanın önemli olmadığı durumlarda — görüntüler:

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

ul Elementi

<ul> (sırasız liste) elementi listeyi kapsar. Yalnızca <li> elements doğrudan alt öğe olmalıdır:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
<!-- ul = unordered list (bullet points by default) -->
<!-- li = list item -->
<!-- Never put text directly inside ul without li -->

CSS ile Madde İşaretlerini Biçimlendirme

Liste işaretlerini CSS ile denetleyin:

ul {
  list-style-type: disc;       /* default: filled circle */
  /* circle, square, none */
}

/* Custom bullet with ::before */
ul li::before {
  content: '→ ';
  color: blue;
}

/* Remove all list styling: */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul Olarak Gezinme

Gezinme menüleri anlamsal olarak bağlantılardan oluşan bir listedir:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

li Her Türlü İçeriği İçerebilir

Liste öğeleri her türlü akış içeriğini barındırabilir:

<ul>
  <li>
    <strong>HTML</strong>
    <p>The structure of the web.</p>
  </li>
  <li>
    <strong>CSS</strong>
    <p>The presentation layer.</p>
  </li>
</ul>

Satır İçi Listeler

Liste öğelerini CSS ile yatay olarak görüntüleyin:

<ul class="inline-list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>

<!-- CSS: -->
<!--
.inline-list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}
-->

ul İçin Anlamsal Kullanımlar

Sırasız listeler için yaygın anlamsal kullanımlar:

  • Gezinme menüleri
  • Özellik listeleri
  • Etiket bulutları
  • İlgili bağlantılar
  • Yemek tariflerindeki malzeme listeleri

Birden Fazla Öğe için ul ve p

Birbiriyle ilişkili birden fazla öğeniz olduğunda liste, ayrı paragraflardan anlamsal olarak daha uygundur:

<!-- Bad: items that are actually a list -->
<p>- HTML</p>
<p>- CSS</p>
<p>- JavaScript</p>

<!-- Good: -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

list-style-image ile Liste İşaretleri

Liste madde işareti olarak özel bir görsel kullanın:

ul {
  list-style-image: url('/icons/check.svg');
}

/* More reliable: use background-image on li::before */
ul li {
  list-style: none;
  padding-left: 1.5rem;
  background: url('/icons/check.svg') no-repeat left center;
  background-size: 1rem;
}

list-style Kısa Yazımı

list-style kısa yazımı türü, konumu ve görseli ayarlar:

ul {
  list-style: square inside;    /* type + position */
  list-style: none;             /* remove bullets */
}

/* list-style-position: inside vs outside */
ul {
  list-style-position: inside;  /* bullet inside padding box */
  /* outside = default, bullet outside text block */
}

Erişilebilirlik

Listeler için erişilebilirlik notları:

  • Ekran okuyucular liste türünü ve öğe sayısını duyurur
  • list-style: none kullanmak, bazı ekran okuyucuların listeyi liste olarak duyurmamasına neden olabilir — anlamsal yapıyı korumak için role="list" ekleyin
<ul style="list-style: none" role="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Hızlı Kontrol

ul öğesinin geçerli tek doğrudan alt öğesi nedir?

Özet: Sırasız Listeler

Sırasız listelerin temel özellikleri:

  • <ul>, sıralamanın önemli olmadığı bir listeyi kapsar
  • <li>, geçerli tek doğrudan alt öğedir
  • Varsayılan madde işareti: disc; list-style-type ile değiştirin
  • Gezinme menüleri anlamsal olarak bağlantı listelerinden oluşan <ul> listeleridir
  • CSS ile madde işaretlerini kaldırırsanız role="list" ekleyin

Sıkça Sorulan Sorular

“Sırasız Listeler: ul ve li” dersi ücretsiz mi?

Evet — “Sırasız Listeler: ul ve li” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Sırasız Listeler: ul ve li” dersinde ne öğreneceğim?

ul ve li öğeleriyle madde işaretli listeler oluşturmayı öğrenin. HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Sırasız Listeler: ul ve li” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Sırasız Listeler: ul ve li
  2. Sıralı Listeler: ol, start, reversed ve type
  3. Açıklama Listeleri: dl, dt ve dd
  4. İç İçe Listeler ve Liste Biçimlendirme
← HTML Academy Sayfasına Dön