HTML5

Dlaczego powinieneś zainteresować się HTML5?

Gdyby przyjąć, że HTML4 jest developerem Javy, to HTML5 wręcza mu dzbanek kawy i krzesło Aeron. Żartuję oczywiście, ale fakt pozostaje – nowa wersja HTML unowocześnia, standaryzuje i określa zestaw rzeczy, dzięki którym można pisać współczesne strony i aplikacje.

Ostatnia zmiana w HTML4 miała miejsce na przełomie 1999 i 2000 – dziesięć lat temu. W międzyczasie pojawił się XML i jego własna wersja HTML — XHTML — biorąca szturmem leniwych developerów okładając ich niebieską czapką. Mimo dodatkowych ukośników i paru bardzo potrzebnych zasad, nie wprowadzila niczego nowego – sieć dalej funkcjonowała na tych samych znacznikach <a> i <div>.

Nie oznacza to, że w ciągu dekady nie pojawił się żaden nowy pomysł. Web Standards Group za pomocą XHTML i CSS zmusiły internet do przyjęcia nowego modelu pisania stron – zgodnie ze standardami. Twórcy przestali używać tabelek i zaczęli składać rusztowania swoich stron w podobny sposób:

<div id="header">
  <div class="article">
    <div class="header">
      …
    </div>
  </div>
</div>
<div id="sidebar">
  <div id="nav">
    …
  </div>
</div>
<div id="footer">
  …
</div>

W międzyczasie odkryto na nowo JavaScript, a Ajax dołączył do słów nadużywanych przez entrepreneurów Web2.0. Pojawiły się też aplikacje internetowe jak GMail, multimedia rozkwitły dzięki YouTube i przyspieszającym łączom. Dodatkowo, twórcy przeglądarek zaczęli przejmować się standardami – nawet Microsoft postanowił nadgonić przepaść dzielącą Internet Explorera od reszty aplikacji.

To wszystko zrodziło potrzebę odświeżenia HTML – aby odzwieciedlić stan internetu. Dlatego HTML5:

dodaje nowe elementy o ustalonym odgórnie znaczeniu – jak <header>, <article> lub <nav>
pozbywa się przestarzałych elementów – jak <font> czy <frameset>
standaryzuje funkcjonalności de facto – jak <canvas> czy <embed>
standaryzuje parsowanie HTML, skupiając się na jednolitej obsłudze błędów
wprowadza elementy multimedialne i interaktywne – <video> / <audio> oraz mnogie usprawnienia formularzy
wprowadza wiele API dla aplikacji internetowych – jak tryb offline lub natywne drag & drop

Ok, przekonałeś mnie. Co dalej?

Jeśli piszesz strony zgodnie ze standardami, możesz zacząć używać HTML5 w ciągu sekund. Wystarczy że zmienisz pierwszą linijkę swoich stron:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

na:

<!DOCTYPE html>

Tyle wystarczy, ponieważ strona napisana w XHTML 1.0 (albo HTML4) w większości przypadków jest także HTML5.

Nadal jesteś w trybie zgodnym ze standardami (co oznacza, że CSS będzie działał tak samo), możesz dalej używać ukośników z XHTML ^†, wszystko działa identycznie – masz jednak teraz mnóstwo możliwości. Zacznijmy od szkieletu dokumentu.

† – Jak <link rel="stylesheet" />

Prostsze, krótsze źródło.

HTML5 pozwala Ci stracić wiele na wadze. Założmy, że szkielet Twoich stron jak dotąd wyglądał tak:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
  <head>
    <meta http-equiv="Content-Type" content="text/html; UTF-8">
    <title>XHTML 1.0 Strict</title>
    <link rel="stylesheet" href="main.css" type="text/css" />
  </head>
  <body>
    …
  </body>
</html>

Strona HTML5 może wyglądać tak:

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <title>HTML5</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    …
  </body>
</html>

Usunąłem około 50% znaków i wszystko działa tak samo – pozwól, że opiszę:

Krótki doctype nowego HTML-a nadal włącza tryb zgodny ze standardami.¹ Oznacza to, że CSS będzie działał dokładnie tak samo, jak w XHTML 1.0. Również w Internet Explorerze.
Element <html> nie potrzebuje już przestrzeni nazw XML (xmlns=""), podobnie jak deklaracji języka dokumentu zgodnego z XML (xml:lang="") – wystarczy zwykły atrybut mówiący w jakim języku napisano stronę.
Element <meta> deklarujący kodowanie znaków jest znacznie uproszczony – wystarczy jeden atrybut charset. Możesz też pozostać przy długim znaczniku – choć nowy, krótki działa identycznie w każdej przeglądarce.²
Element <link> wskazujący na arusz stylów nie potrzebuje zadeklarowania typu – CSS to zawsze text/css, więc możesz się go pozbyć. Nie musisz.

Nawet Google używa nowego doctype.
Najlepiej używać Unicode (UTF-8), ale wybór jest Twój. Mimo wszystko, zalecane jest aby ten element występował jako pierwszy w <head> – przed <title>, który może zawierać już znaki występujące w danym kodowaniu.

Szerszy zestaw elementów

W HTML5 możesz z powodzeniem stosować prawie wszystkie ^† elementy dostępne w HTML4 (i XHTML 1.0). Ale nie musisz – nowe elementy zostały stworzone aby nadać znaczenie znacznikom takim jak <div id="header">. Twórcy nowego standardu wyszli naprzeciw autorom stron i aplikacji, dodając najczęściej używane sekcje dokumentu:

† - Zrezygnuj tylko ze znaczników prezentacyjnych (font, tt, big…) oraz pełnoekranych ramek (frameset)

section - Fragment dokumentu grupujący treść w sposób tematyczny. Dobrym wskaźnikiem użycia <section> jest zatytułowanie takiego fragmentu.
article - Sekcja z treścią, która jest na tyle niezależna, że zachowuje sens po udostępnieniu w innym miejscu – np w źródle RSS. Artykuł, post na blogu lub forum.
nav - Sekcja grupująca linki nawigacyjne - zarówno wewnątrz jednego dokumentu jak i całego serwisu.
hgroup - element pozwalający na grupowanie nagłówków h1-h6. Dzięki temu możliwe jest użycie h1 dla tytułu sekcji oraz h2 dla podtytułu, bez negatywnego wpływu na outline dokumentu.
header - element grupujący elementy wprowadzające sekcji bądź dokumentu. Może to być nagłówek (h1-h6 albo hgroup), formularz wyszukiwania, linki nawigacyjne, data publikacji artykułu.
footer - stopka sekcji bądź dokumentu.
aside - sekcja przechowująca treść związaną z treścią wokoło tego elementu, lecz możliwą do zaprezentowania także w innym miejscu. Przykładami są definicje encyklopedyczne w artykule albo boczny sidebar w dokumencie (przechowujący linki powiązane z treścią strony albo reklamy).
figure - sekcja przechowująca treść o której wspomina się w artykule, ale która może być zaprezentowana także w innym miejscu. Przykładami są ilustracje, zdjęcia, bloki kodu.

figcaption - tytuł treści w elemencie figure.

Jeśli opis tych elementów za dużo Ci nie mówi, nie przejmuj się – wszystkie znaczniki będą opisywane na Perfection or Vanity wraz z wieloma przykładami.

Nowe elementy w praktyce

Zanim przełączysz się do swojego ulubionego edytora tekstowego, wiedz że nowe elementy HTML nie zadziałają tak po prostu. Masz jednak szansę trochę poczarować. Gdyby cokolwiek okazało się zbyt trudne – pamiętaj, nie musisz używać nowych znaczników aby pisać w HTML5. To opcja.

Safari, Chrome, Firefox, Opera, każda nowa przeglądarka

Po pierwsze, aby CSS trzymał się nowych elementów, musisz dopisać do swojego CSS następujące linijki:

article, aside, canvas, details, figcaption, figure, footer, header, 
hgroup, menu, nav, section, summary {
  display: block;
}

Internet Explorer

Po drugie, aby nowe elementy zadziałały w Internet Explorerze (każda wersja do 8 włącznie), musisz dołączyć mały kawałek JavaScript:

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

Kod JavaScript w środku wykona się tylko dla IE, ale zawsze możesz chcieć przyspieszyć ładowanie strony na normalnych przeglądarkach:

<!--[if lte IE 8]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Ten kod HTML wstaw koniecznie w element <head>.

Firefox 2

Firefox jest bardzo popularną przeglądarką – nowe elementy HTML5 działają świetnie w wersji 3 oraz 3.5+, natomiast mają problem w starszych wersjach.

Dzięki pomysłowi Remy’ego Sharpa, możesz to naprawić:

ustawiając przekierowanie (np.: mod_rewrite) oszukujące Firefoksa aby myślał, że dostaje XHTML
dodając ponownie atrybut xmlns do html

Ad1:

RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{HTTP_USER_AGENT} rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko
RewriteRule .* - [T=application/xhtml+xml]

Ad2:

<html lang="pl" xmlns="http://www.w3.org/1999/xhtml">

Najpewniej nie musisz się przejmować w ogóle tak starym Firefoksem. Ogromna większość użytkowników została przymuszona do zaktualizowania do wersji 3, na chwilę obecną w Polsce jest to około 1.25% ^† wszystkich przeglądarek.

† – Źródło: gemiusRankingPL

To nie jest wcale takie proste

Wiem – ale nie jest też bardzo trudne. Nie musisz używać nowych elementów w każdym projekcie. Możliwe że nowa wersja portalu, który odwiedza 5 milionów gości miesięcznie jeszcze nie jest gotowa być napisana przy pomocy <section>. Ale Twoja strona domowa jak najbardziej.

Wreszcie – HTML5 to nie tylko nowe tagi, to nowe podejście. Możesz nauczyć się jak pisać sekcje oraz semantyczny kod i zamieniać każdy <article> na <div class="article"> – a lepsze rozwiązanie wybrać w odpowiednim momencie.

Polecam jednak HTML5, bo posiada wiele innych udogodnień.

Blokowe linki

Wyobraź sobie news, który po kliknięciu ma kierować do dłuższego artykułu. Cały obszar newsa ma być klikalny, co prowadziło jak dotąd do takiego kodu:

<h2>
  <a href="/news/2010/04/">VALVᴱ potwierdza Steam Mac!</a>
</h2>
<p>
  <a href="/news/2010/04/">Gry takie jak Left 4 Dead, Portal czy Half-Life 2 
  będą dostępne także na Maka od kwietnia.</a>
</p>
<div class="footer">
  <a href="/news/2010/04">Więcej…</a>
</div>

Dwa razy ten sam link, a czasem nawet i więcej. HTML5 pozwala pisać Ci w ten sposób:

<a href="/news/2010/04/">
  <h2>VALVᴱ potwierdza Steam Mac!</h2>
  <p>Gry takie jak Left 4 Dead, Portal czy Half-Life 2 będą dostępne także na Maka od kwietnia.</p>
  <div class="footer">Więcej…</div>
</a>

Ten kawałek HTML przechodzi pomyślnie walidację. Każda przeglądarka podlinkuje zarówno tytuł jak i akapit. ^†

† – Czasami należy zwiększyć klikalny obszar, dodając display: block w CSS.

Międzyplatformowe multimedia

Jak dotąd aby osadzić klip filmowy na stronie, należało użyć tagu <embed> albo <object> – a najlepiej od razu obydwu. Video grało dzięki Flashowi, tak działa cały YouTube. Okazuje się, że nie musi. HTML5 dodaje dwa nowe elementy, <video> i <audio>, które nie włączają wiatraczków w Twoim laptopie.

Download: Apple iTunes “MP4” | Open Format “OGG”

Jeśli używasz nowej przeglądarki, wyżej osadzony trailer był odtwarzany bez pomocy Flasha. Działa też na iPhone. Technika nazywa się Video for Everybody i zapewnia wsparcie dla elementu <video>, zachowując kompatybilność wstecz (QuickTime i Flash dla starszych przeglądarek).

I nie tylko…

Nowa wersja HTML nie poprzestaje na paru dodatkowych znacznikach – dostępne są nowe API pozwalające użyć funkcjonalności dotychczas tylko dostępnych dzięki JavaScript.

Większości API można używać już dziś – nie należy czekać na przewidywaną datę zamknięcia specyfikacji. Przy pomocy narzędzi typu Modernizr jesteś w stanie wykrywać wsparcie natywnych kawałków HTML5 i przyspieszać aplikacje kilkukrotnie.

Powodzenia.