Listy

bookmark_border Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Listy są bardziej powszechne, niż myślisz. Jeśli kiedykolwiek brałeś(-aś) udział w zajęciach z programowania, pierwszym projektem mogło być utworzenie listy zakupów lub listy zadań. To są listy. Testy wielokrotnego wyboru to zwykle listy numerowane pytań, a wielokrotne możliwe odpowiedzi na każde pytanie to listy zagnieżdżone.

HTML udostępnia kilka różnych sposobów oznaczania list. Istnieją listy uporządkowane (<ol>), listy nieuporządkowane (<ul>) i listy opisowe (<dl>). Elementy list (<li>) są zagnieżdżone w listach uporządkowanych i nieuporządkowanych. Na liście opisów znajdziesz terminy opisowe (<dt>) i szczegóły opisu <dd>.. Wszystkie te elementy omówimy tutaj.

W formularzach HTML listy elementów <option> stanowią treść elementów <datalist> <select> i <optgroup> w elemencie <select>. Omówiliśmy je w sekcji Formularze HTML.

W menu i listach nieuporządkowanych elementy listy są zwykle wyświetlane za pomocą punktorów. Na listach uporządkowanych są one zwykle poprzedzone licznikiem w kolejności rosnącej, np. liczbą lub literą. Kolejność punktów i numerów można kontrolować lub odwracać za pomocą kodu HTML lub CSS albo obu tych metod.

Domyślnie elementy list uporządkowanych i nieuporządkowanych są poprzedzone numerami lub punktami. Nawet jeśli nie chcesz, aby listy wyglądały jak listy, nadal możesz potrzebować listy elementów, np. w pasku nawigacyjnym, listy zadań do wykonania z polami wyboru zamiast punktorów lub pytań typu prawda/fałsz w teście wielokrotnego wyboru. W przypadku wszystkich tych list bez punktorów odpowiednie jest użycie elementów listy HTML.

Listy nieuporządkowane

Element <ul> jest elementem nadrzędnym dla nieuporządkowanych list elementów. Jedynymi elementami podrzędnymi elementu <ul> są co najmniej 1 element listy <li>.

Utwórzmy listę maszyn. Używamy listy nieuporządkowanej, ponieważ kolejność nie ma znaczenia (nie mów im tego).

Domyślnie każdy element listy nieuporządkowanej jest poprzedzony punktorem. Lista nieuporządkowana nie ma atrybutów specyficznych dla elementu. Listy musisz zamykać znakiem </ul>.

Listy uporządkowane

Element <ol> jest elementem nadrzędnym dla uporządkowanych list elementów. Jedynymi elementami podrzędnymi elementu <ol> są co najmniej 1 element <li> lub elementy listy. „Punktory” w tym przypadku to jednak liczby różnych typów. Typ można zdefiniować w CSS za pomocą właściwości list-style-type lub atrybutu type.

Atrybut <ol> ma 3 atrybuty specyficzne dla elementu: type, reversed i start.

Wyliczeniowy atrybut type określa typ numerowania. Istnieje 5 prawidłowych wartości dla type. Domyślną wartością jest 1 w przypadku liczb, ale możesz też użyć a, A, i lub I w przypadku małych i wielkich liter lub cyfr rzymskich. Usługa list-style-type udostępnia znacznie więcej wartości.

Jak wspomnieliśmy w codepenie, właściwość list-style-type zastępuje wartość atrybutu type. Jednak podczas tworzenia dokumentacji, w której ważny jest typ numeryczny, np. w przypadku dokumentów prawnych, musisz uwzględnić atrybut type.

Atrybut logiczny reversed, jeśli jest uwzględniony, odwraca kolejność liczb, od największej do najmniejszej. Atrybut start określa wartość początkową. Wartość domyślna to 1.

Podobnie jak w przypadku </ul>, wymagany jest zamykający tag </ol>.

Możemy zagnieżdżać listy, ale muszą one być zagnieżdżone w elemencie listy. Pamiętaj, że jedynym elementem, który może być elementem podrzędnym elementu <ul> lub <ol>, jest co najmniej jeden element <li>.

Pozycje listy

Użyliśmy elementu <li>, ale jeszcze go formalnie nie wprowadziliśmy. Element <li> może być bezpośrednim elementem podrzędnym listy nieuporządkowanej (<ul>), listy uporządkowanej (<ol>) lub menu (<menu>). Element <li> musi być zagnieżdżony jako element podrzędny jednego z tych elementów i nie jest prawidłowy w żadnym innym miejscu.

