Nagłówki i sekcje

W ostatniej sekcji dowiedzieliśmy się, że nawet jeśli nie wiesz, co oznaczają słowa na stronie, gdy elementy semantyczne nadają dokumentowi znaczącą strukturę, inni – wyszukiwarka, technologie wspomagające osoby z niepełnosprawnością, przyszły opiekun, nowy członek zespołu – zrozumieją jego zarys.

W tej sekcji poznasz strukturę dokumentu opisującego interfejs API; przypomnisz sobie elementy sekcji z poprzedniej sekcji i oznaczysz konspekt aplikacji.

Wybór odpowiednich elementów do zadania podczas kodowania oznacza, że nie trzeba będzie refaktoryzować ani zmieniać w komentarz kodu HTML. Jeśli zastanowisz się, który żywioł będzie odpowiedni do danego zadania, najczęściej wybierzesz właściwy. Jeśli nie, prawdopodobnie nie będziesz mieć takiej możliwości.

Skoro już rozumiesz semantykę znaczników i wiesz, dlaczego wybór odpowiedniego elementu jest ważny, po zapoznaniu się ze wszystkimi elementami będziesz w stanie wybrać właściwy bez większego wysiłku.

Witryna <header>

Najpierw utwórz nagłówek witryny. Zacznij od znaczników niesemantycznych i wypracuj dobre rozwiązanie, aby poznać zalety sekcji HTML i elementów nagłówka.

Jeśli nie zastanowisz się nad semantyką nagłówka, możesz użyć takiego kodu:

<!-- start header -->
<div id="pageHeader">
  <div id="title">Machine Learning Workshop</div>
  <!-- navigation -->
  <div id="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

CSS może sprawić, że (prawie) każdy znacznik będzie wyglądał dobrze. Jednak używanie niesemantycznego elementu <div> do wszystkiego wymaga dodatkowej pracy. Aby kierować reklamy na wiele elementów <div> za pomocą arkusza CSS, musisz użyć identyfikatorów lub klas do identyfikacji treści. Kod zawiera też komentarz do każdego tagu zamykającego </div>, który wskazuje, który tag otwierający został zamknięty przez dany tag </div>.

Atrybuty id i class zapewniają punkty zaczepienia dla stylów i języka JavaScript, ale nie dodają wartości semantycznej dla czytnika ekranu ani (w większości przypadków) wyszukiwarek.

Możesz uwzględnić atrybuty role, aby zapewnić semantykę i utworzyć dobry model obiektów ułatwień dostępu (AOM) dla czytników ekranu:

<!-- start header -->
<div role="banner">
  <div role="heading" aria-level="1">Machine Learning Workshop</div>
  <div role="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

Zapewnia to przynajmniej semantykę i umożliwia używanie selektorów atrybutów w arkuszu CSS, ale nadal dodaje komentarze, aby określić, który element <div> zamyka każdy element </div>.

Jeśli znasz HTML, musisz tylko zastanowić się nad celem treści. Możesz wtedy napisać ten kod semantycznie bez używania role i bez konieczności komentowania tagów zamykających:

<header>
  <h1>Machine Learning Workshop</h1>
  <nav>
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </nav>
</header>

Ten kod używa 2 punktów orientacyjnych: <header> i <nav>.

To jest nagłówek główny. Element <header> nie zawsze jest punktem orientacyjnym. Ma różne znaczenia w zależności od tego, gdzie jest zagnieżdżony. Gdy element <header> jest na najwyższym poziomie, jest to witryna banner, czyli rola punktu orientacyjnego, którą możesz zauważyć w bloku kodu role. Gdy element <header> jest zagnieżdżony w elemencie <main>, <article> lub <section>, jest on identyfikowany jako nagłówek tej sekcji, a nie jako punkt orientacyjny.

Element <nav> identyfikuje treść jako nawigację. Ponieważ ten element <nav> jest zagnieżdżony w nagłówku witryny, jest to główny element nawigacyjny witryny. Jeśli zostałby zagnieżdżony w elemencie <article> lub <section>, byłby nawigacją wewnętrzną tylko w tej sekcji. Dzięki elementom semantycznym udało Ci się utworzyć przydatny model obiektów ułatwień dostępu (AOM). AOM umożliwia czytnikowi ekranu poinformowanie użytkownika, że ta sekcja składa się z głównego bloku nawigacyjnego, który można przeglądać lub pominąć.

Używanie tagów zamykających </nav> i </header> eliminuje konieczność dodawania komentarzy, aby określić, który element został zamknięty przez dany tag końcowy. Dodatkowo używanie różnych tagów dla różnych elementów eliminuje potrzebę stosowania punktów zaczepienia id i class. Selektory CSS mogą mieć niską specyficzność. Możesz kierować reklamy na linki za pomocą header nav a bez obaw o konflikt.

