Listy#

Lista nieuporządkowana#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<ul>
	<li>Punkt pierwszy</li>
	<li>Punkt drugi</li>
	<li>Punkt trzeci</li>
</ul>

Polecenie pozwala utworzyć wykaz wypunktowany (nieuporządkowany), w którym kolejność umieszczanych po sobie elementów jest nieistotna (np. kolekcja linków).

Cała treść zawiera się w elemencie ul (unordered list). Za pomocą znaczników <li>...</li> (list item) definiujemy poszczególne punkty listy.

W przeglądarkach internetowych zawartość tagu li zazwyczaj przesunięta jest w prawo, dzięki czemu lista staje się czytelniejsza.

W HTML znacznik zamykający dla <li> jest opcjonalny. Natomiast w XHTML jest wymagany.

Dla elementu ul lub li możliwe jest podanie atrybutu type="rodzaj punktora" z następującymi opcjami wypunktowania:

Obecnie atrybut TYPE jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Zwracam uwagę, że w obrębie wykazu tekst i inne elementy można wstawiać wyłącznie wewnątrz znaczników punktów wykazu (<li></li>), a nie poza nimi. Poniższy przykład jest nieprawidłowy:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<ul>
	Początek wykazu
	<"del"><br>
	<li>Punkt pierwszy</li>
	<"del"><br>
	<li>Punkt drugi</li>
	<"del"><br>
	<li>Punkt trzeci</li>
</ul>

Listy nieuporządkowane, prócz pierwotnego przeznaczenia, wykorzystywane są do budowy menu nawigacyjnych dla całej strony internetowej. Moim zdaniem lista ol lepiej oddaje semantykę menu, ponieważ pozycję menu są w istocie uporządkowane.

Krótkie przykłady poprawnego zastosowania wykazu nieuporządkowanego:

Kod:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<ul type="circle">
	<li>Link do książki kucharskiej</li>
	<li>Link do kursu HTML</li>
	<li>Link do forum filmowego</li>
	<li>Link do magazynu sportowego</li>
</ul>

Efekt:

Kod:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<ul type="square">
	<li>Element listy bez oznaczenia (dziedziczy z ul)</li>
	<li type="disc">Element listy oznaczony przez disc</li>
	<li type="circle">Element listy oznaczony przez circle</li>
	<li type="square">Element listy oznaczony przez square</li>
</ul>

Efekt:

Ciekawostki#

Manewrując odpowiednio stylami, możemy sprawić, aby kolor wyróżnika (markera) różnił się od koloru pozostałej treści:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<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>
Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Listy (H1) Lista nieuporządkowana (H2) Ciekawostki (H3)