(lista wyliczeniowa)

wyświetlanie: w bloku

Wypunktowanie (podstawowy) - lista nieuporządkowana

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

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:

• Punkt pierwszy
• Punkt drugi
• Punkt trzeci

Wykaz numerowany (podstawowy) - lista uporządkowana

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

Przykład:

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>

Przykład:

<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

Wykaz numerowany z podaniem początkowego numeru

<ol start="n">
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>

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

Zmiana numerowania "w trakcie"

<ol>
<li>Punkt pierwszy</li>
<li value="n">Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>

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

Edytory HTML posiadają często specjalny generator wykazów, który może ułatwić pracę.

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>

• 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

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:

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.