3 rodzaje list HTML i jak z nich korzystać

Istotne elementy list w HTML

• Listy HTML to podstawowy sposób na strukturyzację i prezentację danych na stronach internetowych. Wyróżniamy trzy główne rodzaje: listy numerowane, wypunktowane oraz listy definicji.
• Listy numerowane pozwalają na uporządkowanie elementów za pomocą liczb, liter lub cyfr rzymskich. Atrybut „type” umożliwia modyfikację sposobu numerowania, a „start” i „reversed” wpływają na punkt początkowy i kolejność.
• Listy wypunktowane służą do grupowania powiązanych ze sobą elementów bez narzuconej kolejności. Wygląd punktora można dostosować za pomocą CSS.

Listy HTML stanowią kluczową strukturę w organizacji powiązanych danych na witrynach internetowych. Bez względu na to, czy projektujesz menu, organizujesz promocje, czy prezentujesz skomplikowane informacje w przystępniejszej formie, użycie list znacząco ułatwi Ci to zadanie.

W HTML mamy do dyspozycji trzy typy list, każda z nich służy do specyficznych celów strukturalnych podczas tworzenia stron internetowych.

1. Lista numerowana

Lista numerowana (uporządkowana) HTML pozwala na prezentację elementów w konkretnej sekwencji. Do jej utworzenia stosujemy znacznik <ol>. Ten tag grupuje i zawiera w sobie znaczniki <li>, gdzie każdy z nich reprezentuje pojedynczy punkt na liście.

   <ol>
      <li>Element pierwszy</li>
      <li>Element drugi</li>
      <li>Element trzeci</li>
      <li>Element czwarty</li>
    </ol>
  

Powyższy kod zostanie wyświetlony jako:

Domyślnie, elementy na liście numerowanej są porządkowane przy użyciu cyfr arabskich. Istnieje jednak możliwość zmiany tego za pomocą atrybutu „type”. „Type” umożliwia wybór innego sposobu numerowania, np. liter (wielkich lub małych), czy cyfr rzymskich (wielkich lub małych).

   <ol type="a">
      <li>Element pierwszy</li>
      <li>Element drugi</li>
      <li>Element trzeci</li>
      <li>Element czwarty</li>
    </ol>
  

Dodanie atrybutu „type” do znacznika <ol> sprawia, że lista będzie wyglądać następująco:

Oprócz „type”, do znacznika <ol> możemy dodać atrybuty „start” i „reversed”.

Atrybut „start” pozwala na określenie, od jakiej wartości ma się zacząć numerowanie listy, używając do tego liczb całkowitych. Przykładowo, „start=’3′”, bez dodatkowego określenia typu, spowoduje rozpoczęcie numerowania od liczby 3. Podobnie, przy „type=’a'” lub „type=’I'”, numerowanie zacznie się odpowiednio od litery „c” lub cyfry rzymskiej „III”.

   <ol type="I" start="3">
      <li>Element pierwszy</li>
      <li>Element drugi</li>
      <li>Element trzeci</li>
      <li>Element czwarty</li>
    </ol>
  

Powyższy kod wygeneruje:

Atrybut „reversed” służy do odwrócenia kolejności numeracji na liście. Przyjmuje wartość logiczną (true/false), domyślnie jest ustawiony na „false”.

    <ol reversed="true">
      <li>Element pierwszy</li>
      <li>Element drugi</li>
      <li>Element trzeci</li>
      <li>Element czwarty</li>
    </ol>
  

Ten kod wygeneruje w przeglądarce:

2. Lista wypunktowana

Lista nieuporządkowana (wypunktowana) pozwala na grupowanie powiązanych elementów, gdzie kolejność nie ma znaczenia. Domyślnie, każdy element jest oznaczony za pomocą punktora.

Aby stworzyć nową listę wypunktowaną, użyj znacznika <ul> jako kontenera dla tagów <li>, reprezentujących poszczególne pozycje na liście:

    <ul>
      <li>Element pierwszy</li>
      <li>Element drugi</li>
      <li>Element trzeci</li>
      <li>Element czwarty</li>
    </ul>
  

Powyższy kod wyświetli się w następujący sposób:

Domyślnym stylem punktora jest dysk. Kiedyś atrybut „type” służył do zmiany wyglądu punktora, ale aktualnie jest przestarzały. Zalecaną metodą modyfikacji stylu listy wypunktowanej jest użycie właściwości CSS „list-style-type”.

    <style>
      ul { list-style-type: square; }
    </style>
  

Powyższy kod zaktualizuje wygląd listy do:

Właściwość CSS „list-style-type” oferuje szeroki wybór stylów punktora, włączając okręgi, własne obrazki, ikony i inne symbole. Dzięki CSS, a dokładniej modyfikacji rozmieszczenia elementów listy, można za jej pomocą tworzyć np. paski nawigacyjne.

Listy zagnieżdżone

Lista zagnieżdżona to element listy, który jest częścią innej listy. Można ją utworzyć poprzez kombinację list numerowanych i wypunktowanych. Takie struktury pozwalają na tworzenie bardziej zaawansowanych hierarchii.

   <h3>Przepis na makaron z kurczakiem</h3>
   <ol>
      <li>Ugotuj makaron.</li>
      <li>
        Przypraw pierś z kurczaka.
        <ul>
          <li>solą i pieprzem</li>
          <li>papryką</li>
          <li>czosnkiem w proszku</li>
          <li>ziołami włoskimi</li>
        </ul>
      </li>
      <li>Rozgrzej oliwę w garnku na średnim ogniu.</li>
      <li>Dodaj pierś z kurczaka i smaż przez 5 minut.</li>
      <li>Do pustego garnka dodaj śmietanę i parmezan.</li>
      <li>Dodaj makaron i pokrojonego kurczaka do sosu śmietanowego.</li>
    </ol>
  

Ten kod wygeneruje:

3. Lista definicji

Lista definicji pozwala na stworzenie listy terminów wraz z ich opisami. Do utworzenia takiej listy służy tag <dl>, który w połączeniu z elementami <dt> (termin) i <dd> (opis) tworzy strukturę definicji.

    <h3>Popularne Laptopy</h3>
    <dl>
      <dt>MacBook Pro</dt>
      <dd>
        Zapewnia do 22 godzin pracy na baterii,
        ma zaawansowaną kamerę oraz klawiaturę magiczną z Touch ID.
      </dd>
      <dt>MSI GS76 Stealth</dt>
      <dd>
        Potężny laptop gamingowy z wydajną grafiką i konfigurowalnymi klawiszami.
      </dd>
    </dl>
  

Powyższy kod zostanie wyświetlony jako:

Dobierz właściwą listę HTML do swojej treści

Wybór odpowiedniej listy HTML w projektowaniu stron internetowych zależy od rodzaju treści, którą chcesz zaprezentować. Przykładowo, jeśli chcesz przedstawić sekwencyjną listę kroków, np. w przepisie kulinarnym, najlepszym wyborem będzie lista numerowana.

Jeżeli natomiast zamierzasz zgrupować powiązane informacje, które nie wymagają kolejności, np. listę kontrolną, bardziej odpowiednia będzie lista wypunktowana. Z kolei, tworząc słownik czy listę najczęściej zadawanych pytań, idealna będzie lista definicji.