JustPaste.it

Różnice pomiędzy językami HTML 4 oraz HTML 5 cz. I

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 wprowadzenie wpis 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
  • email
  • 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ż:

Oryginalna wersja artykułu