Sémantický element

<footer>

Patička stránky nebo jejího oddílu. Najdete v ní kontakt, doplňkové odkazy a copyright.

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

Zápis

Párový tag na konci

Nejjednodušší patička obsahuje jen copyright. Element small označuje drobný text, jako jsou právní poznámky.

Zápis

Co do patičky patří

Krátce o webu, kontakt a odkazy na sociální sítě. Každou skupinu zabalíme do div.

Element address je určený pro kontaktní údaje. Nepoužívejte ho pro jakoukoli adresu v textu.

Atributy

Odkazy ven v novém tabu

footer má jen globální atributy. Atributy tu ale dostanou odkazy na sociální sítě: otevřou se v novém tabu.

rel="noopener" zabrání cizí stránce, aby ovládala tu naši. K target="_blank" ho přidávejte vždy.

Styl

Podklad a menší písmo

Patička je doplňkový obsah, nemá na sebe strhávat pozornost. Dáme jí tlumený podklad a menší písmo.

Styl

Pryč s výchozími styly

Prohlížeč píše address kurzívou a seznamům dává odrážky. Obojí tu vypneme.

Styl

Tři sloupce

CSS Grid rozdělí patičku na tři stejné sloupce. Copyright roztáhneme přes celou šířku.

1 / -1 znamená „od první čáry gridu po poslední“.

Responzivita

Tři sloupce na mobilu

Na šířce telefonu jsou sloupce úzké: nadpisy se lámou na dva řádky a popis webu skoro po jednotlivých slovech.

Responzivita

Jeden sloupec

Na úzké obrazovce nastavíme gridu jediný sloupec, takže skupiny budou pod sebou.

Mění se jen počet sloupců. Obsah ani HTML se nemění.

Shrnutí

Kdy použít footer

Ano

• patička celého webu
• závěr článku: autor, štítky, související odkazy

Ne

• uvnitř header nebo jiného footer
• address pro jakoukoli adresu, jen pro kontakt

Patička nemusí být jen na konci stránky. Vlastní footer může mít i článek nebo oddíl.

Další: <figure> →