Lista nienumerowana w HTML

Lista nienumerowana w HTML — co to jest?

Lista nienumerowana (wypunktowana) to lista, w której elementy oznaczone są punktorami (kropkami), a nie kolejnymi numerami. Tworzy się ją znacznikiem <ul> (od ang. unordered list — lista nieuporządkowana), a każdy element umieszcza się w znaczniku <li> (list item).

Listę nienumerowaną stosuje się, gdy kolejność elementów nie ma znaczenia — w odróżnieniu od listy numerowanej <ol>. To jeden z podstawowych tematów z kwalifikacji INF.03 (Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych).

Podstawowa składnia

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

W przeglądarce wyświetli się jako:

• HTML
• CSS
• JavaScript

Domyślnie każdy element poprzedza kropka (punktor). Kolejności nie trzeba ustalać — elementy są równorzędne.

Znaczniki listy nienumerowanej

Znacznik <li> jest wspólny dla list nienumerowanych <ul> i numerowanych <ol>.

Kiedy używać listy nienumerowanej?

Znacznika <ul> używa się, gdy elementy są równorzędne i nie wymagają numeracji:

• menu nawigacyjne strony (najczęstsze zastosowanie!),
• lista technologii lub funkcji,
• lista cech / zalet produktu,
• wypunktowanie informacji,
• lista składników (gdy kolejność nieważna).

Jeśli kolejność ma znaczenie (kroki, ranking, instrukcja) — używa się listy numerowanej <ol>.

Menu nawigacyjne z listy

Najczęstsze praktyczne użycie <ul> to menu nawigacyjne — linki umieszcza się w elementach listy, a CSS-em usuwa punktory i układa poziomo:

<nav>
  <ul>
    <li><a href="/">Strona główna</a></li>
    <li><a href="/o-nas">O nas</a></li>
    <li><a href="/kontakt">Kontakt</a></li>
  </ul>
</nav>

Rodzaje punktorów (CSS list-style-type)

Domyślny punktor (kropkę) można zmienić właściwością CSS list-style-type:

ul {
  list-style-type: square;
}

Własny obrazek jako punktor — list-style-image

Punktorem może być własny obrazek, ustawiony właściwością CSS list-style-image:

ul {
  list-style-image: url('rys.gif');
}

Taki zapis spowoduje, że przed każdym elementem listy <ul> pojawi się obrazek rys.gif zamiast standardowej kropki. To częste pytanie egzaminacyjne — list-style-image: url('rys.gif') zastępuje punktory wskazaną grafiką.

Listy zagnieżdżone

Listę nienumerowaną można zagnieżdżać — umieszczając <ul> wewnątrz <li>:

<ul>
  <li>Owoce
    <ul>
      <li>jabłka</li>
      <li>gruszki</li>
    </ul>
  </li>
  <li>Warzywa
    <ul>
      <li>marchew</li>
      <li>seler</li>
    </ul>
  </li>
</ul>

Domyślnie zagnieżdżone poziomy mają różne punktory (kropka → okrąg → kwadrat). To podstawa rozwijanych menu wielopoziomowych.

Stylowanie listy nienumerowanej (CSS)

ul {
  list-style: none;     /* usuwa punktory */
  padding: 0;
  margin: 0;
}

ul li {
  display: inline-block; /* poziomy układ — menu */
  margin-right: 20px;
}

To typowy zestaw reguł do zbudowania poziomego menu z listy <ul>.

Trzy rodzaje list w HTML

To kluczowe rozróżnienie egzaminacyjne:

Elementy <ul> i <ol> oznacza się znacznikiem <li>, a w <dl> używa się pary <dt> + <dd>.

Więcej w hasłach lista numerowana w HTML i lista definicji w HTML.

Częsty błąd egzaminacyjny

Znaczniki <dt> i <dd> NIE służą do zwykłych list wypunktowanych — należą do listy definicji <dl>. Do listy nienumerowanej zawsze używa się schematu:

<ul>
  <li>element listy</li>
</ul>

Typowe odpowiedzi egzaminacyjne

Częste pomyłki — nie myl tego!

• <ul> ≠ <ol> — <ul> wypunktowuje kropkami (kolejność dowolna), <ol> numeruje (kolejność ważna).
• <ul> to nie <li> — <ul> to cała lista, <li> to pojedynczy element w środku.
• <dt>/<dd> to NIE elementy <ul> — należą do listy definicji <dl>. Element <ul> to zawsze <li>.
• list-style-type ≠ list-style-image — pierwsze zmienia rodzaj punktora (kropka/kwadrat), drugie ustawia własny obrazek.
• <ul> bez <li> nic nie pokaże — elementy muszą być w <li>.
• punktory usuwa się CSS-em (list-style: none), nie atrybutem HTML.
• menu poziome to wciąż <ul> — układ poziomy robi CSS, nie inny znacznik.

Najważniejsze do zapamiętania

Lista nienumerowana w HTML to <ul> (unordered list), z elementami w <li>. Stosuje się ją, gdy kolejność nie ma znaczenia (menu, cechy, technologie). Punktory zmienia CSS: list-style-type (disc, circle, square, none), a własny obrazek ustawia list-style-image: url('plik'). Razem z <ol> (numerowana) i <dl> (definicji) tworzą trzy typy list w HTML. Element listy <ul> i <ol> to zawsze <li> — nigdy <dt>/<dd>.