HTML: Listy i nawigacja

Listy
Listy w html możemy podzielić na:
- nieuporządkowane, unordered lists <ul>
- uporządkowane, ordered lists <ol>
- listy definicji, definition lists <dl>

Listy nieuporządkowane
Listy nieuporządkowane HTML (listy punktowane HTML) nie numerują elementów, tylko oznaczają je w inny sposób. Domyślnie przeglądarki stosują okrągłe czarne punktory.
Do tworzenia list nieuporządkowanych służy element <ul>, który może zawierać dowolną liczbę elementów <li>, np.:

• jabłka
• kapusta
• kalafior
• sałata

Znacznik <ul> może zawierać WYŁĄCZNIE elementy <li> jako bezpośrednie dzieci. Za to tagi <li> mogą mieć zagnieżdżone różne elementy (paragrafy, linki, etc).

Listy uporządkowane
Listy uporządkowane HTML (listy numerowane HTML) to takie, w których kolejność pozycji jest w jakiś sposób określona.

Do tworzenia list uporządkowanych służy element <ol>, który może zawierać dowolną liczbę pozycji oznaczonych elementem <li>, np.:

1. Przejdź na dysk C
2. Otwórz folder Windows
3. Znajdź i zaznacz plik explorer.exe
4. Naciśnij klawisz Del

Domyślnie przeglądarki stosują numerację liczbową, zaczynającą się od 1 ale można to modyfikować odpowiednimi atrybutami, np:
<ol type="A"> pozwoli nam na zmianę podstawowej numeracji na litery

Atrybut 'start' pozwala na rozpoczęcie listy od konkretnego momentu, niekoniecznie od numeru '1':
<ol type="1" start="4">

Możemy też listę odwrócić:
<ol type="1" start="5" reverse>

W liście uporządkowanej pojedynczy element <li> może mieć właściwość 'value', która zmienia jego numer i wszystkie kolejne elementy za tym elementem:
<li value="5">

Listy definicji
Listy definicji HTML przedstawiają w sposób powiązany ze sobą pojęcia i ich definicje lub opisy.
Listę definicji reprezentuje element <dl>. Definiowane pojęcia umieszczamy w elementach <dt> (definition term), a definicje pojęć w elementach <dd>(description details), np.:

Pies

- zwierzę lądowe

Wróbel

- zwierzę latające

Nawigacja
Listy również się używa w celu czytelnego przedstawienia hierarchii w nawigacji (tworzenie menu, submenus, etc). To są tak zwane navigation patterns.
Główne menu tworzymy w tagu <nav>:

W elemencie <nav> powinen pojawić się atrybut 'aria-label' opisujący co to jest za element:
<nav aria-label="Główna nawigacja">

Główne menu powinno być listą nieuporządkowaną, która może zawierać zagnieżdżenia. W elementach <li> nawigacji umieszczane są linki do konkretnych sekcji strony. Linki te zawsze będą miały adresy, pod które się odwołują oraz właściwość 'current page', wskazującą gdzie użytkownik w danej chwili się znajduje:
<li> <a href="/" aria-current="page">Strona główna</a></li>
<li> <a href="o-nas">O nas</a></li>

Breadcrumbs
Breadcrumbs to jest inaczej ścieżka nawigacyjna. Breadcrumbs zapisujemy listą uporządkowaną.

Zwróć uwagę, że w elemencie listy z aria-current="page" NIE MA LINKU!
Użytkownik będzie w stanie wybrać wszystkie poprzednie linki ze ścieżki poza aktualną pozycją. Separator między kolejnymi krokami ścieżki może być dodawany automatycznie z poziomu CSS.
Breadcrums może pomóc w SEO strony.

Nawigacja górna - konieczna!
Nawigacja dolna - przydatna, na stronie powinien się znaleźć przynajmniej link odsyłający do góry strony.

Skip navigation links
Skip navigation links to wewnętrzne odnośniki na początku strony, które pozwalają użytkownikom pominąć powtarzalne elementy nawigacyjne i od razu przejść do głównej treści. Są one kluczowe dla dostępności cyfrowej, ponieważ ułatwiają nawigację osobom korzystającym z czytników ekranu lub nawigującym tylko za pomocą klawiatury. Zazwyczaj są one ukryte dla przeciętnego użytkownika, ale widoczne po ich aktywacji. Możliwa implementacja:
<a href="#main-content" class="skip-link">Skip to main content</a>

Jeśli display = hidden, to ta nawigacja nadal będzie widoczna i zrozumiała dla czytnika.