W3 belgelerinde önek bulunan bir iç içe liste örneği vardırDEPRECATED EXAMPLE: , ancak hiçbir zaman kullanımdan kaldırılmamış bir örnekle düzeltilmemiş veya örnekle ilgili sorunun tam olarak ne olduğu açıklanmamıştır.

Peki bir HTML listesi yazmanın doğru yolu bu yollardan hangisidir?

Seçenek 1 : Yuvalanmış <ul>ebeveynin bir alt öğesidir<ul>

<ul>
    <li>List item one</li>
    <li>List item two with subitems:</li>
    <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
    </ul>
    <li>Final list item</li>
</ul>

Seçenek 2 : Yuvalanmış <ul>, <li>ait olduğu bir çocuktur

<ul>
    <li>List item one</li>
    <li>List item two with subitems:
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Final list item</li>
</ul>

Seçenek 2 doğrudur.

İç içe liste, iç içe olduğu listenin bir <li>öğesinin içinde olmalıdır .

Listelerdeki W3C Wiki'sine bağlantı (aşağıdaki yorumdan alınmıştır): HTML Wiki Listeleri .

HTML5 W3C ulspesifikasyonuna bağlantı: HTML5ul . Bir ulöğenin tam olarak sıfır veya daha fazla liöğe içerebileceğini unutmayın . Aynısı HTML5 için deol geçerlidir . Açıklama listesi ( HTML5dl ) benzer, ancak her ikisi de sağlar dtve ddelemanları.

Diğer Notlar:

• dl = tanım listesi.
• ol = sıralı liste (numaralar).
• ul = sırasız liste (madde işaretleri).

seçenek 2

<ul>
<li>Choice A</li>
<li>Choice B
  <ul>
    <li>Sub 1</li>
    <li>Sub 2</li>
  </ul>
</li>
</ul>

Yuvalama Listeleri - UL

Seçenek 2 doğrudur: Yuvalanmış <ul>, <li>ait olduğu bir alt öğedir.

Eğer varsa doğrulamak , seçenek 1 html 5'de hata olarak çıkageldi - Kredi: user3272456

Doğru: <ul>çocuğu olarak<li>

HTML iç içe listesi oluşturmanın uygun yolu, ait olduğu <ul>alt öğe olarak iç içe <li>geçmiştir. Yuvalanmış liste, içinde <li>bulunduğu liste öğesinin içinde olmalıdır .

<ul>
    <li>Parent/Item
        <ul>
            <li>Child/Subitem
            </li>
        </ul>
    </li>
</ul>

Yuvalama Listeleri için W3C Standardı

Liste öğesi başka bir listenin tamamını içerebilir - bu listeye "iç içe yerleştirme" olarak bilinir. Bu makalenin başındaki gibi içindekiler gibi şeyler için kullanışlıdır:

1. Birinci bölüm
   1. Bölüm Bir
   2. İkinci Bölüm
   3. Üçüncü Bölüm
2. İkinci bölüm
3. Üçüncü bölüm

Yuva listelerinin anahtarı, yuvalanmış listenin belirli bir liste öğesiyle ilgili olması gerektiğini hatırlamaktır. Bunu kodda yansıtmak için iç içe liste bu liste öğesinin içinde bulunur. Yukarıdaki listenin kodu şuna benzer:

<ol>
  <li>Chapter One
    <ol>
      <li>Section One</li>
      <li>Section Two </li>
      <li>Section Three </li>
    </ol>
  </li>
  <li>Chapter Two</li>
  <li>Chapter Three  </li>
</ol>

İç içe listenin <li>ve içerdiği liste öğesinin metninden sonra nasıl başladığına dikkat edin (“Birinci Bölüm”); ardından </li>içeren liste öğesinden önce biter . Yuvalanmış listeler, web sitesinin hiyerarşik yapısını tanımlamanın iyi bir yolu olduğu için genellikle web sitesi gezinme menülerinin temelini oluşturur.

Teorik olarak istediğiniz sayıda listeyi iç içe yerleştirebilirsiniz, ancak pratikte listeleri çok derinlere yerleştirmek kafa karıştırıcı olabilir. Çok büyük listeler için, içeriği bunun yerine başlıkları olan birkaç listeye ayırmak, hatta ayrı sayfalara bölmek daha iyi olabilir.

Doğrularsanız, seçenek 1, html 5'te hata olarak görünür, bu nedenle seçenek 2 doğrudur.

İkinci seçeneği tercih ediyorum, çünkü liste öğesini o iç içe listenin sahibi olarak açıkça gösteriyor. Her zaman anlamsal olarak sağlam HTML'ye yaslanırım.

Yuvalama listeleri için "ul" yerine TAG "dt" yi kullanmayı düşündünüz mü? Stil ve yapı devralma, bölüm başına bir başlık almanıza izin verir ve içeri giren içeriği otomatik olarak tablo haline getirir.

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

VS

<ul>
   <li>Choice A</li>
   <li>Choice B
      <ul>
         <li>Sub 1</li>
         <li>Sub 2</li>
      </ul>
   </li>
</ul>

Burada belirtilmeyen, seçenek 1'in listelerin keyfi olarak iç içe yerleştirilmesine izin vermesidir.

İçeriği / css'yi kontrol etmeniz önemli değildir, ancak zengin bir metin düzenleyicisi oluşturuyorsanız kullanışlı olur.

Örneğin, gmail, gelen kutusu ve evernote gibi tüm listelerin oluşturulmasına izin verilir:

Seçenek 2 ile bunu yapamazsınız (ekstra bir liste öğeniz olacak), seçenek 1 ile yapabilirsiniz.