li

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

• Progres X - Lista uporządkowana
• Progres X - Lista nieuporządkowana

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

zdolność fallback

nie dotyczy

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 wtedy gdy bezpośrednio po danym elemencie li występuje inny element li lub gdy bezpośrednio po danym elemencie li nie występuje żadna inna zawartość, która z naszego założenia miałaby należeć do kontekstu wewnętrznego elementu rodzica danego elementu li

CSS display

list-item

li {
  display:list-item;
}

tak

tak

tak

tak

tak

tak