Różnice pomiędzy językami HTML 4 oraz HTML 5
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
metaz określonym atrybutemcharset, który określa kodowanie jako pierwszy potomny elementuhead.<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 jakwprowadzeniewpis 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:
audioivideodla multimedialnej zawartości. Obydwa dostarczają API więc autorzy aplikacji mogą wprowadzać swój własny interfejs. Elementysourcesą 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 atrybutemlistużytego dlainput, 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,ruleinestdostarczają 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:
datetimedatetime-localdatemonthweektimenumberrangeemailurl
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
mediaw elementachaiarea - Atrybut
pingw elementachaiarea. 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
hreflangirelposiada teraz elementarea. - Element
baseposiada teraz atrybuttarget, natomiast z elementówaiareazostał on wycofany. - Atrybut
valuedla elementulinie jest już dostępny. To samo dotyczy atrybutustartw elemencieol. - Element
metaposiada atrybutcharsetw krótszej i bardziej przyjaznej formie. - Nowy atrybut
autofocusmoże być określony w elementachinput(oprócz momentu gdy atrybuttypema wartośćhidden),select,textareaibutton. - Nowy atrybut
formdla elementówinput,output,select,textarea,buttonifieldsetpozwalający łączyć kontrolki w więcej, niż na jednym formularzu. - Elementy
input,buttoniformposiadają nowy atrybutreplace. - Elementy
formiselect(tak jak elementdatalist) posiadają atrybutdatapozwalający automatycznie wypełnić kontrolki formularza. - Nowy atrybut
requiredstosowany do elementówinput(oprócz momentu, gdy atrybuttypema wartośćhidden,imagelub jakiś typ przycisku jest jakosubmit) itextarea. Określa, że użytkownik musi wypełnić wartości formularza. - Elementy
inputitextareaposiadają nowy atrybutinputmode, który wyznacza jakiego rodzaju jest oczekiwana zawartość pola wejściowego. - Atrybut
disabledw elemenciefieldset, służący do jego całkowitego wyłączenia, co nie było możliwe w HTML 4. - Element
inputposiada kilka nowych atrybutów określonych przymusowo:autocomplete,min,max,patternistep. inputibuttontakże posiadają atrybuttemplate, który zastosowano do szablonów powtórzających się.- Element
menuma trzy nowe atrybuty:type,labeliautosubmit. Pozwalają na przerobienie menu tak, jak można znaleźć w typowych interfejsach tak samo jak dostarczanie dla menu kontekstowego połączenia z globalnym atrybutemcontextmenu. - Element
styleposiada nowy atrybutscoped. - Element
scriptposiada nowy atrybutasync. - Element
htmlposiada nowy atrybutmanifest.
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
contenteditableokreślający, że element posiada obszar do edycji. Użytkownik może zmienić zawartość elementu poprzez manipulacje znacznikiem. - Atrybut
contextmenu. - Atrybut
draggableużyty razem z nowym API drag & drop. - Atrybut
irrelevantokreś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
Dobrze, że pracują nad nową wersją HTML-a i że wydali już Working Draft… Ale i tak będziemy musieli zaczekać, aż IE i przeglądarki alternatywne (głównie Firefox, Opera, Safari i Konqueror) będą obsługiwać HTML5 w przyzwoitym stopniu.
Z pół roku temu sprawdzałem na wersjach nightly Firefoksa jak to wygląda. Bardziej zaawansowane layouty się wywalały, nie wiem jak jest teraz, ale podejrzewam, że podobnie. W przypadku Firefoksa przyjdzie nam zaczekać do zapewne do wersji 4.0.
BTW, mam nadzieję, że w Gecko 2.0 w końcu zmienią UserAgent na coś normalnego, tak jak to ma Opera – bez żadnego “Mozilla/5.0″ na początku, bo to już dawno straciło znaczenie.
Dzięki za ciekawy artykuł! Dobrze wiedzieć, co nas czeka w przyszłości. A zdaje się, że zmiany zmierzają ku lepszemu, chociażby krótki (żeby nie powiedzieć: “wreszcie ludzki” doctype) i większe możliwości formularzy bardzo mi się podobają.
[...] draft is out! (Ptak translated it for Polish readers.) – it’s a very important moment. We can see that the web is progressing. [...]
[...] draft is out! (Ptak translated it for Polish readers.) – it’s a very important moment. We can see that the web is progressing. And [...]
Otrzymałem wyniki:
>
Jeśli ze zgromadzonej kwoty, nadal na tej samej 1% lokacie, będziesz pobierać emeryturę wyniesie ona miesięcznie około 495.89 zł.
Dla porównania średnia emerytura w I półroczu 2006 (dane wg GUS) wynosiła 1242,16 zł.
W przypadku Twojej śmierci rodzina może odziedziczyć zgromadzone przez Ciebie środki. W ZUSie NIE MA tej możliwości!
Na dokładkę wystarczy dodać, że wg danych ZUS (stan grudzień 2005 r.) 47% mężczyzn umiera przed osiągnięciem wieku emerytalnego!
Czy już rozumiecie ogrom wyzysku? Gdzie są nasze pieniądze?!
>
No i muszę powiedzieć, iż uprawiacie mocną propagandę. Mój ‘niski’ wynik oszczędzania na lokacie wynika z tego, że uczciwie wpisałem wysokość oprocentowania jako ‘tylko’ 1%. A to dlatego, że ISTNIEJE inflacja, a ponadto zyski z lokat są przecież OPODATKOWANE.
Wyszło więc, że moja emerytura z lokaty byłaby prawie 3x niższa niż ta, którą dostanę z ZUS.
Druga kwestia:
W przypadku śmierci przed wiekiem emerytalnym (47% mężczyzn) środki z OFE będą dziedziczone. Środki z ZUS – nie pamiętam, być może też. Tak czy inaczej, wchodząc w wiek emerytalny przekształca się odłożony kapitał na POLISĘ UBEZPIECZENIOWĄ. Żadna polisa nie jest wypłacana w postaci spadku. No chyba, że ubezpieczyłbym własną śmierć. Ale emerytura to inny rodzaj ubezpieczenia.
Podajcie więc proszę prawdziwe dane, a nie propagandowe (zmanipulowane), bo tak wpisujecie się po prostu jako kolejny uczestnik w łańcuchu dezinformacji i propagandy. Nic więcej…
Pozdrawiam
[...] początek: jest to dalsza część wczorajszego opisywania różnic pomiędzy językami HTML 4 oraz HTML [...]
noi kij w plery tym W3C. Kurde, HTML 4 byl lepszy bo lekko łatwiejszy, nie było już z nim kłopotów, a teraz dodadzą HTML 5 i będzie tony kłopotów
Ciekawie napisany art. Dobrze że w3c tworzy standaryzację w projektowaniu kodu HTML, a nie tak jak teraz jest jeden wielki “shit” w internecie.
Dzięki za tego arta, w necie jest takich niewiele.
ŚŚŚŚŚ