Masz nagłówek z bardzo małą ilością kodu HTML i bez klas lub identyfikatorów. Jeśli używasz semantycznego kodu HTML, nie musisz tego robić.

Witryna <footer>

Zakoduj stopkę witryny.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

Podobnie jak w przypadku elementu <header>, to, czy stopka jest punktem orientacyjnym, zależy od tego, gdzie jest zagnieżdżona. Jeśli jest to stopka witryny, jest to punkt orientacyjny i powinna zawierać informacje, które chcesz umieścić na każdej stronie, takie jak oświadczenie o prawach autorskich, informacje kontaktowe oraz linki do zasad dotyczących prywatności i plików cookie. Domyślna wartość role dla stopki witryny to contentinfo. W przeciwnym razie stopka nie ma domyślnej roli i nie jest punktem orientacyjnym, jak pokazano na tym zrzucie ekranu modelu AOM w Chrome (który zawiera element <article> z elementami <header> i <footer> między elementami <header> i <footer>).

Na tym zrzucie ekranu widać 2 stopki: jedną w elemencie <article> i jedną na najwyższym poziomie. Stopka najwyższego poziomu to punkt orientacyjny z niejawną rolą contentinfo. Druga stopka nie jest punktem orientacyjnym. Chrome wyświetla go jako FooterAsNonLandmark, a Firefox jako section.

Nie oznacza to, że nie należy używać <footer>. Jeśli na przykład masz bloga, możesz mieć stopkę witryny z niejawną rolą contentinfo. Każdy post na blogu może też mieć <footer>. Na głównej stronie docelowej bloga przeglądarka, wyszukiwarka i czytnik ekranu wiedzą, że główna stopka jest stopką najwyższego poziomu, a wszystkie pozostałe stopki są powiązane z postami, w których są umieszczone.

Gdy element <footer> jest elementem podrzędnym elementu <article>, <aside>, <main>, <nav> lub <section>, nie jest punktem orientacyjnym. Jeśli post pojawia się samodzielnie, w zależności od znaczników stopka może zostać wypromowana.

Stopki często zawierają informacje kontaktowe, które są umieszczone w elemencie adresu kontaktowego <address>. To jeden z elementów, który nie jest zbyt dobrze nazwany. Służy do umieszczania informacji kontaktowych osób lub organizacji, a nie fizycznych adresów pocztowych.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
  <address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>

Struktura dokumentu

Ten moduł zaczyna się od elementów <header> i <footer>, ponieważ tylko czasami są one elementami punktów orientacyjnych (lub „sekcji”). Istnieje kilka częściej używanych elementów sekcji.

Układ z nagłówkiem, 2 paskami bocznymi i stopką jest nazywany układem idealnym. Istnieje wiele sposobów na oznaczenie tych treści, w tym:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Jeśli tworzysz bloga, możesz mieć serię artykułów w <main>:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <article>First post</article>
    <article>Second post</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Gdy używasz elementów semantycznych, przeglądarki mogą tworzyć przydatne drzewa ułatwień dostępu. Pomoże to ulepszyć nawigację czytnika ekranu. W tym przypadku banner i contentinfo są udostępniane przez witrynę <header> i <footer>. Nowe elementy dodane tutaj to <main>, <aside> i <article>. Są też <h1> i <nav>, których użyto wcześniej, oraz <section>, którego jeszcze nie użyto.

<main>

Jest tylko 1 element punktu orientacyjnego <main>. Element <main> określa główną treść dokumentu. Na każdej stronie powinien znajdować się tylko 1 element <main>.

<aside>

Element <aside> jest przeznaczony do treści, które są pośrednio lub częściowo powiązane z główną treścią dokumentu. Na przykład ten dokument dotyczy HTML. W sekcji dotyczącej specyfiki selektora CSS dla 3 przykładów nagłówka witryny (div, role i semantic) powiązana dygresja może być zawarta w elemencie <aside>. Podobnie jak większość elementów <aside>, prawdopodobnie będzie ona wyświetlana na pasku bocznym lub w polu objaśnienia. <aside> to również punkt orientacyjny z niejawną rolą complementary.

<article>

W elemencie <main> dodaliśmy 2 elementy <article>. Nie było to konieczne w pierwszym przykładzie, gdy główna treść składała się tylko z jednego słowa, ani w rzeczywistości, gdy jest to pojedyncza sekcja treści. Jeśli jednak piszesz bloga, jak w naszym drugim przykładzie, każdy post powinien znajdować się w elemencie <article> zagnieżdżonym w elemencie <main>.