Specyfikacja nie wymaga zamykania elementu listy, ponieważ jest on zamykany niejawnie, gdy przeglądarka napotka następny tag otwierający <li> lub wymagany tag zamykający listę: </ul>, </ol>, </menu>. Specyfikacja nie wymaga tego, a niektóre wewnętrzne sprawdzone metody sugerują, że nie należy zamykać elementów listy, aby zaoszczędzić kilka bajtów, ale mimo to należy zamykać tagi <li>. Dzięki temu kod będzie czytelniejszy, a Ty w przyszłości sobie za to podziękujesz.

Łatwiej jest zamknąć wszystkie elementy niż pamiętać, które tagi wymagają zamknięcia, a które mają opcjonalny tag zamykający.

Istnieje tylko 1 atrybut specyficzny dla elementu <li>: value, czyli liczba całkowita. Element value jest przydatny tylko w przypadku elementu <li>, gdy jest on zagnieżdżony w uporządkowanej liście, i nie ma znaczenia w przypadku list nieuporządkowanych ani menu.<li> W przypadku konfliktu zastępuje wartość <ol>.

Znak value to numer elementu listy na liście uporządkowanej. W przypadku kolejnych elementów listy kontynuuj numerację od wartości ustawionej, chyba że element ten ma też ustawiony atrybut value. Wartość nie musi być uporządkowana, ale jeśli nie jest, powinna być ku temu ważna przyczyna.

Gdy połączysz atrybuty reversed na elemencie <ol> z atrybutami value na elementach listy, przeglądarka ustawi wartość <li> na podaną wartość, a następnie zliczy w górę wartości <li> poprzedzające ją i w dół wartości <li> następujące po niej. Jeśli drugi element listy ma atrybut value, licznik jest resetowany przy tym drugim elemencie listy, a kolejna wartość zmniejsza się o jeden.

Wszystko to można też kontrolować za pomocą liczników CSS, które zapewniają wygenerowaną treść dla ::marker pseudo-elementu. Jeśli numer ma charakter wyłącznie prezentacyjny, użyj CSS. Jeśli numerowanie jest ważne semantycznie lub ma inne znaczenie, użyj tych atrybutów.

Do tej pory przyjrzeliśmy się elementom listy zawierającym tylko węzły tekstowe. Elementy listy mogą zawierać całą treść przepływu, czyli każdy element znajdujący się w treści, który może być zagnieżdżony jako bezpośredni element podrzędny elementu <body>, w tym nagłówki, a tym samym dzielić treść na sekcje.

W MLW mamy kilka list nieuporządkowanych. Nauczyciele w sekcji instruktorów są wyświetlani w formie listy, podobnie jak urządzenia uczniów w sekcji opinii. Nauczyciel <ul> ma 2 <li>: po jednym dla każdego nauczyciela. W każdym elemencie <li> znajduje się obraz i akapit:

<ul>
  <li>
    <img src="svg/hal.svg" alt="hal">
    <p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, &lt;NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
  </li>
  <li>
    <img src="images/eve2.png" alt="Eve">
    <p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
  </li>
</ul>

Sekcja opinii zawiera 3 opinie, więc są w niej 3 <li>. Każdy z nich zawiera obraz, blok cytatu i 3-wierszowy akapit z 2 podziałami wiersza.

<ul>
  <li>
    <img src="images/blender.svg" alt="Blender">
    <blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
    <p>
      --Blendan Smooth,<br/>
      Former Margarita Maker, <br/>
      Aspiring Load Balancer
    </p>
  </li>
  <li>
    <img src="images/vaccuum.svg" alt="Vaccuum"/>
    <blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
    <p>
      --Hoover Sukhdeep,<br/>
      Former Sucker, <br/>
      Aspiring DDoS Cop
    </p>
  </li>
  <li>
    <img src="images/toaster.svg" alt="Toaster">
    <blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it.</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

Zagnieżdżanie list w listach jest również bardzo powszechne. MLW nie ma list zagnieżdżonych, ale ta witryna ma. W pierwszym module tej serii, Omówienie HTML, sekcja głównych elementów ma 2 podsekcje. W spisie treści, który jest listą nieuporządkowaną, znajduje się zagnieżdżona lista nieuporządkowana z linkami do tych 2 sekcji:

