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 .