Element <article> reprezentuje pełną lub samodzielną sekcję treści, którą można wykorzystać niezależnie. Artykuł w tym kontekście to artykuł w gazecie. W wydaniu drukowanym artykuł o Jacindzie Ardern, premierce Nowej Zelandii, może pojawić się tylko w jednej sekcji, np. w wiadomościach ze świata. W witrynie gazety ten sam artykuł może pojawić się na stronie głównej, w sekcji politycznej, w sekcji wiadomości z Oceanu Spokojnego lub Azji i Pacyfiku, a w zależności od tematu wiadomości – w sekcji sportowej, lifestylowej lub technologicznej. Artykuł może też pojawić się na innych stronach, takich jak Pocket czy Yahoo News!

<section>

Element <section> służy do obejmowania ogólnych samodzielnych sekcji dokumentu, gdy nie ma bardziej szczegółowego elementu semantycznego. Sekcje powinny mieć nagłówek, z bardzo nielicznymi wyjątkami.

Wracając do przykładu z Jacindą Ardern, na stronie głównej gazety baner zawierałby nazwę gazety, a następnie pojedynczy element <main> podzielony na kilka elementów <section>, z których każdy miałby nagłówek, np. „Wiadomości ze świata” i „Polityka”. W każdej sekcji znajdziesz serię elementów <article>. W każdym elemencie <article> może też znajdować się co najmniej jeden element <section>. Jeśli spojrzysz na tę stronę, cała część „nagłówki i sekcje” to <article>. Ten <article> jest następnie dzielony na kilka <section>, w tym site header, site footer i strukturę dokumentu. Artykuł ma nagłówek, podobnie jak każda z sekcji.

Element <section> nie jest punktem orientacyjnym, chyba że ma nazwę na potrzeby ułatwień dostępu. Jeśli ma taką nazwę, jego domyślna rola to region. Ról punktów orientacyjnych należy używać oszczędnie, aby identyfikować większe sekcje dokumentu. Użycie zbyt wielu ról punktów orientacyjnych może powodować „szum” w czytnikach ekranu, co utrudnia zrozumienie ogólnego układu strony. Jeśli element <main> zawiera 2 lub 3 ważne podsekcje, warto dodać do każdej z nich nazwę na potrzeby ułatwień dostępu <section>.

Nagłówki: <h1>–<h6>

Istnieje 6 elementów nagłówka sekcji: <h1>, <h2>, <h3>, <h4>, <h5> i <h6>. Każdy z nich reprezentuje jeden z 6 poziomów nagłówków sekcji, przy czym <h1> to najwyższy lub najważniejszy poziom sekcji, a <h6> to najniższy.

Gdy nagłówek jest umieszczony w banerze dokumentu <header>, jest to nagłówek aplikacji lub witryny. Jeśli jest zagnieżdżony w <main>, niezależnie od tego, czy jest zagnieżdżony w <header> w <main>, jest nagłówkiem tej strony, a nie całej witryny. Jeśli jest zagnieżdżony w elemencie <article> lub <section>, jest nagłówkiem tej podsekcji strony.

Zalecamy używanie poziomów nagłówków podobnie jak w edytorze tekstu: zacznij od <h1> jako głównego nagłówka, <h2> jako nagłówków podsekcji i <h3>, jeśli te podsekcje mają sekcje. Unikaj pomijania poziomów nagłówków. Tutaj znajdziesz dobry artykuł o nagłówkach sekcji.

Niektórzy użytkownicy czytników ekranu korzystają z nagłówków, aby zrozumieć zawartość strony. Pierwotnie nagłówki miały służyć do tworzenia konspektu dokumentu, podobnie jak w MS Word czy Dokumentach Google, ale przeglądarki nigdy nie wdrożyły tej struktury, a proponowany algorytm konspektu został usunięty ze specyfikacji HTML. Przeglądarki wyświetlały kiedyś elementy <h1> zagnieżdżone w elementach sekcji mniejszą czcionką, ale nowoczesne przeglądarki usunęły te domyślne style i nie obsługują automatycznego tworzenia konspektu dokumentu.

Masz już wystarczającą wiedzę, aby utworzyć konspekt dla witryny MachineLearningWorkshop.com:

Przedstawienie <body> MLW.com

Oto konspekt widocznej zawartości witryny warsztatów dotyczących uczenia maszynowego:

Ponieważ żaden fragment treści nie jest samodzielnym, kompletnym elementem, <section> jest bardziej odpowiedni niż <article>. Chociaż każdy fragment ma nagłówek, żadna sekcja nie zasługuje na <footer>.

Nie używaj nagłówków, aby pogrubić lub powiększyć tekst. Zamiast tego użyj CSS. Jeśli chcesz wyróżnić tekst, możesz użyć elementów semantycznych. Omówimy to i wypełnimy większość treści strony, gdy będziemy omawiać podstawy tekstu, po szczegółowym omówieniu atrybutów.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat nagłówków i sekcji.