16. Nowe znaczniki HTML5

Zwykłe znaczniki HTML4 są powszechnie stosowane, ale mają jedną podstawową wadę - rzadko kiedy niosą informację o tym, co tak naprawdę w nich się znajduje. Przykładowo znacznik div może być używany jako kontener do opublikowanego artykułu, do komentarzy czytelników oraz jako miejsce do powierzchni reklamowych. HTML5 wychodzi na przeciw tej potrzebie i wprowadza znaczniki semantyczne. Oznacza to, że stosując dany znacznik na stronie internetowej, automatycznie możemy dostarczyć informację o tym, co w nim będzie zawarte. Może to być np. fragment głównej nawigacji na stronie, zatem użyjemy znacznika footer.

Przeglądając kod źródłowy wielu stron, można spotkać się z powtarzającym wzorcem. Strona składa się z kilku głównych znaczników div, którym nadano różne klasy. Taki szkielet to z reguły nagłówek, nawigacja, treść właściwa, panel boczny i stopka. Takie analizy przeprowadziła firma Google, która od lat przeszukuje całą Sieć Internet. Boty Google indeksują zawartość stron internetowych na potrzeby słynnej wyszukiwarki. Badania te wykazały wspomniany wcześniej nawyk stosowany w ogromnej ilości witryn. Autorzy specyfikacji HTML5, w tym przedstawiciele Google, ustalili że warto wprowadzić nowe znaczniki i nadać im takie nazwy, jakie są powszechnie używane dotychczas (jako klasy). Przyjrzyjmy się im!

Znacznik header

W HTML4 nagłówek z reguły opisywaliśmy jako:

W HTML5 nagłówek to po prostu header:

Kiedy używać znacznika <header>? Przede wszystkim jako nagłówek całej strony.

Jednakże to nie jedyne zastosowanie tego nowego znacznika. Możemy w nim zawrzeć nie tylko nagłówek H1-H6, ale równie dobrze inną treść, np. szukajkę albo odpowiednie logo. Poniżej przedstawiamy przykład użycia dwóch znaczników <header> na stronie.

Podaliśmy przykład poprawnego użycia znacznika <header>, a teraz spójrzmy na kod, w którym jest on nadużyty.

Pamiętajmy, że nie każdy znacznik H1 należy otaczać znacznikiem <header>. Nie ma sensu tego robić, nie jest to potrzebne, a nawet zalicza się jako nadużywanie znacznika. Zgodnie ze specyfikacją języka HTML5 znacznik <header> składa się z kilku elementów. Jest on grupą, która pełni rolę wprowadzającą i nawigacyjną. Z pewnością pojedynczy znacznik <h1> nie może pasować do tej definicji, więc znacznik <header> w tym wypadku można śmiało ominąć. Należy na to uważać, gdyż nadużywanie znacznika <header> staje się powszechną praktyką, popularyzowaną nawet na stronach Microsoft Polska.

Wspomnieliśmy, że znacznik <header> powinien zawierać informacje, które będą pomocne pod względem wprowadzenia do treści właściwej albo jeśli chodzi o nawigację. Przyjrzyjmy się teraz znacznikowi <nav>.@STRONA@

Znacznik nav

Przypomnijmy stare podejście w HTML4:

W HTML5 napisalibyśmy tak:

Znacznik <nav> należy stosować tam, gdzie będziemy prezentowali odnośniki do innych (pod)stron. Jeżeli chcemy używać nowego znacznika zgodnie z przeznaczeniem, należy pamiętać o ważnej adnotacji, którą zawiera specyfikacja HTML5. Napisano tam, że nie każdy zbiór linków należy otaczać tagiem <nav>. Znacznik <nav> służy do wskazania głównych bloków nawigacyjnych.

Jeżeli na stronie mamy menu z linkami do podstron oraz stopkę strony, w której umieścimy różne linki, to znacznika <nav> nie należy używać w drugim wypadku. Taki scenariusz podano na stronie grupy WHATWG. Zalecono darowanie sobie znacznika <nav>, gdy w stopce umieszczamy linki, np. "Zasady użycia", "Prawa autorskie" itd. A zatem ponownie należy pamiętać, aby nie nadużywać nowego znacznika. Przed jego użyciem warto sobie zadać pytanie, czy linki, do których chcemy go użyć, stanowią główny blok nawigacyjny na stronie.

A skoro o stopce mowa, to pora na znacznik <footer>

Znacznik footer

Ponownie przypomnijmy stare podejście znane z HTML4:

Nowe podejście wykorzystujące HTML5 będzie wyglądało następująco:

Znacznik <footer: jest zdefiniowany bardzo podobnie do znacznika <header>. Można go używać wielokrotnie na jednej stronie: jako stopka witryny i stopka elementów typu <section> i <article> (o tym w dalszej części artykułu). Z reguły będzie on zawierał informację o tym, kto jest autorem tekstu, odnośniki do powiązanych artykułów, informacje o prawach autorskich itd. Nie należy go jednak stosować do wprowadzania kolejnych treści - do tego służy <header>.

Kolejnymi znacznikami, które omówimy są <article> i <section>. @STRONA@

Znacznik article, section i div

Oba służą jako kontenery do wybranych fragmentów strony. Znacznik <article> to specjalny typ sekcji (znacznika <section>). Poza tym mamy jeszcze znacznik <div>, który nie został uśmiercony przez HTML5 i nadal ma zastosowanie jako kontener. Różnice leżą w semantyce elementów:

• <div> to blok zawierający dowolną treść;
• <section> to blok zawierający treść powiązaną ze sobą;
• <article> to niezależny, samodzielny blok zawierający treść powiązaną ze sobą.

Przykładem użycia znacznika <article> jest wpis na blogu, artykuł w Portalu, opublikowany komentarz. W skrócie - wszystko to, co nadaje się od odseparowania od całej reszty strony i rozdystrybuowania. Jeżeli zastanawiamy się, czy dany fragment treści opatrzyć znacznikiem <article>, warto zadać sobie pytania, czy ten fragment nadaje się od odizolowania i zaoferowania czytelnikom np. jako wpis RSS. Jeżeli nie nadaje się, ale nadal zawiera elementy, które są ze sobą powiązane, to należy użyć znacznika <section>. Oto przykład:

Znacznik aside

Panel boczny AKA sidebar to w HTML5 znacznik <aside>. Jeżeli znajduje się on w ciele głównym strony, to musi być jakkolwiek, nawet drugoplanowo, związany z tematyką danej strony. Analogicznie jeżeli znajdzie się wewnątrz <article>, to musi mieć jakieś powiązanie z tym, co się znajduje w otaczającym konterze. W <aside> możemy zawrzeć reklamy kontekstowe, cytaty, linki do serwisów/blogów/książek, które zwykliśmy czytać i je polecamy.

Podsumowanie

Nowych znaczników w HTML5 jest kilkadziesiąt. Najważniejsze z nich zostały omówione i z pewnością już niedługo będzie widzieli nowe podejście w tworzeniu szkieletów stron www. Warto pamiętać, że decydując się na używanie nowych znaczników, nie powinniśmy zapomnieć o użytkownikach starszych wersji przeglądarek. Sęk w tym, że jeżeli przeglądarka nie obsługuje znacznika, to tak jakby stosowała do display:inline. Dlatego warto w CSS-ie na wszelki wypadek dodać następujący kod: