HTML 5 w praktyce. Pokazujemy przykłady zastosowań nowych elementów

Od opublikowania pierwszych efektów pracy nad językiem HTML 5 minęło już sporo czasu. Specyfikacja zdążyła nieco okrzepnąć, a producenci przeglądarek rozpoczęli prace nad jej wdrożeniem. To dobry moment, by podsumować to, co czeka nas już niebawem w tworzeniu witryn internetowych za sprawą HTML 5.

Nowości wprowadzone do specyfikacji języka można z grubsza podzielić na następujące kategorie:

semantyczny tekst,
lepsze formularze,
interaktywność,
multimedia.

Wymienione kategorie nie wyczerpują wszystkich nowinek, które pojawiły się w HTML 5, jednak wskazują ogólny kierunek zmian. Przyjrzyjmy się teraz najważniejszym usprawnieniom, które wprowadzono do aktualnej specyfikacji języka HTML.

Tekst to nie tylko tytuł i akapit

Ten kierunek rozwoju nie jest niczym dziwnym w dobie zainteresowania semantycznym Internetem. Dla użytkownika czytającego artykuł opublikowany w Sieci odróżnienie właściwej treści od wielu pobocznych informacji (nagłówki, menu, linki, stopka, prawa autorskie) nie stanowi zazwyczaj żadnego problemu.

Nie można tego powiedzieć o robotach indeksujących. Całkiem naturalne jest więc rozdzielenie w kodzie różnych rodzajów treści oraz typów danych. Z jednej strony ułatwi to tworzenie dokumentów zrozumiałych dla wyszukiwarek, a z drugiej – co równie ważne – uprości formatowanie z użyciem arkuszy CSS.

Strona internetowa napisana z użyciem HTML 5 nie musi składać się jedynie z zagnieżdżonych nagłówków (<h1>, <h2>, itd.) oraz tekstu uporządkowanego w akapity. Poprawny kod może natomiast wyglądać na przykład tak:

<!doctype html>
<html>
<head><meta charset="UTF-8"><title>Blog o HTML 5</title></head>
<body>
<header><h1>Blog o HTML 5</h1></header>
<article>
<h2>Jakiś post o HTML</h2>
<p>Tutaj wpisać treść posta.</p>
</article>
<nav>
<h2>Archiwum</h2>
<ul>
<li><a href="#">Rok 2010</a></li>
<li><a href="#">Rok 2009</a></li>
</ul>
</nav>
<footer><p>Copyright 2011</p></footer>
</body></html>

Rysunek 1. Tak może wyglądać przykładowy dokument HTML 5. Kod źródłowy pochodzi stąd, wizualizację przygotowano z użyciem Semantic Checker.

Zaprezentowany przykład czytelnie rozdziela tekst znajdujący się na stronie na:

nagłówek (<header>),
narzędzia nawigacyjne (<nav>),
właściwy artykuł (<article>),
stopkę (<footer>).

Możliwe jest także wprowadzenie innych elementów:

zdjęć i rysunków uzupełniających treść (<figure>),
fragmentów tekstu stanowiących spójną całość (<section>),
dodatkowych treści, kolumn z odnośnikami (<aside>),
systemów menu (<menu>).

Wymienione znaczniki jasno określają funkcję każdego tekstu umieszczonego w dokumencie. Ułatwiają też formatowanie za pomocą arkuszy CSS.

Specyfikacja HTML 5 pozwala dodatkowo na wyszczególnienie daty oraz czasu (<time>), a także ułamków (<meter>) i wskaźników postępu (<progress>). Czas pokaże, które z tych znaczników okażą się rzeczywiście przydatne.

Analizując przykładowy dokument, warto zwrócić uwagę na uproszczoną deklarację typu. HTML 5 stał się samodzielnym językiem znaczników, w odróżnieniu od poprzedników opartych na SGML i XML (HTML 4.01 oraz XHTML). Określenie strony kodowej jest równie proste.

«poprzednia 1 2 3 4 ... 5 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

3 skomentuj »

Komentarze

#1 Jacek Smolak^® 2011-02-14 10:28:57 1
Wiem, że jest to bardzo krótki opis HTML5, ale chciałbym dodać dwie rzeczy od siebie:

1) nie do końca dla menu, zależy jakiego, jest jeszcze , kiedy jaki użyć:

- http://stackoverflow.com/questions/4969801/nav-or-menu-html5 oraz

- http://html5doctor.com/nav-element/

Generalnie, do aplikacji, do nawigacji.

2) A także pewna ciekawostka odnośnie nagłówków. Wg draftu W3C oba są równorzędne:
```
Let's call it a draw(ing surface)

Diving in

Simple shapes

Canvas coordinates

Canvas coordinates diagram

Paths
```
oraz
```
 Let's call it a draw(ing surface)

 

  Diving in

 

 

  Simple shapes

 

 

  Canvas coordinates

  

   Canvas coordinates diagram

  

 

 

  Paths

 
```
Dzięki temu można stosować h1 -> h6 w wielu miejscach, nadając im w tych miejscach 'ważność' z dokładniejszą skalą.

Pozdrawiam!

P.S: Zastosowałem 'code' (oczywiście z nawiasami kwadratowymi) do wyświetlenia kodu HTML ale ... jak widać coś źle formatuje, to tak odnośnie małego buga. Stąd też dla zainteresowanych - kod w wersji 'czytelnej' znajduje się w drafcie W3C. Nie działało też 'list'.
IP: 81.161.201.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13
#2 murwazy 2011-02-14 10:49:29 0
fajny, teoretyczny artykul.

praktyka wyglada tak: w sobote mialem potrzebe uzycia atrybutu placeholder dla pol tekstowych, opera poradzila sobie z obsluga atrybutu dla inputa ale nie dla texarea, firefox 3.6.13 nie poradzil sobie wcale, ie8 takze nie daje rady.

z reszta ficzerow html5 (np mega uzyteczne nowe typy pol formularzy) jest podobnie - opera cos lapie reczta nie bardzo.

i znowu jquery uratowalo mi du**
IP: 89.79.175.[...] Opera/9.80 (Windows NT 6.1; U; pl) Presto/2.7.62 Version/11.01
#3 Jacek Smolak^® 2011-02-14 10:57:49 0
@murwazy: Na ten moment te nowości wykorzystałbym tylko w aplikacjach, gdzie wiesz, że będzie jedna i ta sama przeglądarka u użytkownika końcowego, inaczej będziesz musiał stosować wspomniane jQuery.

Od siebie jeszcze dodam jeden link: http://www.quackit.com/html_5/tags/ - świetnie wytłumaczone użycie tagów, z opisem, zastosowaniami i, jeżeli przeglądarka obsługuje, przykładami.

Podawałem go już kiedyś w innych komentarzach do artykułów odnośnie HTML5, ale dlaczego go nie przypomnieć :)
IP: 81.161.201.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.