Listy

Listy pojawiają się częściej, niż mogłoby się wydawać. Jeśli bierzesz już udział w zajęciach z programowania, pierwszym projektem może być utworzenie listy zakupów lub zadań do wykonania. To są listy. Testy jednokrotnego wyboru to zwykle numerowane listy pytań: wiele możliwych odpowiedzi na każde pytanie to zagnieżdżone listy.

HTML udostępnia nam kilka różnych sposobów oznaczania list. Istnieją listy uporządkowane (<ol>), nieuporządkowane (<ul>) i listy opisów (<dl>). Elementy list (<li>) są zagnieżdżone w listach uporządkowanych i nieuporządkowanych. Na liście opisów znajdują się warunki (<dt>) i szczegóły opisu <dd>. Omówimy je wszystkie tutaj.

W formularzach HTML listy elementów <option> składają się z zawartości <datalist>, <select> i <optgroup> elementu <select>. Są one omawiane w formularzach HTML.

W menu i na listach nieuporządkowanych elementy listy są zwykle wyświetlane w postaci listy punktowanej. Na listach uporządkowanych są one zazwyczaj poprzedzone licznikiem rosnącym, np. cyfrą lub literą. Kolejność punktorów i numerację można kontrolować i odwracać za pomocą kodu HTML lub CSS.

Domyślnie elementy listy uporządkowanej i nieuporządkowanej są poprzedzone liczbami lub punktorami. Nawet jeśli nie chcesz, aby listy wyglądały jak listy, potrzebujesz listy elementów, np. pasków nawigacyjnych, listy zadań z polami wyboru zamiast punktorów lub pytań prawdziwych i fałszywych w teście jednokrotnego wyboru. W przypadku wszystkich tych list bez punktorów należy użyć elementów listy HTML.

Listy nieuporządkowane

Element <ul> jest elementem nadrzędnym w przypadku nieuporządkowanej listy elementów. Jedynymi elementami podrzędnymi <ul> są co najmniej 1 element listy <li>. Utwórz listę maszyn. Używamy listy nieuporządkowanej, bo kolejność nie ma znaczenia (nie mów im tego):

Domyślnie każdy element listy nieuporządkowanej jest poprzedzony kropką. Lista nieuporządkowana nie ma atrybutów związanych z elementami. Musisz zamknąć listy za pomocą znaku </ul>.

Listy uporządkowane

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

Element <ol> ma 3 atrybuty charakterystyczne dla elementu: type, reversed i start.

Wyliczony atrybut type określa typ numerowania. Parametr type ma 5 prawidłowych wartości. Domyślnie jest to 1 dla cyfr. Możesz jednak także użyć a, A, i lub I dla małych i wielkich liter oraz cyfr rzymskich. Właściwość list-style-type podaje znacznie więcej wartości.

Jak wspomniano w kodzie, właściwość list-style-type zastępuje wartość atrybutu type, jednak podczas pisania dokumentacji, w których ważny jest typ liczbowy, jak na przykład w przypadku dokumentów prawnych, należy podawać wartość type.

Jeśli użyjesz atrybutu logicznego reversed, odwróci on kolejność liczb, od największej do najmniejszej. Atrybut start ustawia wartość początkową. Wartość domyślna to 1.

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

Listy można zagnieżdżać, 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 1 element <li>.

Pozycje listy

Użyliśmy elementu <li>, ale jeszcze nie wprowadziliśmy go formalnie. 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 nigdzie prawidłowy.

Specyfikacja nie wymaga zamknięcia elementu listy, ponieważ zostanie on zamknięty, gdy przeglądarka napotka następny tag otwierający <li> lub wymagany tag zamykający listę: </ul>, </ol>, </menu>. Chociaż specyfikacja tego nie wymaga i jakie są wewnętrzne sprawdzone metody firmy, nie należy zamykać elementów listy, aby zaoszczędzić trochę bajtów, ale zamknij tagi <li>. Ułatwia on czytanie kodu, a Twoja przyszła osoba Ci podziękuje. Łatwiej zamknąć wszystkie elementy niż zapamiętać, które tagi należy zamknąć, a które mają opcjonalny tag zamykający.

Występuje tylko jeden specyficzny dla elementu atrybut <li>: value (liczba całkowita). Element value jest przydatny w elementach <li> tylko wtedy, gdy <li> jest umieszczony na liście uporządkowanej i nie ma znaczenia w przypadku nieuporządkowanych list ani menu. W przypadku wystąpienia konfliktu zastępuje ona wartość rozpoczęcia procesu <ol>.

value to numer elementu listy uporządkowanej. W przypadku kolejnych elementów listy kontynuuj numerowanie na podstawie ustawionej wartości, chyba że element ma też ustawiony atrybut value. Wartość nie musi być podana w kolejności, ale jeśli nie, to na pewno ma uzasadniony powód.

Gdy połączysz atrybut reversed w elemencie <ol> z atrybutami value w elementach listy, przeglądarka ustawi parametr <li> na podaną wartość, odlicza poprzedzające go parametry <li> i kolejne. Jeśli drugi element listy ma atrybut value, licznik zostanie zresetowany przy tym drugim elemencie, a kolejna wartość zmniejszy się o 1.

Wszystkimi tymi elementami można też sterować za pomocą liczników CSS, które dostarczają wygenerowane treści dla pseudoelementu ::marker. Jeśli liczba ma charakter czysto prezentacyjny, użyj CSS. Użyj tych atrybutów, jeśli numeracja jest ważna semantycznie lub w inny sposób ma znaczenie.

Do tej pory przyglądaliśmy się elementom listy zawierającym tylko węzły tekstowe. Elementy list mogą zawierać wszystkie treści przepływu, co oznacza, że każdy element w treści, który można zagnieździć jako bezpośredni element podrzędny elementu <body> (łącznie z nagłówkami), umożliwia podział treści na sekcje.

Mamy kilka nieuporządkowanych list w MLW. Nauczyciele uwzględnieni w sekcji dla nauczycieli są reprezentowani przez listę, podobnie jak komputery uczniów w sekcji oceny. Nauczyciel (<ul>) ma 2 elementy <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 z opiniami ma trzy opinie, więc trzy <li>. Każdy zawiera obraz, cytat blokowy i trzywierszowy akapit z dwoma 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. The Russians had nothing to do with it. This has
    <span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ&nbsp;̗̰͓̲̞̀t͙̀o̟̖͖̹̕&nbsp;͓̼͎̝͖̭dó̪̠͕̜&nbsp;͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢&nbsp;̰̳̯̮͇i</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

Bardzo często zdarza się też zagnieżdżanie list na listach. Chociaż MLW nie ma żadnych zagnieżdżonych list, ta witryna je ma. W pierwszym rozdziale tej serii, „Omówienie kodu HTML”, sekcja z elementami głównymi składa się z dwóch podsekcji. 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>

Jedynym elementem podrzędnym elementu <ul> jest <li>, więc zagnieżdżona lista znajduje się w obrębie właściwości <li>, a nigdy nie bezpośrednio w obrębie znaczników <ol> ani <ul>.

W ostatnim przykładzie widać, że w polu <ul> znajduje się parametr role="list". Chociaż domyślnie rola <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 funkcja VoiceOver (czytnik ekranu w systemach iOS i macOS) usunie semantykę w Safari. To funkcja, a nie błąd. Nie dodawaj atrybutu role, gdy używasz elementów semantycznych, ponieważ nie jest to konieczne. Nie musisz też dodawać elementu do listy, chyba że użytkownik naprawdę chce wiedzieć, że jest to lista, na przykład kiedy użytkownik skorzystałby na informacji o liczbie elementów na liście.

Listy opisów

Lista opisów to element listy opisów (<dl>), który zawiera serię haseł opisu (<dt>) i ich szczegóły opisu (<dd>). Pierwotne nazwy tych 3 elementów to „lista definicji”, „termin definicji” i „definicja”. Nazwa uległa zmianie w standardzie życia.

Podobnie jak listy uporządkowane i nieuporządkowane, mogą one być zagnieżdżone. W odróżnieniu od list uporządkowanych i nieuporządkowanych zawierają one pary klucz/wartość. Podobnie jak <ul> i <ol>, <dl> jest kontenerem nadrzędnym. Elementy <dt> i <dd> są elementami podrzędnymi elementu <dl>.

Możemy stworzyć listę maszyn z ich historią kariery i aspiracjami. Lista opisów uczniów (oznaczona dyrektywą <dl>) obejmuje grupę pojęć (w tym przypadku „terminy” to imiona i nazwiska uczniów) określone za pomocą elementu <dt> wraz z opisem każdego z nich (w tym przypadku są to cele zawodowe poszczególnych uczniów, określone za pomocą elementów <dd>).

Ta lista opisów nie jest w rzeczywistości częścią strony dotyczącej 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 haseł i ich definicji lub opisów albo podobnych list par klucz-wartość elementy listy opisu zapewniają odpowiednią semantykę. Domniemana rola <dt> to term, a inną dozwoloną rolą listitem. Domniemana rola <dd> to definition i nie są dozwolone żadne inne role. W przeciwieństwie do <ul> i <ol> rola <dl> nie ma niejawnej roli ARIA. Ma to sens, bo <dl> nie zawsze jest listą. Gdy jednak nadejdzie, akceptuje role list i group.

Najczęściej pojawiają się listy opisów zawierające taką samą liczbę elementów <dt> i <dd>. Jednak listy opisów nie zawsze są i nie muszą odpowiadać parom termin-opis. Możesz mieć wiele do jednego lub jeden do wielu, np. hasło słownikowe, które ma więcej niż 1 definicję.

Z każdym elementem typu <dt> jest powiązany co najmniej 1 powiązany element <dd>, a każdy element <dd> ma co najmniej 1 powiązany element <dt>. Mimo że za pomocą CSS można używać kombinatora rodzeństwa bliźniaczego lub selektora relacyjnego :has(), aby kierować określone liczby tych elementów za pomocą CSS, można w razie potrzeby dodać element <div> jako element podrzędny elementu <dl>, a element nadrzędny co najmniej jednego elementu <dt> lub <dd> (albo obu) jest dozwolony. W <dl> może być jeszcze kilka innych dzieci: umieszczanie <div>, <template> lub <script> jest dozwolone. Żaden z elementów listy opisu nie ma żadnych atrybutów związanych z elementami.

Skoro wiesz już, czym są linki i listy, połączmy je, aby utworzyć nawigację.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o listach.