Do tej pory dzieliliście stronę na kawałki znacznikiem <div> i opisowym id albo class. HTML5 ma na te same kawałki gotowe nazwy: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>.
Znaczniki sekcji HTML5 - do czego służy każdy i ile razy może wystąpić na stronie
<div> kontra znaczniki sekcji - ten sam wygląd, inne znaczenie
<article> i <section> zagnieżdżone w <main>
Rozgrzewka · 3 minuty
Trzy pytania z poprzedniej lekcji
Czym różni się background-size: cover od contain?
Dlaczego object-fit nie zadziała, jeśli obrazek nie ma ustawionych innych wymiarów niż naturalne?
Jak ustawić obraz tła tak, żeby powtarzał się tylko w pionie?
Część 1 · szkielet strony
Ramy strony: header, nav, main, footer
HTML5 dodał znaczniki nazywające typowe kawałki strony - jak plan domu z pokojami nazwanymi po ich funkcji, zamiast bezimiennych „pomieszczeń” <div>. <header> jako dziecko <body> to nagłówek całej strony i może wystąpić kilka razy (też wewnątrz <article>/<section>, jako ich własny nagłówek). <nav> to tylko główna nawigacja - linki poboczne tu nie trafiają. <main> to treść unikalna dla tej strony: tylko raz na stronę, bezpośrednio w <body>. <footer> to grupa treści końcowej i, jak <header>, może wystąpić kilka razy.
MDN: „If it is a child of <body> it defines the global header of a webpage, but if it's a child of an <article> or <section> it defines a specific header for that section” · „<nav> contains the main navigation functionality for the page. Secondary links, etc., would not go in the navigation” · „Use <main> only once per page, and put it directly inside <body>” · „<footer> represents a group of end content for a page” · developer.mozilla.org/docs/Learn_web_development/Core/Structuring_content/Structuring_documents
Część 2 · article, section, aside
Wewnątrz main: article, section, aside
<article> to samodzielny blok treści, sensowny bez reszty strony - na przykład pojedynczy wpis na blogu. <section> grupuje jedną część strony wokół wspólnego tematu albo funkcji (dobra praktyka: zaczynać nagłówkiem) - artykuł można podzielić na sekcje, a sekcje na artykuły, zależnie od kontekstu. <aside> to treść pośrednio związana z główną (biogram autora, linki powiązane), często umieszczana wewnątrz <main>.
Znacznik
Kiedy go użyć
<article>
Treść ma sens sama w sobie (wpis na blogu, artykuł, komentarz)
<section>
Grupa jednego tematu w obrębie strony, zwykle z własnym nagłówkiem
<aside>
Treść poboczna wobec głównej, niekonieczna do jej zrozumienia
MDN: „<article> encloses a block of related content that makes sense on its own without the rest of the page (for example, a single blog post)” · „<section> is similar to <article>, but it is more for grouping together a single part of the page that constitutes one single piece of functionality... or a theme” · „you can break articles up into different sections, or sections up into different articles, depending on the context” · „<aside> contains content that is not directly related to the main content... often placed inside <main>” · developer.mozilla.org/docs/Learn_web_development/Core/Structuring_content/Structuring_documents
Część 3 · div kontra znaczniki sekcji
Ten sam wygląd, inne znaczenie
<div> to znacznik blokowy bez znaczenia - MDN radzi używać go tylko wtedy, gdy nie ma lepszego znacznika semantycznego (czyli takiego, którego nazwa mówi, czym jest jego zawartość, jak <header> czy <nav>). Oba układy niżej wyglądają identycznie w przeglądarce, bo <div> i znaczniki sekcji są domyślnie blokowe: zamiana jednego na drugie nie zmienia wyglądu, jeśli CSS jest podpięty przez klasę, a nie przez nazwę znacznika.
MDN: „<div> is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning” · developer.mozilla.org/docs/Learn_web_development/Core/Structuring_content/Structuring_documents
Część 4 · article i section w main
Wpis na blogu: article, section i aside razem
Jeden dokument, jedno <main>, a w nim <article> podzielony na dwie <section> (np. wprowadzenie i podsumowanie) obok osobnego <aside> z linkami powiązanymi - dokładnie układ z przykładu MDN.
Ciekawostka z MDN: dawniej HTML5 zakładał, że przeglądarka sama obniży poziom nagłówka w zależności od tego, w ilu zagnieżdżonych <article>/<section> się znajduje - czyli że w każdym z nich można by pisać <h1>. Żadna przeglądarka tego nie zbudowała, więc numer nagłówka (<h2> w tytule wpisu wyżej, dalej <h3> itd.) trzeba dobrać ręcznie.
MDN, przykładowa struktura strony: „<main>… <article>… <h2>Article heading</h2>… <section>… </article>… <aside>… </main>” · developer.mozilla.org/docs/Learn_web_development/Core/Structuring_content/Structuring_documents · ciekawostka: MDN, „Heading Elements”, „Nesting multiple <h1> elements in nested sectioning elements was allowed in older versions of the HTML standard. However, this was never considered a best practice and is now non-conforming” · developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
HTML5 · egzamin
Tak pytają na egzaminie
1. Który wykaz znaczników definiujących przedstawiony projekt witryny w sposób semantyczny (znaczeniowy) jest zgodny ze standardem HTML5?
2. Znaczniki <header>, <article>, <section>, <footer> są charakterystyczne dla języka
HTML5
XHTML 1.1
HTML 4.01 Strict
HTML 4.01 Transitional
CKE, EE.09, czerwiec 2022, zadanie 28 · CKE, E.14, styczeń 2018, zadanie 1
Ćwiczenie · przy komputerze · 20 minut
Ćwiczenie: semantyczny HTML5
Otwórz index.html i pozostałe podstrony swojej witryny w edytorze.
Zamień <div> odpowiadający za nagłówek na <header>, za menu na <nav>, za treść główną na <main>, za stopkę na <footer> - w każdym pliku osobno.
Nie zmieniaj CSS: te znaczniki są domyślnie blokowe jak <div>, więc jeśli style są podpięte przez klasę, wygląd strony się nie zmieni.
Zapisz, F5, sprawdź w przeglądarce.
Pamiętajcie: jeśli po zamianie strona wygląda inaczej, sprawdźcie w CSS, czy jakaś reguła jest zapisana po nazwie znacznika (np. div { ... }) zamiast po klasie - wtedy trzeba dopisać tę regułę pod nową nazwą.
Pytania kontrolne
Trzy pytania na koniec
Ile razy może wystąpić <main> na jednej stronie i gdzie ma się znajdować?
Czym różni się <article> od <section>?
Dlaczego zamiana <div> na <header>/<nav>/<main>/<footer> nie zmienia wyglądu strony?
To tyle na dziś: znaczniki sekcji gotowe. Na następnej lekcji: ten sam układ zbudowany siatką CSS Grid.
Rozkład: Układ w HTML5 1/2 → Układ w HTML5 2/2
Z realnych wdrożeń
A jak to wygląda w produkcji?
Na lekcji
W produkcji
Status
<header>/<nav>/<main>/<footer> zamiast <div>
Ten sam zestaw znaczników w każdym większym serwisie - czytnik ekranu widzi je jako „landmarks” (punkty orientacyjne) i pozwala od razu przeskoczyć do treści głównej, pomijając powtarzalny nagłówek i menu
nadal w użyciu
Jeden <article> podzielony na dwie <section>
Ten sam wzorzec w kartach produktów, komentarzach pod wpisem, kolejnych pytaniach w FAQ - każdy blok jako osobny <article> lub <section>
nadal w użyciu
Strona zbudowana tylko z <div> i id/class („div soup”)
Ten sam wygląd da się zbudować znacznikami sekcji bez dodatkowej pracy - „div soup” utrudnia pracę czytnikom ekranu i wyszukiwarkom, bo nie widać, co jest czym
unikane
MDN, Technical summary <header>: „Implicit ARIA role: banner” · <nav>: „Implicit ARIA role: navigation” · <main>: „Implicit ARIA role: main” · „Landmarks can be used by assistive technology to quickly identify and navigate to large sections of the document” · developer.mozilla.org/docs/Web/HTML/Element/header, /nav, /main