Nagłówki i sekcje

W ostatniej sekcji dowiedzieliśmy się, jak, nawet jeśli nie wiesz, co oznaczają słowa na stronie, gdy elementy semantyczne zapewniają dokumentowi konstrukcję, inne (wyszukiwarka, technologie wspomagające, przyszły pracownik obsługi czy nowy członek zespołu) zrozumie zarys dokumentu.

W tej sekcji omówimy strukturę dokumentu, przypomnisz elementy podziału z poprzedniej sekcji i oznaczysz konspekt aplikacji.

Dobór odpowiednich elementów podczas tworzenia kodu oznacza, że nie musisz refaktoryzować ani komentować kodu HTML. Gdy myślisz o zastosowaniu odpowiedniego elementu do swojego zadania, najczęściej wybierasz element, który najlepiej pasuje do danego zadania. Jeśli tego nie zrobisz, najprawdopodobniej już nie.

Skoro znasz już semantykę znaczników i wiesz, dlaczego wybór odpowiedniego elementu jest ważny, to gdy poznasz już wszystkie elementy, możesz wybrać ten właściwy, bez większego wysiłku.

Witryna <header>

Stwórzmy nagłówek witryny. Zaczniesz od znaczników niesemantycznych, a następnie będziesz dojść do dobrego rozwiązania, by poznać zalety sekcji HTML i elementów nagłówka.

Jeśli nie zastanawiasz 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 zapewnić (prawie) poprawny wygląd znaczników. Jednak użycie niesemantycznej funkcji <div> we wszystkich zadaniach zapewnia dodatkową pracę. Aby kierować reklamy na wiele elementów <div> za pomocą CSS, musisz identyfikować zawartość za pomocą identyfikatorów lub klas. Kod zawiera też komentarz przy każdym zamykającym elemencie </div> wskazujący, który tag otwierający </div> został zamknięty.

Atrybuty id i class stanowią punkty zaczepienia stylistyczne i kodu JavaScript, ale nie dodają żadnych wartości semantycznych do czytnika ekranu ani (w większości przypadków) dla wyszukiwarek.

Możesz uwzględnić atrybuty role, aby zapewnić semantykę i utworzyć dobry model 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 korzystanie z selektorów atrybutów w CSS, przy czym wciąż dodaje komentarze wskazujące, które obiekty <div> są zamykane w elemencie </div>.

Jeśli znasz język HTML, musisz jedynie przemyśleć cel treści. Następnie możesz napisać ten kod w sposób semantyczny bez użycia role i bez komentowania zamykających tagów:

<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 znaków semantycznych: <header> i <nav>.

To jest główny nagłówek. Element <header> nie zawsze jest punktem orientacyjnym. Ma różne semantykę w zależności od tego, gdzie zostanie umieszczona. Jeśli element <header> znajduje się na najwyższym poziomie, jest to witryna banner – rola punktowa, którą być może zauważysz w bloku kodu role. Gdy element <header> jest zagnieżdżony w sekcji <main>, <article> lub <section>, identyfikuje go po prostu jako nagłówek tej sekcji, a nie stanowi punkt orientacyjny.

Element <nav> identyfikuje treść jako elementy nawigacyjne. Element <nav> jest zagnieżdżony w nagłówku witryny, więc jest głównym menu nawigacyjnym. Gdyby była zagnieżdżona w sekcji <article> lub <section>, byłaby wewnętrzna nawigacja wewnętrzna tylko w tej sekcji. Za pomocą elementów semantycznych udało Ci się stworzyć zrozumiały model ułatwień dostępu (AOM). Pole AOM umożliwia czytnikowi ekranu poinformowanie użytkownika, że ta sekcja składa się z głównego bloku nawigacyjnego, który można otworzyć lub pominąć.

Zastosowanie tagów zamykających </nav> i </header> eliminuje konieczność używania w komentarzach informacji o tym, który element został zamknięty w poszczególnych tagach końcowych. Stosowanie różnych tagów dla różnych elementów eliminuje też potrzebę użycia zaczepów id i class. Selektory CSS mogą być mało precyzyjne. Prawdopodobnie możesz kierować na linki za pomocą atrybutu header nav a, nie obawiając się o konflikt.

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

