Nowe znaczniki HTML5 (1)
HTML5
Język HTML5 wprowadza nie tylko kilka nowych znaczników, ale też pewną kryjącą się za nimi „filozofia”. Najlepiej reprezentuje ją chyba doctype tego standardu:
<!doctype html>
Właśnie tak. Jeśli chcielibyście się domyślać, idei kryjącej się za tym zabiegiem to na pewno nie jednej osobie przyszłoby do głowy: „krótszy i bardziej przejrzysty kod”.
W sieci znajdziecie już dokładne opisy nowych elementów i Google wskażą je Wam bez problemów — ja natomiast chciałbym skupić się na rzeczach nieco mniej oczywistych i udokumentowanych. Nowe znaczniki, choć czytelne semantycznie, powiększają całkowitą liczbę znaczników i stwarzają nowe pytania – jak właściwie ich używać? Rzeczy, o których będę pisał nie są zapisane w standardzie — potraktujcie je jako moje propozycje. Są to rozwiązania wypracowane w praktyce (podczas realizacji niejednej strony w HTML5), którym zarazem towarzyszyła chęć trzymania się wspominanej na początku niepisanej „filozofii”.
div vs section
Nowy element section, zazwyczaj definiowany jest na początku arkusza CSS jako display: block. Jego zachowanie będzie więc tożsame z elementem div. Pytanie brzmi: jak sensownie używać obydwu kontenerów, by w semantyce kodu była to jakaś wartość dodana (poza czterema znakami różnicy ;>)?
Proponuję, by section zachować tylko i wyłącznie do zamykania bloków, które stanowią jakąś zamkniętą całość znaczeniową (w kontekście wyświetlanej zawartości).
div natomiast używać do kontenerów, które nie spełniają funkcji „organizacyjnej” dla samej treści, są natomiast niezbędne ze względu na strukturę kodu i prezentację wizualną. Oto przykład:
<section id="page">
<div id="wrapper">
<header>…</header>
…
<div class="search">…</div>
<section id="content">
<article>
<div class="thumbnail">…</div>
<section id="excerpt">…</section>
</article>
<article>…</article>
<article>…</article>
…
</section>
<section id="sidebar">
<section id="widget">…</section>
<section id="widget">…</section>
…
</section>
</div>
</section>
Czy ten przykład mówi sam za siebie? #wrapper — służy najpewniej do celów wizualnego układania zawartości, lub po prostu wyświetlania jednej z warstw tła. Podobnie podrzędną funkcję spełnia div.thumbnail. Natomiast np. section#widget wydziela blok nie tylko w kodzie, ale też w strukturze treści na stronie itp.
Można przyjąć jeszcze prostsze założenie — używać prawie zawsze div, a section zachować dla semantycznego podkreślania pewnych fragmentów, ale tylko tych, które uznajemy za bardziej istotne. To też dobre podejście.
Tak czy inaczej — jeżeli decydujemy się w ogóle używać znacznika section — postarajmy się przemyśleć intencje i trzymać się jakiegoś systemu.
header i footer
Te elementy wydają się na tyle czytelne, że nie powinny wymagać komentarza. Trzymając się jednak ducha składni HTML — osobiście przyjmuję następujące założenie:
header i footer to nagłówek i stopka, pierwszego w hierarchii kontenera-rodzica — jeżeli używamy nowych elementów, będzie to zazwyczaj: body, section, article, div lub aside. Zauważmy, że nie umieszczamy kodu pomiędzy znacznikami html i head, prawda? Tak samo, logiczne wydaje trzymanie się zasady, by nie umieszczać kodu pomiędzy rodzicem, a rozpoczęciem nagłówka sekcji. Trzymając się tego sposobu myślenia – nie umieszczamy też kodu pomiędzy zamknięciem footer‘a, a zamknięciem całej sekcji. Oto przykład:
<section id="sidenote">
<header>…</header>
<section id="content">…</section>
<footer>…</footer>
</section>
A nie:
<section id="sidenote">
<section>…</section>
<header>…</header>
<section id="content">…</section>
<footer>…</footer>
<section>…</section>
</section>
Ta zasada nie jest nigdzie spisana, ale brzmi logicznie? Widziałem niejedną stronę gdzie była ona jednak „łamana”.
hgroup
Typową strukturę dokumentów HTML już dawno wymusił Google i jego mechanizmy „faworyzowania” niektórych znaczników. Z tego też powodu znacznik h1 jest swego rodzaj „świętą krową”. Pierwotnie, przewidywano używanie go na stronie zazwyczaj raz — dla nazwy/nagłówka strony. Jednak dyktat Google’a sprawił, że zaczęto go używać do podkreślania fragmentów najistotniejszych z punktu widzenia SEO. Rzadko jest to tytuł całej strony — obecnie strony internetowe mają raczej „finezyjne” nazwy własne, a często są wręcz to nieistniejące słowa takie jak choćby… Google. Już w poprzedniej części polecałem więc nieco inne podejście do użycia h1.
W HTML5 pojawił się zupełnie nowy element związany z nagłówkami: hgroup. Służy on do integrowania tytułu z podtytułem, bez zaburzania struktury dokumentu. Jednak nawet hgroup, nie rozwiązuje wszystkich problemów z nagłówkami i nie zwalnia nas od obowiązku zachowywania prawidłowej struktury treści:
<hgroup>
<h1 />
<h2 />
<h3 />
</hgroup>
<h2 />
…
<h3 />
…
<h3 />
…
<h2 />
…
<h3 />
…
h2 to po prostu nagłówek podrozdziału bloku zatytułowanego h1, h3 podrozdział bloku o nagłówku h2… itd. Nagłówki nie służą do definiowania wielkości czcionki!
Podsumowanie
Podsumowując — nowe elementy HTML5 uczynią składnie bardziej przejrzystą semantycznie, tylko wtedy gdy będziemy ich rozsądnie używać. W innym wypadku będzie to jeszcze większy bałagan. Niestety walidator zaakceptuje stronę o takiej składni:
<html><head /><body>
<footer></footer>
<header></header>
<h3></h3>
</body></html/>
Dlatego musimy sami zadbać o sensowną strukturę. W innym wypadku możemy sobie darować nowe elementy — div jest ciągle w standardzie i nasz kod będzie o garść znaków krótszy i czytelniejszy czyli „bardziej html5″ niż ten z bałaganiarsko użytymi nowymi znacznikami.
Save & Upload.