<ul role="list">
  <li>
    <a href="#e">Elements</a>
    <ul>
      <li>
        <a href="#nr">Non-replaced elements</a>
      </li>
      <li>
        <a href="#rave">Replaced and void elements</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#a">Attributes</a>
  </li>
  <li>
    <a href="#aoe">Appearance of elements</a>
  </li>
  <li>
    <a href="#e2">Element, attributes, and JavaScript</a>
  </li>
</ul>

Ponieważ jedynym elementem podrzędnym elementu <ul> jest element <li>, lista zagnieżdżona znajduje się w elemencie <li>, a nie bezpośrednio w elemencie <ol> lub <ul>.

W tym ostatnim przykładzie możesz zauważyć, że znak role="list" jest uwzględniony w <ul>. Chociaż domyślna rola elementów <ul> i <ol> to list, usunięcie wyglądu listy za pomocą CSS, w tym ustawienie display: grid lub list-style-type: none, może spowodować, że czytnik ekranu VoiceOver (na iOS i macOS) usunie domyślną semantykę w Safari. To funkcja, a nie błąd. Zwykle nie należy dodawać atrybutu role podczas używania elementów semantycznych, ponieważ nie jest to konieczne. Zwykle nie musisz też dodawać go do listy, chyba że użytkownik naprawdę musi wiedzieć, że to lista, np. gdy przyda mu się informacja o liczbie elementów na liście.

Listy opisów

Lista opisów to element description list (<dl>) zawierający serię (zero lub więcej) description terms (<dt>) i ich description details (<dd>). Pierwotne nazwy tych trzech elementów to „definition list”, „definition term” i „definition definition”. Zmieniła się nazwa poziomu życia.

Podobnie jak listy uporządkowane i nieuporządkowane mogą być zagnieżdżone. W przeciwieństwie do list uporządkowanych i nieuporządkowanych składają się one z par klucz/wartość. Podobnie jak w przypadku elementów <ul> i <ol>, element <dl> jest kontenerem nadrzędnym. Elementy <dt> i <dd> są elementami podrzędnymi elementu <dl>.

Możemy utworzyć listę maszyn z ich historią i aspiracjami. Lista opisowa uczniów, oznaczona symbolem <dl>, zawiera grupę terminów określonych za pomocą elementu <dt> wraz z opisem każdego terminu określonym przez elementy <dd>. W tym przypadku „terminy” to imiona i nazwiska uczniów, a opisy to cele zawodowe każdego z nich.

Ta lista opisów nie jest w rzeczywistości częścią strony MLW. Listy opisów nie służą tylko do podawania terminów i definicji, dlatego nazwy elementów zostały uogólnione.

Podczas tworzenia listy terminów i ich definicji lub opisów albo podobnych list par klucz-wartość elementy listy opisów zapewniają odpowiednią semantykę. Rola domyślna <dt> to term, a listitem to inna dozwolona rola. Rola domyślna użytkownika <dd> to definition. Nie można mu przypisać innych ról. W przeciwieństwie do elementów <ul> i <ol> element <dl> nie ma domyślnej roli ARIA. Ma to sens, ponieważ <dl> nie zawsze jest listą. Jeśli tak jest, akceptuje role list i group.

Najczęściej spotykane listy opisów zawierają taką samą liczbę elementów <dt> i <dd>. Listy opisów nie zawsze muszą być i nie muszą być parami termin–opis. Możesz mieć wiele do jednego lub jeden do wielu, np. termin słownikowy, który ma więcej niż jedną definicję.

Każdy element <dt> ma co najmniej 1 powiązany element <dd>, a każdy element <dd> ma co najmniej 1 powiązany element <dt>. Chociaż za pomocą kombinatora sąsiedniego rodzeństwa lub selektora relacyjnego :has() można w razie potrzeby kierować reklamy na zmienną liczbę tych elementów za pomocą CSS, dozwolone jest umieszczenie elementu <div> jako elementu podrzędnego elementu <dl> i elementu nadrzędnego co najmniej jednego elementu <dt> lub <dd> (lub obu). Element <dl> może mieć kilka innych elementów podrzędnych: dozwolone jest zagnieżdżanie elementów <div>, <template> lub <script>. Żaden z elementów listy opisów nie ma atrybutów specyficznych dla elementu.

Teraz, gdy znasz już linki i listy, możemy połączyć te 2 elementy, aby utworzyć nawigację.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o listach.