Witryna <footer>

Zakodujmy stopkę witryny.

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

Podobnie jak w przypadku <header>, to, czy stopka jest punktem orientacyjnym, zależy od tego, gdzie jest zagnieżdżona. Stopka witryny stanowi punkt orientacyjny i powinna zawierać niezbędne informacje w stopce na każdej stronie, np. oświadczenie o prawach autorskich, informacje kontaktowe oraz linki do zasad dotyczących prywatności i plików cookie. Wartość domyślna role stopki witryny to contentinfo. W przeciwnym razie stopka nie ma roli pośredniej i nie jest punktem orientacyjnym, jak widać na poniższym zrzucie ekranu dokumentu AOM w Chrome (który zawiera element <article> z <header> i <footer> między <header> i <footer>).

Na tym zrzucie ekranu widać 2 stopki: jedną na poziomie <article> i jedną na najwyższym poziomie. Stopka najwyższego poziomu jest punktem orientacyjnym i ma domyślnie przypisaną rolę contentinfo. Druga stopka nie jest punktem orientacyjnym. Chrome pokazuje ją jako FooterAsNonLandmark, a w Firefoksie jako section.

Nie oznacza to, że nie należy używać <footer>. Załóżmy, że prowadzisz bloga. Blog zawiera stopkę witryny z domniemaną rolą contentinfo. Każdy post na blogu może też mieć <footer>. Przeglądarka, wyszukiwarka i czytnik ekranu wiedzą, że na głównej stronie docelowej bloga jest to stopka najwyższego poziomu, a wszystkie pozostałe stopki są powiązane z postami, w których zostały umieszczone.

Gdy element <footer> jest elementem potomnym elementu <article>, <aside>, <main>, <nav> lub <section>, nie jest punktem orientacyjnym. Jeśli post wyświetla się samodzielnie, stopka może zostać awansowana (w zależności od znaczników).

W stopkach często znajdują się informacje kontaktowe umieszczone w elemencie adresu kontaktowym – <address>. Ten element nie jest zbyt dobrze nazwany i służy do umieszczania danych kontaktowych osób fizycznych lub organizacji, a nie 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ż czasami są one unikalnymi elementami, czyli „sekcjami”. Omówimy najpopularniejsze układy stron na potrzeby elementu podziału na pełny etat:

Układ z nagłówkiem, 2 paskami bocznymi i stopką jest nazywany układem Świętego Graala. Istnieje wiele sposobów dodawania znaczników do tej 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, w usłudze <main> możesz mieć serię artykułów:

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

Dzięki zastosowaniu elementów semantycznych przeglądarki mogą tworzyć konkretne drzewa ułatwień dostępu, co ułatwia użytkownikom czytników ekranu poruszanie się po witrynie. Tutaj banner i contentinfo są dostarczane za pośrednictwem witryny <header> i <footer>. Do nowych elementów, które tu dodasz, należą: <main>, <aside> i <article>; także używane wcześniej <h1> i <nav> oraz <section>, które nie były jeszcze używane.

<main>

Występuje jeden element orientacyjny (<main>). Element <main> określa główną treść dokumentu. Na każdej stronie powinna znajdować się tylko 1 element <main>.

<aside>

Tag <aside> oznacza treść, która jest pośrednio lub stoistycznie powiązana z główną treścią dokumentu. Ten artykuł dotyczy na przykład języka HTML. W przypadku sekcji dotyczącej specyfiki selektora CSS w przypadku 3 przykładów nagłówków witryny (div, role i semantycznych) skrajnie powiązany z nimi wymiar może być zawarty w elemencie <aside>. Podobnie jak w większości przypadków element <aside> będzie się prawdopodobnie wyświetlać na pasku bocznym lub w polu z objaśnieniem. Charakterystyczny element to <aside>, którego pośrednią rolę odgrywa complementary.

<article>

W elemencie <main> dodaliśmy 2 elementy <article>. W pierwszym przykładzie, gdy główna treść obejmowała tylko jedno słowo, lub w świecie rzeczywistym – tylko jeden fragment treści. Jeśli jednak piszesz bloga, tak jak w naszym drugim przykładzie, każdy post powinien znajdować się w elemencie <article> umieszczonym w elemencie <main>.

