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:
<div id="header">
Treść nagłówka
</div>
W HTML5 nagłówek to po prostu header:
<header>
Treść nagłówka
</header>
Kiedy używać znacznika <header>? Przede wszystkim jako nagłówek całej strony.
<header>
<h1>Kurs HTML5</h1>
<p>Witaj na stronie poświęconej kursowi HTML5.</p>
</header>
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.
<header>
<h1>Kurs HTML5</h1>
<p>Witaj na stronie poświęconej kursowi HTML5.</p>
</header>
<article>
<header>
<h1>Artykuł o geolokalizacji</h1>
<p>Autor: Adam Stępień</p>
</header>
<p>Geolokalizacja to jedna z nowości w HTML5...</p>
</article>
Podaliśmy przykład poprawnego użycia znacznika <header>, a teraz spójrzmy na kod, w którym jest on nadużyty.
<article>
<header>
<h1>Artykuł o geolokalizacji</h1>
</header>
</article>
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:
<div id="nav">
<ul>
<li>Strona główna</li>
<li>Windows XP</li>
<li>Kurs HTML5</li>
</ul>
</div>
W HTML5 napisalibyśmy tak:
<nav>
<ul>
<li>Strona główna</li>
<li>Windows XP</li>
<li>Kurs HTML5</li>
</ul>
</nav>
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:
<div id="footer">
<ul>
<li>Zasady użytkowania witryny</li>
<li>Ochrona prywatności</li>
<li>Kontakt z webmasterem</li>
</ul>
</div>
Nowe podejście wykorzystujące HTML5 będzie wyglądało następująco:
<footer>
<ul>
<li>Zasady użytkowania witryny</li>
<li>Ochrona prywatności</li>
<li>Kontakt z webmasterem</li>
</ul>
</footer>
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:
<article>
<h1>Kurs HTML5</h1>
<p>Przedstawiamy kurs HTML5 dla średniozaawansowanych.</p>
<section>
<h2>Geolokalizacja</h2>
<p>Geolokalizacja daje mnóstwo możliwości twórcom stron HTML5
[...]
</p>
</section>
<section>
<h2>Nowe znaczniki</h2>
<p>W HTML-u piątce wprowadzono kilkadziesiąt nowych znaczników
[...]
</p>
</section>
</article>
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:
article,aside,footer,header,nav,section
{
display:block;
}
