Listy nienumerowane są jednym z podstawowych narzędzi do organizowania i prezentowania treści na stronach internetowych. Pozwalają one na grupowanie elementów w sposób, który jest czytelny dla użytkowników i ułatwia zrozumienie hierarchii informacji. Aby stworzyć listę nienumerowaną, korzystamy z następujących znaczników: <ul> i <li>.

Użycie znacznika <ul>: Znacznik <ul> definiuje początek listy nienumerowanej. To wewnątrz niego umieszczamy poszczególne elementy listy.

Zastosowanie znacznika <li>: Znacznik <li> służy do definiowania poszczególnych punktów wewnątrz listy. Każdy punkt umieszczamy między znacznikami <li> i </li>.

Przykład praktycznego wykorzystania list nienumerowanych:

Załóżmy, że tworzysz artykuł o korzyściach zdrowotnych różnych owoców. Chcesz przedstawić listę owoców, które są bogate w witaminy. Oto jak mogłaby wyglądać taka lista w kodzie HTML:

<ul>
  <li>Jabłka</li>
  <li>Pomarańcze</li>
  <li>Banany</li>
  <li>Truskawki</li>
  <li>Winogrona</li>
</ul>

Wynikowy efekt na stronie byłby następujący:

• Jabłka
• Pomarańcze
• Banany
• Truskawki
• Winogrona

Dzięki znacznikom <ul> i <li> możesz łatwo tworzyć czytelne i uporządkowane listy nienumerowane, które pomogą użytkownikom zrozumieć oraz przyswoić prezentowane informacje. Listy nienumerowane znajdują szerokie zastosowanie w różnych typach treści, od artykułów i przewodników po menu nawigacyjne czy prezentacje produktów.

Wielopoziomowa lista nienumerowana

Tworzenie zagnieżdżonych list nienumerowanych z podpunktami nienumerowanymi i numerowanymi pozwala na jeszcze dokładniejszą organizację treści na stronach internetowych. Możemy to osiągnąć poprzez umieszczenie jednej listy wewnątrz innej. Oto jak to zrobić:

<ul>
  <li>Jedzenie</li>
  <ul>
    <li>Pizza</li>
    <li>Burger</li>
    <li>Spaghetti</li>
  </ul>
  <li>Napoje</li>
  <ul>
    <li>Woda</li>
    <li>Sok pomarańczowy</li>
    <li>Herbata</li>
  </ul>
</ul>

W tym przykładzie mamy główną listę nienumerowaną, a wewnątrz niej dwie zagnieżdżone listy nienumerowane – jedna dotycząca jedzenia, a druga napojów. Każda z tych zagnieżdżonych list zawiera elementy <li>, które reprezentują poszczególne podpunkty.

Możemy również zagnieżdżać listy nienumerowane w listach numerowanych lub odwrotnie. Poniżej znajduje się przykład, w którym zagnieżdżona lista nienumerowana znajduje się wewnątrz listy numerowanej:

<ol>
  <li>Artykuły</li>
  <ul>
    <li>Technologia</li>
    <li>Zdrowie</li>
    <li>Sport</li>
  </ul>
  <li>Porady</li>
  <ul>
    <li>Gotowanie</li>
    <li>Ogród</li>
    <li>Moda</li>
  </ul>
</ol>

Dzięki takim zagnieżdżonym listom możemy tworzyć bardziej zaawansowane układy treści, które są czytelne i uporządkowane. To narzędzie jest przydatne zarówno w artykułach i przewodnikach, jak i w tworzeniu menu nawigacyjnych czy wyliczania różnych opcji.