Ostatnio edytowany:

footer

Autor: Virtual Patriot

Przeznaczenie elementu footer

Element footer reprezentuje zawartość, którą powinna być treść dodatkowa odnosząca się do treści reprezentowanej przez zawartość pierwszego w kolejności elementu przodka danego elementu footer, który to element przodek należy do kategorii sekcja zawartości lub do kategorii korzeń sekcji. Zawartością elementu footer może być treść, którą zazwyczaj możemy znaleźć w dolnej części artykułu lub w dolnej części strony internetowej, czyli: odnośniki do innych dokumentów HTML, informacje o prawach autorskich, informacje o autorach, informacje o załącznikach, indeksy, aneksy, kolofony oraz każda inna treść, którą uznamy za wspomnianą treść dodatkową.

Nie jest wymogiem, aby element "footer" był ostatnim elementem dzieckiem swojego elementu rodzica.

Dodatkowe techniczne informacje o elemencie footer

kategoria ogólna
kontekst zewnętrzny
element HTML, który tworzy wewnętrzny kontekst opływający

Przykładowy Kod HTML

<article>
  <header>
    <h1>Mój ulubiony owoc</h1>
    <img src="owoc-01.png" alt="zdjęcie czereśni">
  </header>

  <p>
    Moim ulubionym owocem jest czereśnia.
  </p>

  <footer>
    <h2>Dane kontaktowe</h2>
    <address>
      Masz jakieś pytania dotyczące tego artykułu?
      Skontaktuj się z nami!
      <a href="#jan-kowalski">Jan Kowalski</a>
      <a href="#anna-kowalska">Anna Kowalska</a>
    </address>
  </footer>
</article>

Kontekstem zewnętrznym przykładowego elementu "footer" jest element "article". Wspomniany element "article" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst opływający, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "article", jest prawidłowym kontekstem zewnętrznym dla elementu "footer".

kontekst wewnętrzny
zawartość opływająca, lecz nie następujące elementy HTML jako elementy potomkowie: header, footer, main

Przykładowy Kod HTML

<article>
  <header>
    <h1>Mój ulubiony owoc</h1>
    <img src="owoc-01.png" alt="zdjęcie czereśni">
  </header>

  <p>
    Moim ulubionym owocem jest czereśnia.
  </p>

  <footer>
    <h2>Dane kontaktowe</h2>
    <address>
      Masz jakieś pytania dotyczące tego artykułu?
      Skontaktuj się z nami!
      <a href="#jan-kowalski">Jan Kowalski</a>
      <a href="#anna-kowalska">Anna Kowalska</a>
    </address>
  </footer>
</article>

Kontekstem wewnętrznym przykładowego elementu "footer" są wyłącznie elementy HTML, które należą do kategorii zawartość opływająca oraz które nie są zakazanym kontekstem wewnętrznym elementu "footer", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "h2" oraz element "address", jest prawidłowym kontekstem wewnętrznym dla elementu "footer".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

składnia HTML

<footer> ... </footer>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

block

Dodatkowe domyślne reguły CSS elementu footer

footer {
  display:block;
}

Interpretacja elementu footer

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji elementu .