<article> reprezentuje kompletną (samodzielną) sekcję treści, z której zasadniczo można korzystać niezależnie od siebie. Potraktuj artykuł jako artykuł w gazecie. W druku artykuł o Jacindzie Ardern, premierze Nowej Zelandii, mógł pojawić się tylko w jednej sekcji – może to być wiadomości ze świata. W witrynie gazety ten sam artykuł może pojawić się na stronie głównej, w polityce, w Oceanie lub w sekcji wiadomości z regionu Azji i Pacyfiku oraz, w zależności od tematu wiadomości, sportu, stylu życia czy technologii. Artykuł może pojawić się też w innych witrynach, takich jak Pocket czy Yahoo News!

<section>

Element <section> jest używany do uwzględnienia ogólnych samodzielnych sekcji dokumentu, gdy nie ma bardziej konkretnego elementu semantycznego, którego można użyć. Sekcje powinny mieć nagłówki (z kilkoma wyjątkami).

Wracając do przykładu z Jacinda Ardern: na stronie głównej gazety baner będzie zawierać nazwę gazety i pojedynczy element <main> podzielony na kilka elementów <section>, każdy z nagłówkiem, takim jak „Wiadomości ze świata” i „Polityka”. W każdej sekcji zobaczysz serię <article>. W każdym elemencie <article> możesz też znaleźć co najmniej 1 element <section>. Jeśli patrzysz na tę stronę, cała część „nagłówków i sekcji” to <article>. Ten element <article> jest następnie podzielony na kilka elementów <section>, w tym site header, site footer i strukturę dokumentu. Sam artykuł, podobnie jak każda sekcja, ma nagłówek.

Element <section> nie jest punktem orientacyjnym, chyba że ma nazwę na potrzeby ułatwień dostępu. Jeśli ma nazwę na potrzeby ułatwień dostępu, rola pośrednia to region. Ról punktowych należy używać z umiarem, ponieważ umożliwiają one identyfikowanie większych sekcji 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 <main> składa się z dwóch lub trzech ważnych podsekcji, w tym łatwo dostępnych nazw dla każdej <section>.

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

W nagłówku sekcji jest 6 elementów: <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> – najniższy.

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

Zalecamy, aby używać poziomów nagłówków podobnych do poziomów nagłówków w edytorze tekstu: zacznij od nagłówka <h1> jako głównego nagłówka, z <h2> jako nagłówka dla podsekcji i <h3>, jeśli te podsekcje mają sekcje. Unikaj pomijania poziomów nagłówków. W tym miejscu znajdziesz dobry artykuł o nagłówkach sekcji.

Niektórzy użytkownicy czytników ekranu korzystają z nagłówków, które pozwalają zrozumieć zawartość strony. Pierwotnie nagłówki miały zastępować dokument, tak jak Microsoft Word czy Dokumenty Google mogą tworzyć konspekt na podstawie nagłówków, ale przeglądarki nigdy nie stosują takiej struktury. Przeglądarki wyświetlają zagnieżdżone nagłówki w coraz mniejszym rozmiarze czcionki, jak pokazano w poniższym przykładzie, jednak w rzeczywistości nie obsługują one obrysu.

Masz już wystarczającą wiedzę, aby przygotować zarys MachineLearningWorkshop.com:

<body> MLW.com

Oto ogólny zarys widocznej zawartości witryny warsztatów związanych z systemami uczącymi się:

Żaden fragment treści nie jest samodzielnym, kompletnym materiałem, dlatego lepiej użyć atrybutu <section> niż <article>. Choć każdy z nich ma nagłówek, żadna sekcja nie zasługuje na <footer>.

Żeby to zrobić, nie wspomnij o tym, ale nie stosuj nagłówków, aby pogrubić tekst lub go wyróżnić. Zamiast tego użyj CSS. Jeśli chcesz uwydatnić tekst, możesz też skorzystać z elementów semantycznych. Omówimy je i wypełnimy większość treści na stronie podczas omawiania podstawowych informacji dotyczących tekstu, a po głębszej analizie atrybutów.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o nagłówkach i sekcjach.