Przejdź do treści

Wykaz <ul, ol, li>

Jak wprowadzić na stronę wykaz: wypunktowanie (lista nieuporządkowana) lub numerowanie (lista uporządkowana)?

(lista wyliczeniowa)

Potrzebujesz pomocy?
Przy tworzeniu wykazów HTML możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. Dzięki niemu w kilka minut skonfigurujesz dowolny, nawet najbardziej skomplikowany układ numeracji albo punktów i podpunktów.

Wypunktowanie - lista nieuporządkowana <ul, li>

<ul>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ul>

wyświetlanie: w bloku

Zwracam uwagę, że w obrębie wykazu tekst i inne elementy można wstawiać tylko wewnątrz znaczników punktów wykazu, a nie poza nimi! Zatem poniższy kod będzie nieprawidłowy:

<ul>
Wykaz...
<li>Punkt pierwszy</li>
<br>
<li>Punkt drugi</li>
<br>
</ul>

Przykład <ul, li>

  • Punkt pierwszy
  • Punkt drugi
  • Punkt trzeci

Dla zainteresowanych
Jeśli za mało Ci typów wypunktowania wykazów wbudowanych w język HTML, zobacz rozdziały CSS: Typ stylu wykazu, Wyróżnik obrazkowy wykazu.

Wykaz numerowany - lista uporządkowana <ol, li>

<ol>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>

wyświetlanie: w bloku

Przykład <ol, li>

  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci

Wykaz numerowany - różne typy

<ol type="rodzaj numeracji">
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>
gdzie jako "rodzaj numeracji" należy podać:
  • "1" (domyślny) - numeracja według liczb arabskich
  • "I" - według dużych liczb rzymskich
  • "i" - według małych liczb rzymskich
  • "a" - według małych liter
  • "A" - według dużych liter

Przykład <ol type, li>

<ol type="1"> (domyślny)

  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci

<ol type="I">

  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci

<ol type="i">

  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci

<ol type="A">

  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci

<ol type="a">

  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci

Dla zainteresowanych
Jeśli za mało Ci typów numeracji wykazów wbudowanych w język HTML albo oczekujesz bardziej złożonego sposobu oznaczania punktów i podpunktów, zobacz rozdziały CSS: Typ stylu wykazu, Automatyczne numeracja wykazu.

Wykaz numerowany z podaniem początkowego numeru

<ol start="n">
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>
gdzie jako "n" należy podać liczbę, od której ma się rozpocząć numerowanie.

Wartość atrybutu START zawsze musi być liczbą, nawet jeśli numerowanie następuje według liter!

Przykład <ol start, li>

Przykład

Zmiana numerowania w trakcie

<ol>
<li>Punkt pierwszy</li>
<li value="n">Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>
gdzie jako "n" należy podać zmieniony numer punktu (następne punkty będą numerowane według zmienionej kolejności).

Wartość atrybutu VALUE zawsze musi być liczbą, nawet jeśli numerowanie następuje według liter!

Przykład <ol, li value>

Przykład

Wykaz z wypunktowaniem innym kolorem

Stosując pewną "sztuczkę", można uzyskać wykaz, którego wyróżniki (markery) będą miały inny kolor niż reszta tekstu:

<ul style="color: red">
<li><span style="color: black">Punkt pierwszy</span></li>
<li><span style="color: black">Punkt drugi</span></li>
<li><span style="color: black">Punkt trzeci</span></li>
</ul>
gdzie w miejsce wyróżnionych wyrazów należy wpisać definicje kolorów, przy czym "red" oznacza kolor, jaki mają przyjąć wyrózniki, natomiast "black" - kolor tekstu.

Przykład <ul "color", ol "color">

  • Punkt pierwszy
  • Punkt drugi
  • Punkt trzeci

Dotyczy to wszystkich typów wykazu:

  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci
  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci

Możliwe jest również określenie innego koloru dla każdego punktu wykazu:

<ul>
<li style="color: red"><span style="color: black">Punkt pierwszy</span></li>
<li style="color: green"><span style="color: black">Punkt drugi</span></li>
<li style="color: blue"><span style="color: black">Punkt trzeci</span></li>
</ul>
  • Punkt pierwszy
  • Punkt drugi
  • Punkt trzeci

Wykaz w akapicie

Na koniec ważna wskazówka. Często może się zdarzyć tak, że chcemy umieścić wykaz wewnątrz akapitu. Efekt będzie prawdopodobnie inny niż oczekiwaliśmy. Akapit nie jest zwykłym elementem blokowym, ponieważ nie może zawierać innych elementów blokowych (m.in. wykazów). Zakończy się on po napotkaniu pierwszego elementu blokowego, nawet przed znacznikiem zamykającym </p>. W języku HTML nie jest to błąd, natomiast w XHTML już tak.

Przykład <p, ul, li>

Po wpisaniu:

<p style="text-align: center">
Tu rozpoczyna się akapit...
<ul>
<li>Punkt pierwszy wykazu</li>
<li>Punkt drugi wykazu...</li>
</ul>
...tu powinien skończyć się akapit.
</p>

otrzymamy:

Tu rozpoczyna się akapit...

  • Punkt pierwszy wykazu
  • Punkt drugi wykazu...

...tu powinien skończyć się akapit.

Jak widać akapit zakończył się przed wykazem, ponieważ ostatnia linijka nie została ustawiona na środku (tak jak pierwsza). Aby to zmienić, należy rozpocząć nowy akapit tuż za wykazem i określić dla niego odpowiednie atrybuty lub ewentualnie zamiast akapitu użyć bloku.

Pytania i odpowiedzi <ul, ol, li>

Czym się różni tag UL od OL?

Element UL tworzy listę nieuporządkowaną (ang. unordered list) w postaci wypunktowania, natomiast UL - listę uporządkowaną (ang. ordered list) w postaci numeracji. Aby rozpoznać, którego elementu należy użyć w danej sytuacji, najlepiej zadać sobie pytanie: czy po przestawieniu elementów listy nadal będzie miała ona sens logiczny? Jeśli tak, lepiej skorzystać z listy nieuporządkowanej. Natomiast w przypadku kiedy opisujemy np. listę kroków, które należy wykonać w określonej kolejności, właściwym znacznikiem będzie lista uporządkowana.

Jak zrobić listę kropkowaną HTML?

W celu wstawienia listy nieuporządkowanej najpierw wstawiamy znacznik <ul>...</ul>, a następnie wewnątrz niego kolejne punkty listy - każdy w osobnym znaczniku <li>...</li>.

Co to jest LI w HTML?

Jest to element listy (ang. list item), który umieszcza się wewnątrz znacznika <ul>...</ul> lub <ol>...</ol>. Służy on do wstawienia kolejnych punktów listy nieuporządkowanej (wypunktowanie) i uporządkowanej (numeracja).

Przeglądarki


Chrome
Firefox
Edge
Opera
Safari
<li>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		3
2007-10-26
<li type>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<li value>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<ol>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<ol reversed>18
2012-03-28		18
2013-01-08		≤79
2020-01-15		15
2013-07-02		6
2012-07-25
<ol start>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<ol type>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<ul>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<ul type>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

Komentarze

Zobacz więcej komentarzy

Facebook