Sémantický element
<main>
Hlavní obsah stránky. Tedy to, kvůli čemu na stránku člověk přišel.
V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.
Zápis
Kontejner pro hlavní obsah
main je párový tag. Uvnitř je obsah, který je jen na této stránce: nadpis, text, obrázky.
Zápis
Jednou na stránce, mezi hlavičkou a patičkou
Hlavička a patička se opakují na každé stránce webu. main je to, co se mění.
Viditelný main smí být na stránce jen jeden a nesmí být uvnitř header, footer, nav, article ani aside.
Atributy
Odkaz rovnou na obsah
main má jen globální atributy. Užitečné je id: odkaz href="#obsah" pak skočí přímo na hlavní obsah.
Takový odkaz ocení lidé, kteří ovládají web klávesnicí nebo screen readerem. Nemusí kvůli němu procházet celé menu.
Styl
Čitelná šířka textu
Příliš dlouhé řádky se špatně čtou. Omezíme šířku obsahu a vycentrujeme ho.
Jednotka ch odpovídá šířce jednoho znaku. 60ch znamená zhruba 60 znaků na řádek.
Styl
Prostor kolem obsahu
Zrušíme výchozí margin body, hlavičce a patičce dáme podklad a obsahu vzduch.
Styl
Patička vždy dole
Když je obsahu málo, patička vyskočí doprostřed okna. Pomůže flexbox: body bude sloupec a main zabere všechno volné místo.
Responzivita
Na mobilu méně okrajů
Na telefonu je každý pixel šířky drahý. Zmenšíme padding a velikost nadpisu.
max-width: 60ch na mobilu nevadí. Platí jen tehdy, když je místa víc.
Shrnutí
Kdy použít main
Ano
- jednou na každé stránce
- pro obsah, který je jen na této stránce
Ne
- pro věci, které se opakují: logo, menu, patička
- uvnitř
header,footer,nav,article,aside