Obecný kontejner

<div>

Blokový kontejner. Krabice bez významu, do které zabalíme, co potřebujeme stylovat dohromady.

V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.

Zápis

Krabice bez významu

div je párový tag. Je blokový: začíná na novém řádku a zabere celou šířku. Sám o sobě nic neznamená a nijak nevypadá.

V náhledu není nic vidět. div je neviditelný, dokud mu nedáme styl.

Kdy

Až když nic jiného nesedí

Pro hlavičku, navigaci, článek nebo patičku máme elementy, které říkají, co obsahují. div je až poslední možnost: wrapper jen kvůli stylu.

Stránce poskládané jen z div se říká „div polévka“. Screen reader v ní nenajde hlavičku ani obsah.

Atributy

Jméno dává třída

div skoro vždy dostane atribut class. Podle třídy ho najde CSS a podle ní i my poznáme, k čemu wrapper slouží.

Třídu pojmenujte podle toho, co wrapper je (card), ne jak vypadá (red-box).

Styl

Z wrapperu karta

Teprve styl udělá z neviditelné krabice kartu: padding, border a zaoblené rohy.

Rozvržení

Wrapper pro skupinu

Tři karty vedle sebe potřebují společného rodiče, který je rozmístí. Ani ten nemá žádný význam, takže je to zase div.

Rozvržení

Vycentrovaný obsah

Nejčastější div na webu: wrapper, který omezí šířku obsahu a vycentruje ho. Na širokém monitoru se pak řádky neroztáhnou přes celou obrazovku.

margin-inline: auto rozdělí volné místo vlevo a vpravo rovným dílem.

Responzivita

Na telefonu pod sebou

Tři karty vedle sebe by na telefonu byly úzké sloupečky. Wrapper .cards je proto složí pod sebe a .container zmenší padding, aby obsah měl víc místa.

Díky wrapperům měníme rozvržení na jednom místě. Samotné karty o tom ani nevědí.

Shrnutí

Jak používat div

Ano

• wrapper kvůli stylu nebo rozvržení
• třída, která říká, co wrapper je
• vycentrovaný .container s omezenou šířkou
• rozvržení wrapperu měnit přes @media

Ne

• div tam, kde sedí header, nav, main nebo article
• div místo tlačítka nebo odkazu

Další: <span> →