Listák - Listák egymásba ágyazása

A listák egymásba ágyazhatóak. A HTML szabvány a különböző típusú listák kombinálását sem korlátozza. A következő példa definíciós, számozott és számozatlan listát is tartalmaz:

Hozzávalók

A tea készítéséhez szükséges alapanyagok

• egy csészényi víz
• egy filter tea

Az elkészítés lépései

1. Forrald fel a vizet
2. A filtert tedd bele a vízbe
3. Az elkészült teát ízesítheted:
   • tejjel
   • cukorral
   • mézzel

Aminek a HTML kódja:

<dl>
   <dt>Hozzávalók</dt>
      <dd>A tea készítéséhez szükséges alapanyagok
         <ul>
            <li>egy csészényi víz</li>
            <li>egy filter tea</li>
         </ul>
      </dd>

   <dt>Az elkészítés lépései</dt>
      <ol>
         <li>Forrald fel a vizet</li>
         <li>A filtert tedd bele a vízbe</li>
         <li>Az elkészült teát ízesítheted:
            <ul>
               <li>tejjel</li>
               <li>cukorral</li>
               <li>mézzel</li>
            </ul>
         </li>
      </ol>
</dl>

Beágyaztott listák készítésekor figyelni kell a listaelemek zárótagjainak elhelyezésére, annak érdekében, hogy a HTML kód szerkezete és a lista tartalma azonos logikai felépítést mutasson. A példában a dd elem a számozatlan lista után lett lezárva, mivel az ott beágyazott lista a tea készítéséhez szükséges alapanyagokat részletezi. (Ha a </dd> zárótag a számozatlan lista elé került volna, akkor nem a dd, hanem a dl elem lenne az ul elem szülő eleme.) Ehhez hasonlóan a tea ízesítéséhez használható anyagok listája is az li elemen belül helyezkedik el.