<ul>
Lista wypunktowana, w której kolejność pozycji nie ma znaczenia.
- Wyświetlanie
- block
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Elementy
<li>(dopuszczalne są też<script>i<template>)
Przykład
#<h3>Czego nauczysz się w kursie HTML</h3>
<ul>
<li>budować strukturę strony z nagłówków i akapitów</li>
<li>wstawiać obrazy, linki i listy</li>
<li>tworzyć formularze kontaktowe</li>
<li>publikować stronę w internecie</li>
</ul>Definicja i zastosowanie
#Element <ul> (od unordered list) tworzy listę nieuporządkowaną. Każdą pozycję zapisujesz w osobnym elemencie <li>, a przeglądarka stawia przed nią kropkę. Sięgaj po <ul> wtedy, gdy zamiana kolejności pozycji nie zmienia sensu: lista zalet kursu, składniki przepisu, tagi pod artykułem.
Jeśli liczy się kolejność (kroki instrukcji, ranking), użyj <ol>. Gdy pozycje są parami „nazwa i opis”, lepiej sprawdzi się <dl>. Listy można zagnieżdżać, ale podlista zawsze trafia do wnętrza elementu <li>, nigdy bezpośrednio do <ul>.
Na listach opiera się też większość menu nawigacyjnych. Czytniki ekranu informują, że zaczyna się lista, i podają liczbę jej pozycji, co pomaga ocenić długość menu. Kształt punktorów zmienisz w CSS właściwością list-style, a same punktory ostylujesz pseudoelementem ::marker.
Składnia
#<ul>
<li>…</li>
<li>…</li>
</ul>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Więcej przykładów
#<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>Python</li>
<li>Node.js</li>
</ul>
</li>
</ul>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
ul {
display: block;
list-style-type: disc;
margin-block: 1em;
padding-inline-start: 40px;
}
ul ul {
list-style-type: circle;
margin-block: 0;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Bezpośrednim dzieckiem
<ul>może być tylko<li>. Nagłówek, akapit czy podlistę umieść wewnątrz<li>. - Gdy usuniesz punktory przez
list-style: none, VoiceOver w Safari może przestać ogłaszać listę. Przywrócisz to atrybutemrole="list". - Atrybut
typena<ul>(na przykładtype="square") jest przestarzały. Kształt punktora ustaw w CSS:list-style-type: square.
Powiązane hasła
#- <ol>Lista numerowana, w której kolejność pozycji ma znaczenie.
- <li>Pojedyncza pozycja listy `<ul>`, `<ol>` lub `<menu>`.
- <menu>Lista poleceń, na przykład pasek narzędzi z przyciskami. Działa jak `<ul>`.
- <dl>Lista opisowa: pary nazwa i opis, na przykład słowniczek pojęć albo dane techniczne.
- <nav>Blok głównych linków nawigacyjnych: menu, spis treści, okruszki.
Widzisz błąd albo brakuje przykładu? Napisz do nas.