Stopka strony HTML5

Nareszcie dotarliśmy na sam koniec naszej przykładowej strony. Na zakończenie kilka słów o ostatnim elemencie strony, czyli stopce. Początkowo stopkę oznaczyliśmy następująco:

<div id="footer">
  <p>§</p>
  <p>© 2001-9 <a href="#">Mark Pilgrim</a></p>
</div>

Jest to poprawny kod HTML5. Jeśli ci się podoba, możesz go używać. Ale w języku HTML5 jest dostępny lepszy element służący do oznaczania stopki: element footer.

<footer>
  <p>§</p>
  <p>© 2001-9 <a href="#">Mark Pilgrim</a></p>
</footer>

Co powinno się umieszczać w elemencie footer? Najprościej mówiąc, wszystko to, co umieściłbyś w elemencie <div id="footer">. Wiem, to pokrętna odpowiedź. Ale naprawdę jest bardzo dobra. Według specyfikacji HTML5: “Najczęściej w stopce umieszcza się informacje o autorze treści, łącza do podobnych dokumentów, informacje o prawach autorskich itp.” Informacje takie znajduje się w stopce także naszej przykładowej strony: krótka informacja o prawach autorskich i odnośnik do strony o autorze. Kiedy jednak przeglądam różne strony internetowe, to dostrzegam w stopce bardzo duży potencjał.

W portalu CNN stopka zawiera informację o prawach autorskich, łącza do tłumaczeń oraz odnośniki do warunków korzystania, polityki prywatności, strony z informacjami o firmie, strony z danymi kontaktowymi i stron pomocy. Wszystko to doskonale nadaje się do umieszczenia w elemencie footer.
Google słynie ze swojej wyjątkowo ascetycznej strony głównej, ale na dole znajdują się łącza „Reklamuj się w Google”, „‎Rozwiązania dla firm”, „Prywatność i warunki”, „Wszystko o Google” oraz informacja o prawach autorskich. To również jest dobrym materiałem do umieszczenia w elemencie footer.
Mój blog ma stopkę zawierającą łącza do moich innych stron i informacje o prawach autorskich. Nie ma wątpliwości, że taką treść można umieścić w stopce. (Zwróć uwagę, że odnośników w tym przypadku nie należy umieszczać w elemencie <nav>, ponieważ nie należą do głównej nawigacji witryny. Są to po prostu odnośniki do innych moich prac.)

“Ostatnio wielką karierę robią tzw. wypasione stopki (ang. fat footer). Spójrz np. na stopkę w serwisie W3C. Zawiera trzy kolumny zatytułowane „Navigation”, „Contact W3C” oraz „W3C Updates”. Kod źródłowy wygląda mniej więcej tak:

<div id="w3c_footer">
  <div class="w3c_footer-nav">
    <h3>Navigation</h3>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/standards/">Standards</a></li>
      <li><a href="/participate/">Participate</a></li>
      <li><a href="/Consortium/membership">Membership</a></li>
      <li><a href="/Consortium/">About W3C</a></li>
    </ul>
  </div>
  <div class="w3c_footer-nav">
    <h3>Contact W3C</h3>
    <ul>
      <li><a href="/Consortium/contact">Contact</a></li>
      <li><a href="/Help/">Help and FAQ</a></li>
      <li><a href="/Consortium/sup">Donate</a></li>
      <li><a href="/Consortium/siteindex">Site Map</a></li>
    </ul>
  </div>
  <div class="w3c_footer-nav">
    <h3>W3C Updates</h3>
    <ul>
      <li><a href="http://twitter.com/W3C">Twitter</a></li>
      <li><a href="http://identi.ca/w3c">Identi.ca</a></li>
    </ul>
  </div>
  <p class="copyright">Copyright © 2009 W3C</p>
</div>

Gdybym chciał użyć nowych semantycznych elementów HTML5, dokonałbym następujących modyfikacji:

Zewnętrzny element <div id="w3c_footer"> zamieniłbym na element <footer>.
Dwa pierwsze elementy <div class="w3c_footer-nav"> zamieniłbym na elementy <nav>, a trzeci — na <section>.
Nagłówki <h3> zamieniłbym na <h1>, ponieważ teraz każdy z nich będzie znajdował się w elemencie sekcyjnym. Element <nav>, podobnie jak <article>, tworzy sekcję w zarysie dokumentu.

W efekcie kod źródłowy tej stopki wyglądałby tak:

<footer>
  <nav>
    <h1>Navigation</h1>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/standards/">Standards</a></li>
      <li><a href="/participate/">Participate</a></li>
      <li><a href="/Consortium/membership">Membership</a></li>
      <li><a href="/Consortium/">About W3C</a></li>
    </ul>
  </nav>
  <nav>
    <h1>Contact W3C</h1>
    <ul>
      <li><a href="/Consortium/contact">Contact</a></li>
      <li><a href="/Help/">Help and FAQ</a></li>
      <li><a href="/Consortium/sup">Donate</a></li>
      <li><a href="/Consortium/siteindex">Site Map</a></li>
    </ul>
  </nav>
  <section>
    <h1>W3C Updates</h1>
    <ul>
      <li><a href="http://twitter.com/W3C">Twitter</a></li>
      <li><a href="http://identi.ca/w3c">Identi.ca</a></li>
    </ul>
  </section>
  <p class="copyright">Copyright © 2009 W3C</p>
</footer>

Lektura uzupełniająca

Przykładowe strony omawiane w tym rozdziale:

O kodowaniu znaków:

Absolutne minimum, jakie bezwzględnie każdy webmaster powinien wiedzieć o Unicode i zestawach znaków (bez wymówek!), Joel Spolsky (tekst po angielsku)
O pożytkach płynących z Unicode, O łańcuchach znaków oraz Znaki a bajty, Tim Bray (teksty po angielsku)

O włączaniu obsługi nowych elementów HTML5 w Internet Explorerze:

Jak formatować za pomocą CSS nieznane elementy w IE, Sjoerd Visscher (tekst po angielsku)
HTML5 shiv, John Resig (tekst po angielsku)
Skrypt włączający obsługę HTML5, Remy Sharp (tekst po angielsku)
Historia HTML5 Shiv, Paul Irish (tekst po angielsku)

O trybach obsługi standardów i wykrywaniu typu dokumentu:

Włączanie trybów działania przeglądarek przy użyciu typu dokumentu, Henri Sivonen. To jedyny artykuł na ten temat, jaki należy przeczytać. Każda inna publikacja o typach dokumentów, w której nie ma odniesienia do pracy Sivonena na pewno jest przestarzała, niekompletna albo zawiera błędy (tekst po angielsku)

Walidator obsługujący HTML5: