Zamknij komunikat

Nowy Office 2013
Do góry Skomentuj

16. Nowe znaczniki HTML5

16. Nowe znaczniki HTML5

Autor: Adam Stępień Opublikowano: 30 września 2011 Odsłon: 37 111

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.