post_ico3

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

Co sądzisz o wpisie?
BeżnadziejnySłabyŚredniDobryBardzo dobry (Brak ocen, bądź pierwszy!)
Loading...
  • Piotr

    hgroup a nie hsgroup

  • thek

    Może to czepialstwo pewne, ale czytając na w3c i różnych stronach o html5, odniosłem wrażenie, że pewne tagi są na tyle ogólne, że przykład podany przez Ciebie może lekko zmylić. Mianowicie znacznik header, w szerokim tego słowa znaczeniu, oznacza zgrupowanie pewnych istotnych dla danego bloku informacji, a nie tylko jest nagłówkiem strony. Można go więc użyć bez problemu do oznaczenia nagłówka sekcji. Podobnie rzecz się ma z footer.

    Do tego można dorzucić nav, który służy nie tylko dla menu, ale ogólnie linków nawigacyjnych i jest proponowany choćby jako kontener dla paginacji. Co do datalist, to na mój rozum, nie ma on zastąpić select (który istnieje w html5), ale jest „listą autouzupełniania” dla konkretnego inputa.

  • thek

    Tak jeszcze zauważyłem, że użyłeś dla figure znacznika legend, choć ma on własny -> figcaption.
    Dialog z kolei wywalono z draftu. Ogólnie warto sprawdzać samemu przeglądać choćby http://www.w3schools.com/html5/default.asp by sprawdzać co się dzieje, jakie zmiany zachodzą i jak wygląda obecnie wsparcie przeglądarek. IE ciągle jest najbardziej problematyczny, ale niektóre tagi nie mają wcale wsparcia ciągle u żadnej wiodącej (przykładem jest tag menu)!

  • Ok, dzięki za uwagi. Na wolniejszym czasie zaktualizuję wpis :)

  • Ciekawe jak jest ze wstawieniem foto.Czy wystaczy np wstawić samo <img src= i powiedzmy nazwę zdjęcia?. A druga rzecz to czy położenie grafiki też jest uproszczone. Jestem tego bardzo ciekawy. Pozdro :-D