Jak już wspomniałem post wcześniej, w3c wydało specyfikację języka HTML 5 (WD). Artykuł poniżej porównuje wersje 4 i 5 języka HTML. Porównanie zostało opracowane na podstawie dokumentu Konsorcjum W3C.
UWAGA: HTML 5 jest wciąż szkicem roboczym specyfikacji!
Kompatybilność wstecz!
Pierwszym dużym plusem języka HTML 5 jest to, że jest zdefiniowany w sposób umożliwiający kompatybilność wstecz.
Składnia:
To co zapewne wszystkich ciekawi najbardziej to możliwości jakie da nam nowy język HTML 5, który posiada składnię kompatybilną z językiem HTML 4 i dokumentami XHTML1 opublikowanymi w Sieci. Dokumenty stosujące wspomnianą składnie muszą być podawane przeglądarce jako text/html.
HTML 5 szczegółowo definiuje reguły parsowania składni (wraz z obsługą błędów), które są bardziej kompatybilne z popularnymi implementacjami. User Agent będzie postępował według tych reguł z zasobami, które posiadają Typ MIME text/html.
Przykład dokumentu podporządkowującego się składni HTML
:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Przykładowy dokument</title> </head> <body> <p>Przykładowy paragraf</p> </body> </html>
XML jest inną składnią jaka może być stosowana dla języka HTML 5. Składnia ta jest kompatybilna z dokumentami XHTML1. Dokumenty stosujące tą składnię powinny być/wymagają podawane przeglądarce wraz z typem MIME XML oraz wymagają umieszczenia w przestrzeni nazw http://www.w3.org/1999/xhtml. Poniżej mamy przykład dokumentu HTML 5 podporządkowującego się składni XML. Zwracamy szczególną uwagę, że dokumenty XML muszą posiadać typ MIME XML, czyli takie jak: application/xhtml+xml lub application/xml.
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Przykładowy dokument</title> </head> <body> <p>Przykładowy paragraf</p> </body> </html>
Kodowanie znaków
W kwestii kodowania mamy ważne trzy główne ustawienia:
- Sposób przesłania. Na przykład; poprzez użycie nagłówka HTTP o zawartości Content-Type.
- Użycie BOM
- Użycie elementów meta z określonym atrybutem charset, który określa kodowanie jako pierwszy potomny elementu head. <meta charset="UTF-8"> może być stosowany do określenia kodowania UTF-8. Ten fragment kodu zastąpił nam: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Element DOCTYPE
Deklaracją DOCTYPE jest <!DOCTYPE html> i jest on niezależny. Wcześniejsze wersje języka HTML zawierały długie elementy DOCTYPE, a to tylko dlatego, że był on oparty na języku SGML i żądał odniesienie do DTD. W HTML 5 DOCTYPE jest nam tylko potrzebny do ustawienia trybu standardów dla dokumentu napisanego za pomocą składni HTML.
Nowe elementy:
Następujące elementy wprowadzono dla polepszenia struktury:
- section - przedstawia ogólny dokument. Może być stosowany wraz z h1-h6, aby określić strukturę dokumentu.
- article - reprezentuje niezależny kawałek zawartości dokumentu, taki jak
wprowadzeniewpis na blogu albo artykuł w gazecie. - aside - reprezentuje kawałek zawartości, która jest marginalnie powiązany z resztą strony.
- header - reprezentuje nagłówek sekcji.
- footer - reprezentuje stopkę sekcji i może zawierać pewne informacje o autorze, prawach autorskich itd.
- nav - reprezentuje sekcję wewnątrz dokumentu służącą do nawigacji.
- dialog - służy do wyróżnienia rozmowy, tak jak poniżej:
<dialog> <dt> Costello <dd> Look, you gotta first baseman? <dt> Abbott <dd> Certainly. <dt> Costello <dd> Who's playing first? <dt> Abbott <dd> That's right. <dt> Costello <dd> When you pay off the first baseman... <dt> Abbott <dd> Every dollar of it. </dialog>
- figure - służy do powiązania podpisu razem z jakąś zagnieżdżoną zawartością, taką jak grafika czy wideo:
<figure> <video src=ogg>…</video> <legend>Przykład</legend> </figure>
Następnie mamy kilka innych nowych elementów:
- audio i video dla multimedialnej zawartości. Obydwa dostarczają API więc autorzy aplikacji mogą wprowadzać swój własny interfejs. Elementy source są używane razem z tymi elementami jeśli jest dostępnych wiele strumieni różnych typów.
- embed - jest stosowany do zagnieżdżania zawartości.
- m - reprezentuje uruchomiony zaznaczony tekst.
- meter - reprezentuje pomiar, taki jak użycie dysku.
- time - reprezentuje datę i czas.
- canvas - jest stosowany do renderowania dynamicznych grafik mapy bitowej w locie, m.in. wykresy, gry itd.
- command - reprezentuje polecenie, na które ma wpływ użytkownik poprzez odwołanie się.
- datagrid - reprezentuje interaktywne przedstawienie listy drzewa lub danych z tabeli.
- details - reprezentuje dodatkowe informacje albo kontrolki, które użytkownik może uzyskać na żądanie.
- datalist - razem z nowym atrybutem list użytego dla input, aby utworzyć pola rozwijane (comboboxes):
<input list=browsers> <datalist id=browsers> <option value="Safari"> <option value="Internet Explorer"> <option value="Opera"> <option value="Firefox"> </datalist>
- Elementy datatemplate, rule i nest dostarczają szablony mechanizmów dla HTML.
- event-source - jest stosowany do "przechwycenia" zdarzenia wysłanego przez serwer.
- output - reprezentuje jakiś typ wyjściowy, taki jak formularz kalkulacji wykonany poprzez skrypt.
- progress - reprezentuje ukończenie zadania, takiego jak pobieranie lub wykonanie serii czasochłonnych operacji.
Atrybut type elementu input posiada teraz następujące nowe wartości:
- datetime
- datetime-local
- date
- month
- week
- time
- number
- range
- url
Ideą nowych typów jest to, że user agent potrafi dostarczyć UI, takie jak okienko kalendarza lub może zintegrować się z książką adresową użytkownika. Daje to użytkownikowi więcej możliwości do wykorzystania.
Nowe atrybuty:
HTML 5 wprowadza kilka nowych atrybutów w różnych elementach, które aktualnie są częścią języka HTML 4:
- Atrybut media w elementach a i area
- Atrybut ping w elementach a i area. Atrybut powinien zawierać listę oddzielonych znakiem spacji identyfikatorów URI, do których ma zostać wysłane powiadomienie, gdy użytkownik kliknie odnośnik. Warto przeczytać...
- Atrybuty hreflang i rel posiada teraz element area.
- Element base posiada teraz atrybut target, natomiast z elementów a i area został on wycofany.
- Atrybut value dla elementu li nie jest już dostępny. To samo dotyczy atrybutu start w elemencie ol.
- Element meta posiada atrybut charset w krótszej i bardziej przyjaznej formie.
- Nowy atrybut autofocus może być określony w elementach input (oprócz momentu gdy atrybut type ma wartość hidden), select, textarea i button.
- Nowy atrybut form dla elementów input, output, select, textarea, button i fieldset pozwalający łączyć kontrolki w więcej, niż na jednym formularzu.
- Elementy input, button i form posiadają nowy atrybut replace.
- Elementy form i select (tak jak element datalist) posiadają atrybut data pozwalający automatycznie wypełnić kontrolki formularza.
- Nowy atrybut required stosowany do elementów input (oprócz momentu, gdy atrybut type ma wartość hidden, image lub jakiś typ przycisku jest jako submit) i textarea. Określa, że użytkownik musi wypełnić wartości formularza.
- Elementy input i textarea posiadają nowy atrybut inputmode, który wyznacza jakiego rodzaju jest oczekiwana zawartość pola wejściowego.
- Atrybut disabled w elemencie fieldset, służący do jego całkowitego wyłączenia, co nie było możliwe w HTML 4.
- Element input posiada kilka nowych atrybutów określonych przymusowo: autocomplete, min, max, pattern i step.
- input i button także posiadają atrybut template, który zastosowano do szablonów powtórzających się.
- Element menu ma trzy nowe atrybuty: type, label i autosubmit. Pozwalają na przerobienie menu tak, jak można znaleźć w typowych interfejsach tak samo jak dostarczanie dla menu kontekstowego połączenia z globalnym atrybutem contextmenu.
- Element style posiada nowy atrybut scoped.
- Element script posiada nowy atrybut async.
- Element html posiada nowy atrybut manifest.
Kilka atrybutów z języka HTML 4, teraz zastosujemy do wszystkich elementów. Są one wywołane globalnie: class, dir, id, lang, tabindex i title. Kilka nowych globalnych atrybutów:
- Atrybut contenteditable określający, że element posiada obszar do edycji. Użytkownik może zmienić zawartość elementu poprzez manipulacje znacznikiem.
- Atrybut contextmenu.
- Atrybut draggable użyty razem z nowym API drag & drop.
- Atrybut irrelevant określający, że element nie jest już stosowany.
Heh, nawet nie zauważyłem kiedy ten post zrobił się, aż tak długi :]. Aby nie zrobiła się
z tego totalny artykuł bez końca - podzielę go na dwie części. W drugiej części
znajdzie się pozostała część opisująca różnice między wersjami HTML 4 i 5.
Przeczytaj również:
- Informację na blogu w3c o powyższej specyfikacji,
- A Preview of HTML 5
- Różnice pomiędzy językami HTML 4 oraz HTML 5 - cz. II - dokończenie powyższego wpisu :)
Oryginalna wersja artykułu