Předěl

<hr>

Tematický předěl. Místo v textu, kde jedno téma končí a začíná jiné.

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

Zápis

Nepárový tag

hr nemá obsah ani uzavírací tag. Patří mezi odstavce tam, kde se mění téma, jako hvězdičky mezi kapitolami v knize.

Prohlížeč ho bez stylu vykreslí jako šedou čáru s vystouplým okrajem.

Kdy

hr nese význam: „tady je změna tématu“. Screen reader ho ohlásí. Když chcete jen čáru pod nadpisem nebo mezi kartami, použijte border v CSS.

Mezi oddíly stránky hr také nepatří. Oddíly odděluje section s nadpisem.

Styl

Výchozí vzhled zrušíme přes border: 0 a nakreslíme vlastní: jeden pixel výšky s barvou pozadí. Kolem necháme hodně místa, ať je pauza znát.

Styl

Zenovější varianta: místo čáry přes celou šířku jen krátká čárka uprostřed v akcentové barvě. Text se tak rozdělí, ale nerozsekne.

margin: 48px auto dá místo nahoře a dole a čárku vycentruje.

Responzivita

Na telefonu je obrazovka nízká. Velká mezera by vypadala jako konec stránky a čtenář by přestal skrolovat. Mezery kolem předělu proto zmenšíme.

margin-block mění jen horní a dolní margin. Vodorovné centrování (auto) zůstane.

Shrnutí

Ano

Ne