Obszar nagłówka i stopki
Za pomocą dwóch elementów header i footer można zdefiniować obszar nagłówka i stopki. Aby zdefiniować obszar nagłówka, używany jest element head. Nawiasem mówiąc, nie musi to koniecznie dotyczyć obszaru nagłówka całej strony. Za pomocą elementu head można także oznaczyć obszar nagłówka innych elementów, jak na przykład sekcji i artykułów.
Uwaga: nie mylić elementu header z znanym elementem head służącym do definiowania obszaru nagłówka dokumentów HTML, w którym zawarte są tytuł dokumentu, odwołania do arkuszy stylów i skryptów JavaScript.
Dla całego dokumentu użycie elementu header wyglądałoby następująco:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Zastosowanie do elementu section wyglądałoby następująco:
<section>
<header>
<h1> Tworzenie aplikacji internetowych (Część 09): jQuery mobile (1)</h1>
<p> jQuery to niewątpliwie jedna z najbardziej znanych platform JavaScript.</p>
</header>
<p>
Na „klasycznych” stronach internetowych jQuery jest już używane tysiące razy. Specjalnie zaprojektowana do użytku w aplikacjach internetowych została siostrzana platforma jQuery mobile (jQM). Ta platforma pomaga Wam w mig osiągnąć wygląd Waszej aplikacji internetowej jak prawdziwa aplikacja. Wystarczający powód, by przyjrzeć się jQM dokładniej.
</p>
<footer>
<p>Prawa autorskie należą do PSD-Tutorials.de</p>
</footer>
</section>Upewnij się, że elementy footer i header nie zawierają dodatkowych elementów header i footer.
Grupowanie nagłówków
W kontekście sekcji pojawiają się nagłówki. Mogą to być klasyczne elementy nagłówków h1 do h6. W HTML5 dozwolony jest także element hgroup. Wewnątrz tych elementów hgroup mogą znajdować się kolejne nagłówki.
Pierwszy rzut oka na klasyczny dokument HTML, w którym struktura "standardowa" jest definiowana za pomocą elementów hx.
<h1>
Książka
</h1>
<h2>
Rozdział 1
</h2>
<h2>
Rozdział 2
</h2>
<h3>
Podrozdział 2.1
</h3>
<h3>
Podrozdział 2.2
</h3>
<h2>
Rozdział 3
</h2>
To oznacza następującą strukturę:
Książka
Rozdział 1
Rozdział 2
Podrozdział 2.1
Podrozdział 2.2
Rozdział 3
W przeglądarce nagłówki nie są jednak wcięte.
Element hgroup jest szczególnie interesujący w kontekście tekstów dziennikarskich. Te często składają się z dwuczłonowego nagłówka, składającego się z nagłówka głównego oraz nagłówka dodatkowego lub podrzędnego. Przykład może wyjaśnić ten aspekt.
<hgroup> <h1>Cloud OS</h1> <h2>Web jako system operacyjny</h2> </hgroup> <p>Zgodnie z treścią artykułu ...</p>
Na tym przykładzie widać wyraźnie, że nagłówek podrzędny nie rozpoczyna nowej sekcji w artykule. Jest to raczej element nagłówka artykułu. Dokładnie taki aspekt można zebrać za pomocą elementu hgroup.
Wewnątrz elementu hgroup dozwolone są elementy h1 do h6.
Koncepcja zarysu
W HTML5 pojawia się także koncepcja zarysu, w której chodzi o współpracę elementu section z różnymi elementami hx. W tej koncepcji, jak dotąd, nagłówki są podzielone na różne poziomy za pomocą elementów h1 do h6. Element h1 odpowiada najwyższemu poziomowi, podczas gdy h6 jest najniższym poziomem. Tutaj nie ma zmian w porównaniu do wcześniejszych wersji. Ponieważ teraz elementy hx mogą być zdefiniowane wewnątrz elementów section. A zatem za każdym razem rozpoczyna się numerowanie od nowa, zawsze jednak o jeden poziom niżej.
Koncepcja zarysu może wydawać się skomplikowana w specyfikacji HTML5, ale jej idea jest bardzo prosta. Faktycznie można za jej pomocą zdefiniować streszczenie, które czyni strukturę dokumentu zrozumiałą dla maszyn.
Przykład:
<h1>
Rozdział 1
</h1>
<section>
<h1>
Rozdział 2
</h1>
<section>
<h1>
Rozdział 3
</h1>
</section>
</section>
Za pomocą koncepcji Outline w HTML5 wynika z tego następująca struktura:
1. Rozdział 1
- Rozdział 2
- Rozdział 3
- Rozdział 3
Kolejny przykład ma na celu zilustrowanie efektu. Tutaj ponownie początkowy dokument.
<section>
<h1>Instalacja i konfiguracja</h1>
<section>
<h2>Instalacja</h2>
<p>Wszystko na temat instalacji
</section> <section>
<h2>Konfiguracja</h2>
<p>Tutaj znajdziecie wszystko na temat konfiguracji
</section>
<aside>
<p>Interesujące książki na temat...
</aside>
</section>
<footer>
<p>(c) by PSD-Tutorials.de
</footer>
</section>
Wynikowa struktura wygląda następująco:
1. Sekcja (Instalacja i konfiguracja)
1.1 Sekcja (Instalacja)
1.2 Sekcja (Konfiguracja)
1.3 Sekcja (aside)
- Sekcja (footer)
A oto kolejny przykład:
<body>
<h1>Instalacja i konfiguracja</h1>
<h2>Instalacja</h2>
<p>Wszystko na temat instalacji
...więcej treści...
<section>
<h3>Wymagania</h3>
<p>Wszystko na temat wymagań instalacyjnych
...więcej treści...
<h3>Przygotowania</h3>
<p>Wszystko na temat przygotowań
...więcej treści...
<h2>Konfiguracja</h2>
<p>Wszystko na temat konfiguracji
...więcej treści...
</section>
</body>
Struktura wynikowa wygląda następująco:
1. Instalacja i konfiguracja
1.1 Instalacja
1.1.1 Wymagania
1.1.2 Przygotowania
1.2 Konfiguracja
Wewnętrzne liczniki zaczynają się tutaj zawsze od 1. Z koncepcji Outline dotyczą jedynie te elementy:
• article
• aside
• nav
• section
Elementy header i footer pozostają na razie poza tą koncepcją.
Proszę zauważyć, że koncepcja Outline obecnie nie jest jeszcze obsługiwana przez przeglądarki.
Jednakże jest to tylko kwestia czasu, zanim producenci przeglądarek podejmą działania w tej kwestii. Zalety koncepcji Outline są na tyle duże, że warto o tym pamiętać. Należy np. pamiętać o automatycznie generowanych paskach nawigacyjnych. Ale nawet teraz ważne jest, aby logiki strukturyzacji dokumentów, nawet jeśli obecnie jest ona ignorowana przez przeglądarki, aby uzyskać pewne zabezpieczenie przyszłościowe dla swoich stron internetowych.
