OD TEGO TRZEBA ZACZĄĆ ŻE…
W ostatnich latach dużo słyszy się o HTML 5 i o tym jaką rewolucję w tworzeniu dokumentów internetowych za sobą niesie. Przyjrzyjmy się bliżej nowościom jakie zostały wprowadzone do języka wraz z 5 wersją, jak również czego w niej zabrakło. Sprawdzimy czy to prawdziwa rewolucja czy tylko małe zamieszanie. Zacznijmy jednak od początku…
SZCZYPTA HISTORII
HTML 4, został zarekomendowany w 1997 roku, przez organizację W3C. Wcześniej, ten język znaczników nieustannie ewoluował od kiedy powstał, na początku lat 90 XX wieku. HTML 4, nie był
standardem, w dosłownym tego słowa znaczeniu, raczej wytyczną, której twórcy przeglądarek, mniej lub bardziej się trzymali. W 2008 Grupa robocza, pod akronimem WHATWG wraz z W3C, rozpoczęła pracę nad specyfikacją HTML w wersji 5. Współpraca ta, nie przebiegała jednak zbyt pomyślnie, co w efekcie doprowadziło do rozłamu w 2012 roku(oraz „odpłynięcia” terminu wydania specyfikacji). Kontynuację prac podjęło W3C, pracując nad jednolitym standardem. 28 października 2014, HTML 5 osiągnęło status rekomendacji W3C. Jednocześnie podjęto prace nad specyfikacją HTML 5.1, która ma się zakończyć w 2016 roku.
DEKLARACJA
W poprzednich wersjach HTML, konieczne było podanie DTD dla wybranego typu dokumentu. Wersja 5 upraszcza znacząco deklarację typu do prostego znacznika <!doctype html> lub <?xml version=”1.0″ encoding=”UTF-8″?> Dla dokumentów w formacie XML.
To wszystko, już możemy się cieszyć pełną mocą HTML5 i CSS3 – no prawie zawsze. Wyjątkiem są tu oczywiście starsze, lub nietypowe przeglądarki. Nie muszę chyba wspominać że najbardziej kapryśna jest, jak zawsze, MS IE.
Znacznie uproszczono również deklaracją kodowania, w wersji 5 aby ustawić kodowanie da całej strony, wystarczy znacznik META ze znacznie uproszczoną definicją kodowania <meta charset=”UTF-8″>
NOWE ELEMENTY
Nie nazywano by tych zmian, szumnie nową wersją, gdyby nie wprowadzały istotnie nowych elementów. Jako najważniejsze należałoby wymienić:
<figure><video><audio><truck><embed><progress><meter><time><template> – Odpowiadające na potrzeby współczesnych, multimedialnych stron www.
<section><article><header><main><footer><nav><output> – przeznaczone do budowania struktury strony
<canvas> – do tworzenia dowolnych elementów graficznych, rysowania bitmap. Przydatne np. do gier lub zagnieżdżonego video.
<svg> – do zagnieżdżania elementów grafiki wektorowej
<math> – przydatne w publikacjach naukowych, pozwala na wyświetlenie dowolnie złożonych wzorów matematycznych, przy użyciu języka znaczników MathML, opartego na xml i również rozwijanego przez W3C. Przykład prostego wzoru:
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
<datalist> – Wraz z nowym argumentem „list” (o tym później) elementu input, tworzy potężne narzędzie do wyświetlania predefiniowanych list elementów, tworząc ze zwykłego pola tekstowego, półautomatyczną wyszukiwarkę. Prosty przykład który stworzy nam combobox wyboru statusu, jednocześnie zezwalając na wpisanie własnej opcji.
<label for=”status” value=”Status: ”>
<input id=”status” type="text" list=”status” >
<datalist id=”data”>
<option value=”ACTIVE”>
<option value=”INACTIVE”>
</datalist>
Zachowanie input’u z listą można w bardzo szerokim zakresie modelować poprzez argumenty. Zamiast combobox’a, możemy wyświetlić listę wielowierszową, a dzięki możliwościom HTML5 bez problemu uzyskamy też listę wielokrotnego wyboru.
<dialog> – Przydatny znacznik, do wyróżniania fragmentów rozmów w treści dokumentu.
<ruby><rt> i <rp> – Nikt poza użytkownikami ruby nie wie do czego to służy ale na pewno są bardzo przydatne 😉
Żeby zachować równowagę i uprościć zestaw znaczników, kilka przestarzałych się pozbyto z nowej specyfikacji: basefont, big, center, font, strike, tt, frame, frameset, noframes
NOWE ARGUMENTY
Wiele elementów uzyskało nowe argumenty a kilka mniej ważnych odesłało do lamusa.
form – identyfikator formy, do której dany element(input,output,textarea,select,button,label) należy. Daje nam to możliwość definiowania form poza główną strukturą strony.
accesskey, class, dir, id, lang, style, tabindex oraz title – znane z wybranych elementów w HTML4, są teraz argumentami „globalnymi”, które można zastosować do każdego rodzaju elementu.
data-* Zestaw zdefiniowanych przez web developera atrybutów, któe można wykorzystać na wiele sposobów, np. podając liczbową datę w argumencie data-time w komórce tabeli zawierającej datę w formacie czytelnym dla ludzi, podajemy jednocześnie wartość liczbową użyteczną w sortowaniu tabeli. Przykład:
<table id="datatable">
<thead>
<tr>
<th>Id</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td date-time="1444435200">10-10-2015</td>
</tr>
<tr>
<td>2</td>
<td date-time="1444525600">12-10-2015</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$('#datatable').DataTable();
</script>
W tym przykładzie, wykorzystuję jQuery Data tables, który przerabia automatycznie tabele na bardziej użyteczne, zapewniając funkcje takie jak sortowanie, filtrowanie, stronicowanie i wiele innych. Data tables wykorzystują też argument data-search do wyszukiwania komórek.
hidden – stosuje się do ukrywania elementów.
spellcheck – zezwala lub zabrania na sprawdzanie pisowni przez wtyczki przeglądarkowe. Podobnie translate tylko w odniesieniu do tłumaczy, np. w chrome.
Wiele eventów „onevent” znanych z 4, lecz nie zawsze jednakowo traktowanych przez implementcje, zostało dodane do 5 jako standard. Dodano też wiele nowych typów eventów.
Największą chyba rewolucję, przeszedł element <input>. Dodano wiele nowych argumentów a dla niektórych, już istniejących napisano zupełnie zmienioną logikę. „autofocus”, wcześniej dostarczany w wielu frameworkach frontendowych(np. Jsf) jest teraz częścią specyfikacji HTML5.
Jednym z ciekawszych argumentów, jest wspomniany wyżej „list”. W parze z nim lub niezależnie można użyć „placeholder” ustawiającego wartość domyślną, wyświetlaną w pustym polu formularza. Najistotniejszą zmianą są jednak nowe typy elementu input
tel – do wpisywania numeru telefonu
search – używany w wyszukiwarkach. Ciekawym bajerem jest kasowanie wyniku i wielokrotne wyniki – multiselect.
url – tego chyba nie trzeba tłumaczyć
email – podobnie jak url, używane w safari i przeglądarkach mobilnych, dzięki czemu tablet lub smartfon wie żeby wyświetlić dostosowaną klawiaturę, zawierającą @ oraz .com, na pierwszym planie
date oraz time – do ustawiania czasu i daty. Po kliknieciu wyswietla się kalendarz lub przewijany zegar. To również usprawnienie dla urządzeń mobilnych.
Number – pozwala na wprowadzanie liczb, przewijanych strzałkami
range – podobnie jak number, tylko z użyciem suwaka
color – colorpicker znany z wielu interfejsów.
Nie wszystkie te typy są jednakowo interpretowane przez przeglądarki – miał być standard a wyszło jak zawsze – jednak jeżeli twoja IE przeglądarka nie obsługuje któregoś z typów, wyświetli w tym miejscu element typu „text”
DIABEŁ TKWI W SZCZEGÓŁACH
Tak i w tym przypadku, kilka drobiazgów zostało wprowadzonych które mogą powodować niekompatybilność ze starszą wersją HTML. Domykanie znaczników, niegdyś zmora webmasterów, teraz może być lekko pobłażana przez przeglądarki i walidatory, o ile ogólny szkielet strony jest spójny, możemy pozwolić sobie na małe zapominalstwo znaczników końcowych. Ale uwaga! Zastrzeżona została tym samym, lista elementów pustych, tzw. void, które mogą być zamknięte w jednym tagu, np. <br/><brw/><input type”text”/> wszystkie pozostałe powinny być zamykane i paradoksalnie, lepiej jest nie zamykać wcale, niż zamknąć prze /> element który nie jest voidem. Może to być problem przy mieszaniu HTML 5 z frameworkami typu Spring MVC czy JSF.
Jeżeli więc używacie w swoich projektach frameworków wykorzystujących jedno-tagowe elementy a nie używacie nowych funkcjonalności HTML5, zapewnijcie że strona będzie właściwie interpretowana, dodając deklarację o zgodności z html 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Zmian wszelakich, przede wszystkim w atrybutach, jest oczywiście znacznie więcej i nie sposób wymienić ich wszystkich w tym artykule aby nie wywołać senności u czytających. Głodnych wiedzy zapraszam na stronę W3C http://www.w3.org/TR/html5-diff/ gdzie wyszczególniono wszystkie zmiany i która była mym główny źródłem i inspiracją przy pisaniu tego tekstu.
Zostaw komentarz