Kolejne ważne, bo często stosowane w praktyce tagi HTML to listy (numerowane i nienumerowane). Czasem nazywamy je także uporządkowanymi i nieuporządkowanymi. Po jeszcze więcej informacji na temat list odsyłam do czwartego odcinka kursu video (tak naprawdę artykuł ten stanowi pomocne notatki do tegoż epizodu). Zaczynajmy!

Lista nieuporządkowana (nienumerowana)

z ang. unordered list – jest definiowana przez znaczniki <ul></ul>, zaś pojedynczy element takiej listy zamknięty jest w znacznikach <li></li> - z ang. list item).

Widok w kodzie HTML:

 <ul>
    <li>Królestwa Północy</li>
    <li>Scoia'tael</li>
    <li>Cesarstwo Nilfgaardu</li>
    <li>Skellige</li>
 </ul> 

Rezultat w przeglądarce:

• Królestwa Północy
• Scoia'tael
• Cesarstwo Nilfgaardu
• Skellige

Lista uporządkowana (numerowana)

z ang. ordered list – jest definiowana przez znacznik <ol></ol>, zaś pojedynczy element takiej listy również zamknięty jest w znacznikach <li></li>

Widok w kodzie HTML:

 <ol>
    <li>Królestwa Północy</li>
    <li>Scoia'tael</li>
    <li>Cesarstwo Nilfgaardu</li>
    <li>Skellige</li>
 </ol> 

Rezultat w przeglądarce:

1. Królestwa Północy
2. Scoia'tael
3. Cesarstwo Nilfgaardu
4. Skellige

Zagnieżdżanie list

Oczywiście w niektórych przypadkach zajdzie potrzeba tzw. zagnieżdżenia list, czyli stworzenia listy wewnętrznej wewnątrz znaczników <li></li> listy zewnętrznej. W poniższym przykładzie lista zewnętrzna to lista numerowana, a wewnętrzna to lista nienumerowana (choć równie dobrze można by zagnieździć je odwrotnie):

 <ol>
    <li>Królestwa Północy
         <ul>
           <li>Sigismund Dijkstra</li>
           <li>Keira Metz</li>
         </ul>
    </li>
    <li>Scoia'tael
        <ul>
           <li>Iorveth</li>
           <li>Isengrim Faoiltiarna</li>
        </ul>
    </li>
 </ol> 

Rezultat w przeglądarce:

1. Królestwa Północy
   • Sigismund Dijkstra
   • Keira Metz
2. Scoia'tael
   • Iorveth
   • Isengrim Faoiltiarna

 

żródło