Ostatnio edytowany:

ul

Autor: Virtual Patriot

Przeznaczenie elementu ul

Element ul reprezentuje listę nieuporządkowaną, której zawartość powinna reprezentować treść, która nie musi zostać zaprezentowana według z góry określonej kolejności ze względu na ryzyko utraty znaczenia wspomnianej treści.

Dodatkowe techniczne informacje o elemencie ul

kategoria ogólna
kontekst zewnętrzny
  • element HTML, który tworzy wewnętrzny kontekst opływający

    Przykładowy Kod HTML

    <nav>
      <h2>Nawigacja strony internetowej</h2>
    
      <ul>
        <li>
          <a href="#produkty">Produkty</a>
        </li>
    
        <li>
          <a href="#lokalizacja">Lokalizacja</a>
        </li>
    
        <li>
          <a href="#kontakt">Kontakt</a>
        </li>
      </ul>
    </nav>

    Kontekstem zewnętrznym przykładowego elementu "ul" jest element "nav". Wspomniany element "nav" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst opływający, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "nav", jest prawidłowym kontekstem zewnętrznym dla elementu "ul".

kontekst wewnętrzny
  • elementy li, jak również ewentualnie zawartość skryptowa

    Przykładowy Kod HTML

    <nav>
      <h2>Nawigacja strony internetowej</h2>
    
      <ul>
        <li>
          <a href="#produkty">Produkty</a>
        </li>
    
        <li>
          <a href="#lokalizacja">Lokalizacja</a>
        </li>
    
        <li>
          <a href="#kontakt">Kontakt</a>
        </li>
      </ul>
    </nav>

    Kontekstem wewnętrznym przykładowego elementu "ul" są wyłącznie elementy "li", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "li", element "li" oraz element "li", jest prawidłowym kontekstem wewnętrznym dla elementu "ul".

    Przykładowy Kod HTML

    <nav>
      <h2>Nawigacja strony internetowej</h2>
    
      <ul>
        <li>
          <a href="#produkty">Produkty</a>
        </li>
    
        <li>
          <a href="#lokalizacja">Lokalizacja</a>
        </li>
    
        <li>
          <a href="#kontakt">Kontakt</a>
        </li>
    
        <template id="szablon-1">
          <ins>
            <iframe src="dynamiczna-statystyka-01.html"></iframe>
          </ins>
        </template>
        <script src="skrypt-01.js"></script>
      </ul>
    </nav>

    Kontekstem wewnętrznym przykładowego elementu "ul" są wyłącznie elementy "li" oraz elementy HTML, które należą do kategorii zawartość skryptowa, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "li", element "li", element "li", element "template" oraz element "script", jest prawidłowym kontekstem wewnętrznym dla elementu "ul".

wymagane elementy dzieci
  • brak
wymagane atrybuty
  • brak
składnia HTML
  • <ul> ... </ul>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • nigdy
CSS display
  • block

Dodatkowe domyślne reguły CSS elementu ul

ul {
  display:block;
  list-style-type:disc;
  margin-top:1em;
  margin-bottom:1em;
  padding-left:40px;
}

ul ul {
  margin:0;
}

ol ul {
  margin:0;
}

dl ul {
  margin:0;
}

ul ul {
  list-style-type:circle;
}

ul ul ul {
  list-style-type:square;
}

ol ul {
  list-style-type:circle;
}

ol ul ul {
  list-style-type:square;
}

Interpretacja elementu ul

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak