İç içe listeler

Listeleri iç içe geçirerek hiyerarşik yapılar kurmayı öğrenirsin.

İç içe liste nedir?

Bazen bir liste öğesinin altında başka bir liste gerekir. Buna iç içe liste denir. Alt liste, bir <li> öğesinin içine yeni bir <ul> ya da <ol> açılarak yazılır.

Örnek: bir kitaplıkta 'Programlama' altında 'Python' ve 'JavaScript' olabilir. Üst liste kategorileri, alt liste o kategorinin başlıklarını taşır. Doğru kapanış etiketlerine dikkat etmek burada çok önemlidir.

Girinti ve okunabilirlik

İç içe listelerde girinti (indentation) sadece estetik değil, anlam taşır. Her seviyeyi bir adım içeri yazmak, hangi etiketin hangisinin içinde olduğunu gözle gösterir.

Hatalı kapanış etiketi, iç içe listede en sık yapılan hatadır. Önce içtekini kapat, sonra dıştakini. Tarayıcı yanlış girintiyi yok sayar ama kapanış sırasını yanlış yaparsan liste dağılır.

Uygulama İki seviyeli iç içe liste yaz

Body içine iç içe bir <ul> listesi ekle. Üst listede en az iki <li> olsun; ilk öğenin içinde bir alt <ul> daha olsun (örneğin Meyveler altında Elma ve Armut, ayrıca Sebzeler öğesi).

Örnek çözümü göster

<body>
  <ul>
    <li>Meyveler
      <ul>
        <li>Elma</li>
        <li>Armut</li>
      </ul>
    </li>
    <li>Sebzeler</li>
  </ul>
</body>

Kendini test et

İç içe listede alt liste nereye yazılır?
- Bir <li> etiketinin içine
- <ul> etiketinin dışına, kardeş bir liste olarak
- <body> içine ama li'den tamamen ayrı
- Listenin en başına, ilk li'den önce
Cevabı göster

Bir <li> etiketinin içine — Doğru. Alt liste bir <li> öğesinin içine açılır; böylece iç içelik kurulur.

Alt listeyi kapat

<ul>
  <li>Hayvanlar
    <ul>
      <li>Kedi</li>
      <li>Köpek</li>
____
  </li>
</ul>

Cevabı göster

<ul>
  <li>Hayvanlar
    <ul>
      <li>Kedi</li>
      <li>Köpek</li>
</ul>
  </li>
</ul>

Senaryoyu liste türüyle eşleştir

Tarif malzemeleri

Sırasız liste (ul)
Yarış sıralaması

Sıralı liste (ol)
Sözcük ve anlamı

Açıklama listesi (dl)
Menü ve alt öğeler

İç içe liste

Sıradaki ders: Liste öğelerinde bağlantı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler