HTML5 – rewolucja czy ewolucja? cz. 1
Od kilku lat trwają intensywne prace nad nową wersją HTML. Najnowsze przeglądarki już teraz pozwalają wykorzystywać niektóre możliwości HTML5. Mimo że nowy standard jest dopiero w fazie opracowywania sądzę, że warto zapoznać się z nowościami.
Usprawnienia
Nowa wersja HTML upraszcza użycie niektórych znaczników. Poniżej prezentuję kilka z nich.
Na początku każdego dokumentu HTML4 wstawiamy DOCTYPE w stylu:
"http://www.w3.org/TR/html4/loose.dtd">
Długie i trudne do zapamiętania, prawda? W dokumencie w wersji 5 wystarczy tylko:
Podobnie sprawa ma się z ustawieniem kodowania strony. W HTML4 piszemy:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Natomiast od wersji 5 znacznik będzie wyglądać następująco:
<meta charset="UTF-8" />
Obecnie gdy chcemy dołączyć plik CSS piszemy:
<link href="style.css" rel="stylesheet" type="text/css" />
W nowej wersji nie musimy już dodawać atrybutu type:
<link href="style.css" rel="stylesheet" />
Podobne usprawnienie występuje przy dołączaniu plików JavaScript:
<script type="text/javascript" src="file.js"></script>//HTML4 <script type="text/javascript" src="file.js"></script>//HTML5
Może są to tylko kosmetyczne zmiany, ale z pewnością ułatwią życie każdemu twórcy stron www.
Warstwa semantyczna
HTML w wersji 5 dostarcza grupę nowych znaczników, które pozwolą usystematyzować treść dokumentu. Jest to niewątpliwie duży krok w kierunku stworzenia semantycznej sieci. Umożliwi to lepsze indeksowanie stron przez roboty wyszukiwarek, a więc wyniki wyszukiwań staną się trafniejsze.
Lista nowych znaczników:
- <header> – kontener na informacje wprowadzające (np. tytuł, logo, wyszukiwarka, nawigacja)
- <footer> – kontener na informacje o kontenerze nadrzędnym (np. autor, prawa autorskie)
- <nav> – zawiera linki nawigacyjne (menu)
- <section> – grupuje tematycznie powiązaną zawartość
- <article> – zawiera główną treść przeznaczoną do syndykacji (np. przez kanał RSS). Treścią mogą być na przykład: artykuły, posty na blogu lub forum
- <aside> – kontener na mniej znaczące treści (np. panel boczny – ang. sidebar). Przykładem mogą być reklamy, widgety
- <dialog> – służy do wyróżnienia rozmowy:
</pre> <dialog> <dt>Hej, co tam?</dt><dd>Hej, a piszę artykuł na bloga. A u ciebie co tam?</dd><dt>Aa czytam sobie</dt><dd>A to super :]</dd> </dialog> <pre>
- <figure> – służy do powiązania podpisu z obiektem:
</pre> <figure><img alt="" src="obrazek.jpg" /> <legend>podpis</legend></figure> <pre>
- <hgroup> – kontener dla kilku nagłówków, np dla tytułu i podtytułu
Znacznik <section> służy do ogólnego grupowania treści, <article> zawiera już ściśle określone elementy, które są główną zawartością strony. Natomiast <header>, <footer>, <aside>, <nav> są kontenerami dla specyficznych treści, takich jak wprowadzenie, nawigacja, stopka.
Warto mieć na uwadze to, że nowe znaczniki semantyczne nie formatują wyglądu – do tego służy CSS.
Tak może wyglądać przykładowy wpis na blogu w HTML5:
</pre>
<header>
<h1><a href="#">Jakiś tam blog :)</a></h1>
<nav>
<ul>
<li><a href="#">Kategoria 1</a></li>
<li><a href="#">Kategoria 2</a></li>
</ul>
</nav>
</header><section>
<h1><a href="#">HTML5 - rewolucja czy ewolucja?</a></h1>
<article>
HTML5 ułatwi życie twórcom stron, zgadzacie się?
<figure>
<img alt="" src="ilustracja.jpg" />
<legend>Fajny obrazek</legend>
</figure>
</article>
<dialog>
<dt>zgadzam się!</dt><dd>A ja nie</dd>
</dialog>
<nav><a>poprzedni wpis</a> <a>następny wpis</a></nav>
</section><footer>
Copyright all resrved.
</footer>
<pre>
Powyżej omówiłem znaczniki służące jako kontenery. HTML5 wprowadza również kilka innych znaczników, np:
- <marks> – podświetlenie, np. wyszukiwanej frazy w tekście
- <time> – oznaczenie czasu:
<time datetime="2010-09-01">1 września 2010</time>
- <meter> – wartość numeryczna:
<meter value="55" min="0" max="100">55</meter>
- <progress> – pasek postępu:
<progress value="55%" max="100">55%</progress>
HTML w wersji 5 wprowadza wiele nowych znaczników. W tym wpisie przedstawiłem tylko te, które wydają się najbardziej istotne. Pełna lista z opisem znajduje się na tej stronie.
Web Forms 2.0
Liczne zmiany nastąpią w tworzeniu formularzy. Wiele rzeczy (np. walidacja danych), które były robione za pomocą JavaScriptu, teraz będzie można zrobić bezpośrednio w HTML. Ponadto HTML5 udostępnia wiele nowych typów pól. W końcu tworzenie formularzy stanie się łatwiejsze i przyjemniejsze – do tej pory były prawdziwym utrapieniem.
Autofocus
Gdy chcemy ustawić wskaźnik na konkretnym polu formularza nie musimy już używać JavaScriptu – wystarczy atrybut autofocus:
<input type="text" autofocus="autofocus" name="field" />
Walidacja danych
Jest to zupełna nowość w HTML. Do tej pory walidację pól formularzy musieliśmy wykonywać za pomocą PHP lub JS – teraz wystarczy sam HTML.
Dodając atrybut required wymagamy wypełnienie danego pola (w przeciwnym wypadku nie będzie reakcji po kliknięciu na przycisk):
<input type="text" name="field" required="required" />
Istnieje także nowy typ pola number, który wymaga wpisania liczby w określonym zakresie:
<input type="number" max="99" min="0" name="number" required="required" />
Dodano również dwa typy pól do wpisywania adresów stron oraz adresów e-mail. W końcu nie trzeba będzie tworzyć do tego wyrażeń regularnych…
<input type="url" name="url" /> <input type="email" name="email" />
Dodatkowo istnieje możliwość stworzenia własnego wyrażenia regularnego. W tym celu dodajemy atrybut pattern:
<input type="text" name="phone" pattern="\(\d\d\d\)-\d\d-\d" />title="Should match: (000)-00-0" type="text" />
Data i czas
Web Forms 2.0 wprowadza także nowe typy pól dla daty i czasu. Nie trzeba będzie już pisać kalendarzy za pomocą JS.
<input type="date" name="date" />
Powoduje wyświetlenie kalendarza do wybrania daty.
<input type="datetime-local" name="datetime" />
Wyświetla kalendarz oraz pole do wpisania czasu w formacie hh:mm.
<input type="datetime" name="datetime" />
Działa tak samo, tylko że strefą czasową jest UTC.
<input type="time" name="time" />
Pole do wpisania czasu w formacie hh:mm.
<input type="week" value="2010-W42" />
Służy do wybrania całego tygodnia.
Suwak
Suwaki są bardzo dobrze znane programistom piszącym w C++ czy JAVA. Niestety w świecie technologi www pojawią się dopiero wraz z HTML5:
</pre> <form><input type="range" name="range" /> Value: <output></output></form> <pre>
Kalkulator
Nowa wersja HTML umożliwia również wykonanie obliczeń matematycznych:
</pre> <form>(a)<input type="number" name="a" step="any" value="0" /> * (b)<input type="number" name="b" step="any" value="0" /> a+b = <output name="c">0</output> (c) c * 2 = <output name="d">0</output> (d) d - a = <output name="result">0</output></form> <pre>
Więcej przykładów na tej stronie.
Listy rozwijane – datalist
W nowej wersji listy rozwijane nie będziemy tworzyć za pomocą <select>, tylko używając nowego znacznika <datalist>:
<input type="text" list="browsers" /> <datalist id="browsers"> <option value="Safari">Safari</option><option value="Internet Explorer">Internet Explorer</option><option value="Opera">Opera</option><option value="Firefox">Firefox</option> </datalist>
HTML5 wprowadza wręcz rewolucję w tworzeniu formularzy. Ułatwi to z pewnością pracę i pozwoli stworzyć bardziej interakcyjne strony www. A jak to wygląda w praktyce można zobaczyć tu.
Zakończenie
HTML5 wprowadza wiele nowości. W tej części zaprezentowałem elementy dotyczące semantycznej warstwy oraz tworzenia formularzy. W Kolejnej omówię aspekty multimedialne.
Powiązane tematy
