Zamknij komunikat

Nowy Office 2013
Do góry Skomentuj

16. Nowe znaczniki HTML5

16. Nowe znaczniki HTML5

Adam Stępień
30 września 2011
37 915
Odsłony
Adam Stępień
30 września 2011
37 915
Odsłony

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>.

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>.

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;
}

Zobacz również

Komentarze

HTML 5 niesie ze sobą pewne dobre rozwiązania, np. wprowadzenie bloku . Lecz wprowadzanie semantycznych znaczników to tylko lukier syntaktyczny! Owszem, kiedyś stosowało się znacznik
do wielu rzeczy, i w tym leżała jego potęga. Twórca stron miał duże pole do popisu, a obecnie wszystko idzie w stronę ograniczenia myśli twórcy strony poprzez tworzenie predefiniowanych znaczników, które róznią się z nazwy!
Justynianus, 2 października 2011, 22:20

Dodaj swój komentarz

Zasady publikacji komentarzyZasady publikacji komentarzy

Redakcja CentrumXP.pl nie odpowiada za treść komentarzy publikowanych na stronach Portalu
i zastrzega sobie prawo do usuwania wypowiedzi, które:

  • zawierają słowa wulgarne, obraźliwe, prowokujące i inne naruszające dobre obyczaje;
  • są jedynie próbami reklamowania stron internetowych (spamowanie poprzez umieszczanie linków);
  • przyczyniają się do złamania prawa bądź warunków licencyjnych oprogramowania (cracki, seriale, torrenty itp.);
  • zawierają dane osobowe, teleadresowe, adresy mailowe lub numery GG;
  • merytorycznie nie wnoszą nic do dyskusji lub nie mają związku z tematem komentowanego newsa, artykułu bądź pliku.