Ostatnio edytowany:

li

Autor: Virtual Patriot

Przeznaczenie elementu li

Element li reprezentuje element listy uporządkowanej (ol) lub element listy nieuporządkowanej (ul).

Dodatkowe techniczne informacje o elemencie li

kategoria ogólna

brak

kontekst zewnętrzny
  • jako element dziecko elementu ol

    Przykładowy Kod HTML

    <ol>
      <li>
        <a href="#rozdzial-1">Rozdział - 1</a>
      </li>
    
      <li>
        <a href="#rozdzial-2">Rozdział - 2</a>
      </li>
    
      <li>
        <a href="#rozdzial-3">Rozdział - 3</a>
      </li>
    </ol>

    Kontekstem zewnętrznym przykładowych elementów "li" jest element "ol", dla którego wspomniane elementy "li" są elementami dziećmi, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "ol", jest prawidłowym kontekstem zewnętrznym dla poszczególnych elementów "li".

  • jako element dziecko elementu ul

    Przykładowy Kod HTML

    <ul>
      <li>
        <a href="#produkty">Produkty</a>
      </li>
    
      <li>
        <a href="#lokalizacja">Lokalizacja</a>
      </li>
    
      <li>
        <a href="#kontakt">Kontakt</a>
      </li>
    </ul>

    Kontekstem zewnętrznym przykładowych elementów "li" jest element "ul", dla którego wspomniane elementy "li" są elementami dziećmi, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "ul", jest prawidłowym kontekstem zewnętrznym dla poszczególnych elementów "li".

kontekst wewnętrzny
zawartość opływająca

Przykładowy Kod HTML

<ul>
  <li>
    <p>Szukasz naszych produktów?</p>
    <a href="#produkty">Zobacz nasze produkty</a>
  </li>

  <li>
    <p>Szukasz naszą lokalizację?</p>
    <a href="#lokalizacja">Zobacz naszą lokalizację</a>
  </li>

  <li>
    <p>Szukasz kontaktu do nas?</p>
    <a href="#kontakt">Zobacz kontakt do nas</a>
  </li>
</ul>

Kontekstem wewnętrznym przykładowych elementów "li" są wyłącznie elementy HTML, które należą do kategorii zawartość opływająca, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "p" oraz element "a", jest prawidłowym kontekstem wewnętrznym dla poszczególnych elementów "li".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

składnia HTML

<li> ... </li>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

tag może zostać pominięty, lecz tylko jeżeli bezpośrednio po danym elemencie li występuje inny element li lub jeżeli bezpośrednio po danym elemencie li nie występuje żadna inna zawartość, która z założenia miałaby należeć do zawartości elementu rodzica danego elementu li

CSS display

list-item

Dodatkowe domyślne reguły CSS elementu li

li {
  display:list-item;
}

Interpretacja elementu li

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis atrybutów elementu li

value

Przeznaczenie atrybutu value

Atrybut value wykorzystany wraz z elementem li określa wartość, jaką ma posiadać dany element li podczas procesu numerowania przez jeden z mechanizmów przeglądarki internetowej.

Atrybut "value" ma sens tylko wtedy gdy dany element "li" jest elementem dzieckiem elementu ol.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu value

liczba

Należy podać liczbę całkowitą.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <ol>
      <li>pierwszy</li>
      <li>drugi</li>
      <li>trzeci</li>
      <li>czwarty</li>
      <li>piąty</li>
      <li>szósty</li>
      <li value="10">dziesiąty</li>
      <li>jedenasty</li>
      <li>dwunasty</li>
      <li>trzynasty</li>
    </ol>

  </body>
</html>

Rezultat

  1. pierwszy
  2. drugi
  3. trzeci
  4. czwarty
  5. piąty
  6. szósty
  7. dziesiąty
  8. jedenasty
  9. dwunasty
  10. trzynasty

Podczas procesu numerowania przez jeden z mechanizmów przeglądarki internetowej kolejnych elementów dzieci typu "li" elementu "ol" siódmy przykładowy element "li" oraz wszystkie elementy "li" występujące po wspomnianym siódmym elemencie "li" posiadają zmienioną wartość, ponieważ do wspomnianego siódmego elementu "li" został dodany atrybut "value" wraz z wartością "10".

Gdy elementem rodzicem danego elementu "li" jest element ol, którego wartością atrybutu type nie jest wartość 1, wtedy wspomniana liczba całkowita powinna być większa od zera.