Znacznik li

HTML4 HTML5

<li>...</li>

Definiuje element listy.

Oba znaczniki, otwierający i zamykający, są obowiązkowe.

Przykład 1

<ol>
  <li>Pierwszy</li>
  <li>Drugi</li>
  <li>Trzeci</li>
  <li>Czwarty</li>
</ol>

 Przeglądarka zinterpretuje ten kod następująco:

Wygląd elementu listy możemy modyfikować za pomocą atrybutów:

value="liczba" - określa numer nadawany elementowi,

type="wartość" - HTML5 nie obsługuje tego atrybutu, określa rodzaj  typ numeracji lub punktowania elementu listy:

• 1 - element listy numerowany za pomocą dziesiętnej liczby naturalnej - obsługiwany w HTML4,
• A - element listy numerowany za pomocą wielkiej litery alfabetu łacińskiego,
• a - element listy numerowany za pomocą małej litery alfabetu łacińskiego,
• I - element listy numerowany za pomocą liczby rzymskiej zapisanej wielkimi literami,
• i - element listy numerowany za pomocą liczby rzymskiej zapisanej małymi literami,
• disc - element wypunktowany za pomocą dużej kropki,
• square - element wypunktowany za pomocą dużej wypełnionego kwadracika,
• circle - element wypunktowany za pomocą dużej okręgu.

Przykład 2

Pierwsza lista:
<ol>
  <li>Pierwszy</li>
  <li value="4">Drugi</li>
  <li>Trzeci</li>
</ol>
Druga lista:
<ul>
  <li>Długopis</li>
  <li type="i" value="5">Pióro</li>
  <li type="A">Ołówek</li>
  <li type="circle">Kredka</li>
</ul>

 Przeglądarka zinterpretuje ten kod następująco:

 W pierwszej liście przy pomocy atrybutu value zmodyfikowaliśmy numer drugiego elementu listy nadając mu wartość 4. Następny element uzyskał kolejny numer - 6.

W drugiej liście zmodyfikowaliśmy drugi element listy punktowanej. Po pierwsze określiliśmy, że ma być poprzedzony numerem elementu zapisanym za pomocą liczby rzymskiej wypisane małymi literami, po drugie określiliśmy, że wartość tego numeru ma wynosić 5 (rzynskie v).

Trzeci element listy również został zmodyfikowany - wypisanie wartości przy pomocy wielkiej litery alfabetu łacińskiego. Ponieważ poprzedni element miał wartość 5, numer tego elementu jest o 1 większy i wynosi 6, element został więc ostatecznie poprzedzony szóstą literą alfabetu łacińskiego (F).

Atrybut type="circle" przy ostatnim elemencie listy określa, że znakiem wypunktowania ma być okrąg.