Jak zrobić stopkę w HTML
Umieść treść zamykającą stronę w elemencie <footer>, zwykle ostatnim w <body>. Tak jak <header>, nie ma domyślnego wyglądu; pasek stopki robi z niego CSS:
© wyświetla symbol ©. <small> oznacza linię z prawami autorskimi jako drobny druk, co w HTML jest znaczeniem, a nie tylko mniejszą czcionką. Listy linków to prawdziwe listy <ul>, więc większość czytników ekranu ogłasza, ile linków ma każda kolumna.
Stopka na dole strony
Na stronie z małą ilością treści stopka siedzi tuż pod tą treścią, a pod nią zostaje puste miejsce. Rozwiązaniem jest kolumna flex: kontener jest co najmniej tak wysoki jak okno, a główny obszar zajmuje całą pozostałą wysokość. Szare pudełko poniżej udaje okno przeglądarki:
Usuń flex: 1 z main, a stopka podskoczy pod akapit. Na prawdziwej stronie umieść te same reguły na <body> z min-height: 100vh (i margin: 0) zamiast stałej wysokości, żeby stopka była na dole krótkich stron i za treścią na długich.
Stopki w artykułach
<footer> zamyka najbliższy artykuł lub sekcję, więc wpis na blogu czy komentarz może mieć własną stopkę z autorem, datą lub tagami:
Czytniki ekranu traktują jako punkt orientacyjny contentinfo tylko stopkę na poziomie strony. Stopka w artykule to zwykła grupa, więc nie konkuruje ze stopką strony.
Dane kontaktowe z address
Dla danych kontaktowych dotyczących strony lub jej właściciela użyj <address> wewnątrz stopki. Służy tylko do danych kontaktowych (a nie do dowolnego adresu pocztowego w treści), a przeglądarki domyślnie pokazują go kursywą:
Łamanie linii w adresie to jedno z dobrych zastosowań <br>. Więcej o linkach e-mail przeczytasz na stronie mailto.
Co może się znaleźć w stopce
Stopka może zawierać linki, listy, formularze (zapis do newslettera), obrazki i <nav>. Nie może zawierać <header>, kolejnego <footer> ani <main>. Drugie menu w stopce może być elementem <nav> z etykietą, która odróżnia je od głównego:
<footer>
<nav aria-label="Footer">
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
</nav>
</footer>
Częste błędy
<footer>poza<body>. Wszystko, co widoczne, trafia do<body>, stopka też.position: fixed, żeby trzymać ją na dole. Przyklejona stopka zasłania treść na małych ekranach i wymaga paddingu wszędzie. Użyj wzorca z kolumną flex.<address>dla dowolnego adresu. Służy do danych kontaktowych autora strony lub artykułu. Adres sklepu na liście lokalizacji to zwykły<p>.- Kolumny linków zbudowane ze znaczników
<br>. Użyj list<ul>, żeby struktura była ogłaszana. - Wpisany na sztywno zeszły rok. Aktualizuj rok w prawach autorskich w szablonie albo wypisuj go z serwera lub w kroku budowania.
Najczęściej zadawane pytania
Czym jest znacznik footer w HTML?
<footer> to element semantyczny na treść zamykającą stronę lub sekcję: prawa autorskie, dane kontaktowe, powiązane linki albo informacje o autorze. To blok bez domyślnego stylu.
Co powinno się znaleźć w stopce strony?
Typowe stopki zawierają informację o prawach autorskich, linki do stron prawnych, takich jak polityka prywatności i regulamin, dane kontaktowe, linki do mediów społecznościowych i krótką mapę strony. Główną nawigację trzymaj też w <nav> u góry, bo nie każdy odwiedzający przewija do końca.
Jak utrzymać stopkę na dole strony?
Zrób z body kolumnę flex co najmniej tak wysoką jak okno (display: flex; flex-direction: column; min-height: 100vh;) i nadaj <main> flex: 1. Główny obszar rozrośnie się wtedy na wolne miejsce i na krótkich stronach zepchnie stopkę w dół.
Jak wpisać znak copyright w HTML?
Użyj encji ©, która wyświetla ©. Możesz też wpisać znak bezpośrednio, gdy strona używa <meta charset="utf-8">. Otoczenie linii znacznikiem <small> oznacza ją jako drobny druk.
Czy strona może mieć więcej niż jedną stopkę?
Tak. Każdy <article> lub <section> może mieć własną stopkę z danymi autora lub tagami. Tylko stopka, która nie jest wewnątrz article, aside, main, nav ani section, jest dla czytników ekranu punktem orientacyjnym contentinfo strony.
