Sémantický element
<section>
Tematický oddíl stránky. Kapitola, která má vlastní nadpis.
V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.
Zápis
Oddíl vždy s nadpisem
section seskupuje obsah na jedno téma. Skoro vždy začíná nadpisem, který říká, o čem oddíl je.
Zápis
Stránka rozdělená na kapitoly
Stránka kurzu má hlavní nadpis h1 a pod ním tři oddíly. Každý má nadpis h2.
Nadpisy oddílů tvoří osnovu stránky. Podle ní se orientují screen readery i vyhledávače.
Zápis
section, nebo div?
Má obsah nadpis a patřil by do obsahu stránky? Pak je to section. Potřebujete jen wrapper kvůli stylu? Pak stačí div.
A pokud by obsah dával smysl i sám o sobě, mimo stránku, je to article.
Atributy
Odkazy na jednotlivé oddíly
section má jen globální atributy. S id na oddíl půjde odkázat. Nad oddíly přidáme malý obsah stránky.
Klikněte v náhledu na odkaz „Cena“.
Styl
Rytmus oddílů
Oddíly oddělíme tenkou čarou a dáme jim stejný padding. Stránka dostane pravidelný rytmus.
Styl
Nadpis vlevo, text vpravo
Grid uvnitř každého oddílu dá nadpisu třetinu šířky a textu dvě třetiny.
Responzivita
Na mobilu pod sebou
Na telefonu nechá třetina šířky na nadpis jen pár slov. Dáme proto nadpis nad text a odkazy obsahu pod sebe.
Přepněte náhled na desktop klávesou M a porovnejte.
Shrnutí
Kdy použít section
Ano
- kapitola stránky s vlastním nadpisem
- oddíl, na který chcete odkázat přes
id
Ne
- wrapper jen kvůli stylu. To je
div. - obsah, který obstojí sám. To je
article.