{"id":247,"date":"2015-11-18T08:00:55","date_gmt":"2015-11-18T07:00:55","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=247"},"modified":"2023-01-16T14:54:08","modified_gmt":"2023-01-16T13:54:08","slug":"html5-co-nowego","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/html5-co-nowego\/","title":{"rendered":"Html5, co nowego?"},"content":{"rendered":"\n

OD TEGO TRZEBA ZACZ\u0104\u0106 \u017bE\u2026<\/strong><\/h2>\n\n\n\n

W ostatnich latach du\u017co s\u0142yszy si\u0119 o HTML 5 i o tym jak\u0105 rewolucj\u0119 w tworzeniu dokument\u00f3w\u00a0internetowych za sob\u0105 niesie. Przyjrzyjmy si\u0119 bli\u017cej nowo\u015bciom jakie zosta\u0142y wprowadzone\u00a0do j\u0119zyka wraz z 5 wersj\u0105, jak r\u00f3wnie\u017c czego w niej zabrak\u0142o. Sprawdzimy czy to prawdziwa rewolucja czy tylko ma\u0142e zamieszanie. Zacznijmy jednak od pocz\u0105tku\u2026<\/p>\n\n\n\n

SZCZYPTA HISTORII<\/strong><\/h2>\n\n\n\n

HTML 4, zosta\u0142 zarekomendowany w 1997 roku, przez organizacj\u0119 W3C. Wcze\u015bniej, ten j\u0119zyk znacznik\u00f3w nieustannie ewoluowa\u0142 od kiedy powsta\u0142, na pocz\u0105tku lat 90 XX wieku. HTML 4, nie by\u0142
standardem, w dos\u0142ownym tego s\u0142owa znaczeniu, raczej wytyczn\u0105, kt\u00f3rej tw\u00f3rcy przegl\u0105darek, mniej lub bardziej si\u0119 trzymali. W 2008 Grupa robocza, pod akronimem WHATWG wraz z W3C, rozpocz\u0119\u0142a prac\u0119 nad specyfikacj\u0105 HTML w wersji 5.\u00a0 Wsp\u00f3\u0142praca ta, nie przebiega\u0142a jednak zbyt pomy\u015blnie, co w efekcie doprowadzi\u0142o do roz\u0142amu w 2012 roku(oraz \u201eodp\u0142yni\u0119cia\u201d terminu wydania specyfikacji).\u00a0 Kontynuacj\u0119 prac podj\u0119\u0142o W3C, pracuj\u0105c nad jednolitym standardem. 28 pa\u017adziernika 2014, HTML 5 osi\u0105gn\u0119\u0142o status rekomendacji W3C. Jednocze\u015bnie podj\u0119to prace nad specyfikacj\u0105 HTML 5.1, kt\u00f3ra ma si\u0119 zako\u0144czy\u0107 w 2016 roku.<\/p>\n\n\n\n

DEKLARACJA<\/strong><\/h2>\n\n\n\n

W poprzednich wersjach HTML, konieczne by\u0142o podanie DTD dla wybranego typu dokumentu. Wersja 5 upraszcza znacz\u0105co deklaracj\u0119 typu do prostego znacznika\u00a0<!doctype html><\/strong>\u00a0lub\u00a0<?xml version=\u201d1.0\u2033 encoding=\u201dUTF-8\u2033?><\/strong>\u00a0Dla dokument\u00f3w w formacie XML.<\/p>\n\n\n\n

To wszystko, ju\u017c mo\u017cemy si\u0119 cieszy\u0107 pe\u0142n\u0105 moc\u0105 HTML5 i CSS3 \u2013 no prawie zawsze. Wyj\u0105tkiem s\u0105 tu oczywi\u015bcie starsze, lub nietypowe przegl\u0105darki. Nie musz\u0119 chyba wspomina\u0107 \u017ce najbardziej kapry\u015bna jest, jak zawsze, MS IE.<\/p>\n\n\n\n

Znacznie uproszczono r\u00f3wnie\u017c deklaracj\u0105 kodowania, w wersji 5 aby ustawi\u0107 kodowanie da ca\u0142ej strony, wystarczy znacznik META ze znacznie uproszczon\u0105 definicj\u0105 kodowania \u00a0<meta charset=\u201dUTF-8\u2033><\/strong><\/p>\n\n\n\n

NOWE ELEMENTY<\/strong><\/h2>\n\n\n\n

Nie nazywano by tych zmian, szumnie now\u0105 wersj\u0105, gdyby nie wprowadza\u0142y istotnie nowych element\u00f3w. Jako najwa\u017cniejsze nale\u017ca\u0142oby wymieni\u0107:<\/p>\n\n\n\n

<figure><video><audio><truck><embed><progress><meter><time><template><\/strong> \u2013 Odpowiadaj\u0105ce na potrzeby wsp\u00f3\u0142czesnych, multimedialnych stron www.<\/p>\n\n\n\n

<section><article><header><main><footer><nav><output><\/strong> \u2013 przeznaczone do budowania struktury strony<\/p>\n\n\n\n

<canvas><\/strong> \u2013 do tworzenia dowolnych element\u00f3w graficznych, rysowania bitmap. Przydatne np. do gier lub zagnie\u017cd\u017conego video.<\/p>\n\n\n\n

<svg><\/strong> \u2013 do zagnie\u017cd\u017cania element\u00f3w grafiki wektorowej<\/p>\n\n\n\n

<math><\/strong>\u00a0\u2013 przydatne w publikacjach naukowych, pozwala na wy\u015bwietlenie dowolnie z\u0142o\u017conych wzor\u00f3w matematycznych, przy u\u017cyciu j\u0119zyka znacznik\u00f3w MathML, opartego na xml i r\u00f3wnie\u017c rozwijanego przez W3C. Przyk\u0142ad prostego wzoru:<\/p>\n\n\n

\n<math xmlns="http:\/\/www.w3.org\/1998\/Math\/MathML">\n<mrow>\n<msup><mi>a<\/mi><mn>2<\/mn><\/msup>\n<mo>+<\/mo>\n<msup><mi>b<\/mi><mn>2<\/mn><\/msup>\n<mo>=<\/mo>\n<msup><mi>c<\/mi><mn>2<\/mn><\/msup>\n<\/mrow>\n<\/math>\n<\/pre><\/div>\n\n\n
<datalist><\/strong>\u00a0\u2013 Wraz z nowym argumentem \u201elist\u201d (o tym p\u00f3\u017aniej) elementu input, tworzy pot\u0119\u017cne narz\u0119dzie do wy\u015bwietlania predefiniowanych list element\u00f3w, tworz\u0105c ze zwyk\u0142ego pola tekstowego, p\u00f3\u0142automatyczn\u0105 wyszukiwark\u0119. Prosty przyk\u0142ad kt\u00f3ry stworzy nam combobox wyboru statusu, jednocze\u015bnie zezwalaj\u0105c na wpisanie w\u0142asnej opcji.<\/p>\n\n\n
\n<label for=\u201dstatus\u201d value=\u201dStatus: \u201d>\n \n<input id=\u201dstatus\u201d type="text" list=\u201dstatus\u201d >\n \n<datalist id=\u201ddata\u201d>\n<option value=\u201dACTIVE\u201d>\n<option value=\u201dINACTIVE\u201d>\n<\/datalist>\n<\/pre><\/div>\n\n\n
Zachowanie input\u2019u z list\u0105 mo\u017cna w bardzo szerokim zakresie modelowa\u0107 poprzez argumenty. Zamiast combobox\u2019a, mo\u017cemy wy\u015bwietli\u0107 list\u0119 wielowierszow\u0105, a dzi\u0119ki mo\u017cliwo\u015bciom HTML5 bez problemu uzyskamy te\u017c list\u0119 wielokrotnego wyboru.<\/p>\n\n\n\n
<dialog><\/strong> \u2013 Przydatny znacznik, do wyr\u00f3\u017cniania fragment\u00f3w rozm\u00f3w w tre\u015bci dokumentu.<\/p>\n\n\n\n
<ruby><rt> i <rp><\/strong>\u00a0\u2013 Nikt poza u\u017cytkownikami ruby nie wie do czego to s\u0142u\u017cy ale na pewno s\u0105 bardzo przydatne\u00a0\ud83d\ude09<\/p>\n\n\n\n
\u017beby zachowa\u0107 r\u00f3wnowag\u0119 i upro\u015bci\u0107 zestaw znacznik\u00f3w, kilka przestarza\u0142ych si\u0119 pozbyto z nowej specyfikacji:\u00a0 basefont, big, center, font, strike, tt, frame, frameset, noframes<\/p>\n\n\n\n
NOWE ARGUMENTY<\/strong><\/h2>\n\n\n\n
Wiele element\u00f3w uzyska\u0142o nowe argumenty a kilka mniej wa\u017cnych odes\u0142a\u0142o do lamusa.<\/p>\n\n\n\n
form<\/strong> \u2013 identyfikator formy, do kt\u00f3rej dany element(input,output,textarea,select,button,label) nale\u017cy. Daje nam to mo\u017cliwo\u015b\u0107 definiowania form poza g\u0142\u00f3wn\u0105 struktur\u0105 strony.<\/p>\n\n\n\n
accesskey, class, dir, id, lang, style, tabindex<\/strong> oraz title<\/strong> \u2013 znane z wybranych element\u00f3w w HTML4, s\u0105 teraz argumentami \u201eglobalnymi\u201d, kt\u00f3re mo\u017cna zastosowa\u0107 do ka\u017cdego rodzaju elementu.<\/p>\n\n\n\n
data<\/strong>-*\u00a0Zestaw zdefiniowanych przez web developera atrybut\u00f3w, kt\u00f3e mo\u017cna wykorzysta\u0107 na wiele sposob\u00f3w, np. podaj\u0105c liczbow\u0105 dat\u0119 w argumencie data-time w kom\u00f3rce tabeli zawieraj\u0105cej dat\u0119 w formacie czytelnym dla ludzi, podajemy jednocze\u015bnie warto\u015b\u0107 liczbow\u0105 u\u017cyteczn\u0105 w sortowaniu tabeli. Przyk\u0142ad:<\/p>\n\n\n
\n<table id="datatable">\n \n \n<thead>\n \n \n<tr>\n \n \n<th>Id<\/th>\n \n \n \n \n<th>Date<\/th>\n \n \n <\/tr>\n \n \n <\/thead>\n \n \n \n \n<tbody>\n \n \n<tr>\n \n \n<td>1<\/td>\n \n \n \n \n<td date-time="1444435200">10-10-2015<\/td>\n \n \n <\/tr>\n \n \n \n \n<tr>\n \n \n<td>2<\/td>\n \n \n \n \n<td date-time="1444525600">12-10-2015<\/td>\n \n \n <\/tr>\n \n \n <\/tbody>\n \n \n<\/table>\n<\/pre><\/div>\n\n
\n<script type="text\/javascript">\n \n$('#datatable').DataTable();\n \n<\/script>\n<\/pre><\/div>\n\n\n
W tym przyk\u0142adzie, wykorzystuj\u0119 jQuery Data tables, kt\u00f3ry przerabia automatycznie tabele na bardziej u\u017cyteczne, zapewniaj\u0105c funkcje takie jak sortowanie, filtrowanie, stronicowanie i wiele innych. Data tables wykorzystuj\u0105 te\u017c argument data-search do wyszukiwania kom\u00f3rek.<\/p>\n\n\n\n
h<\/u>idden<\/strong> \u2013 stosuje si\u0119 do ukrywania element\u00f3w.<\/p>\n\n\n\n
s<\/u>pellcheck<\/strong> \u2013 zezwala lub zabrania na sprawdzanie pisowni przez wtyczki przegl\u0105darkowe. Podobnie translate<\/strong> tylko w odniesieniu do t\u0142umaczy, np. w chrome.<\/p>\n\n\n\n
Wiele event\u00f3w \u201eonevent\u201d znanych z 4, lecz nie zawsze jednakowo traktowanych przez implementcje, zosta\u0142o dodane do 5 jako standard. Dodano te\u017c wiele nowych typ\u00f3w event\u00f3w.<\/p>\n\n\n\n
Najwi\u0119ksz\u0105 chyba rewolucj\u0119, przeszed\u0142 element <input>.<\/strong> Dodano wiele nowych argument\u00f3w a dla niekt\u00f3rych, ju\u017c istniej\u0105cych napisano zupe\u0142nie zmienion\u0105 logik\u0119. \u201eautofocus\u201d, wcze\u015bniej dostarczany w wielu frameworkach frontendowych(np. Jsf) jest teraz cz\u0119\u015bci\u0105 specyfikacji HTML5.<\/p>\n\n\n\n
Jednym z ciekawszych argument\u00f3w, jest wspomniany wy\u017cej \u201elist\u201d. W parze z nim lub niezale\u017cnie mo\u017cna u\u017cy\u0107 \u201eplaceholder\u201d ustawiaj\u0105cego warto\u015b\u0107 domy\u015bln\u0105, wy\u015bwietlan\u0105 w pustym polu formularza. Najistotniejsz\u0105 zmian\u0105 s\u0105 jednak nowe typy elementu input<\/p>\n\n\n\n
tel<\/strong> \u2013 do wpisywania numeru telefonu<\/p>\n\n\n\n
search<\/strong> \u2013 u\u017cywany w wyszukiwarkach. Ciekawym bajerem jest kasowanie wyniku i wielokrotne wyniki \u2013 multiselect.<\/p>\n\n\n\n
url<\/strong> \u2013 tego chyba nie trzeba t\u0142umaczy\u0107<\/p>\n\n\n\n
email<\/strong> \u2013 podobnie jak url, u\u017cywane w safari i przegl\u0105darkach mobilnych, dzi\u0119ki czemu tablet lub smartfon wie \u017ceby wy\u015bwietli\u0107 dostosowan\u0105 klawiatur\u0119, zawieraj\u0105c\u0105 @ oraz .com, na pierwszym planie<\/p>\n\n\n\n
date<\/strong> oraz time<\/strong> \u2013 do ustawiania czasu i daty. Po kliknieciu wyswietla si\u0119 kalendarz lub przewijany zegar. To r\u00f3wnie\u017c usprawnienie dla urz\u0105dze\u0144 mobilnych.<\/p>\n\n\n\n
Number<\/strong> \u2013 pozwala na wprowadzanie liczb, przewijanych strza\u0142kami<\/p>\n\n\n\n
range<\/strong> \u2013 podobnie jak number, tylko z u\u017cyciem suwaka<\/p>\n\n\n\n
color<\/strong> \u2013 colorpicker znany z wielu interfejs\u00f3w.<\/p>\n\n\n\n
Nie wszystkie te typy s\u0105 jednakowo interpretowane przez przegl\u0105darki \u2013 mia\u0142 by\u0107 standard a wysz\u0142o jak zawsze \u2013 jednak je\u017celi twoja\u00a0IE<\/s>\u00a0przegl\u0105darka nie obs\u0142uguje kt\u00f3rego\u015b z typ\u00f3w, wy\u015bwietli w tym miejscu element typu \u201etext\u201d<\/p>\n\n\n\n
DIABE\u0141 TKWI W SZCZEG\u00d3\u0141ACH<\/strong><\/h2>\n\n\n\n
Tak i w tym przypadku, kilka drobiazg\u00f3w zosta\u0142o wprowadzonych kt\u00f3re mog\u0105 powodowa\u0107 niekompatybilno\u015b\u0107 ze starsz\u0105 wersj\u0105 HTML. Domykanie znacznik\u00f3w, niegdy\u015b zmora webmaster\u00f3w, teraz mo\u017ce by\u0107 lekko pob\u0142a\u017cana przez przegl\u0105darki i walidatory, o ile og\u00f3lny szkielet strony jest sp\u00f3jny, mo\u017cemy pozwoli\u0107 sobie na ma\u0142e zapominalstwo znacznik\u00f3w ko\u0144cowych. Ale uwaga! Zastrze\u017cona zosta\u0142a tym samym, lista element\u00f3w pustych, tzw. void, kt\u00f3re mog\u0105 by\u0107 zamkni\u0119te w jednym tagu, np. <br\/><brw\/><input type\u201dtext\u201d\/><\/strong> wszystkie pozosta\u0142e powinny by\u0107 zamykane i paradoksalnie, lepiej jest nie zamyka\u0107 wcale, ni\u017c zamkn\u0105\u0107 prze \/> <\/strong>element kt\u00f3ry nie jest voidem. Mo\u017ce to by\u0107 problem przy mieszaniu HTML 5 z frameworkami typu Spring MVC czy JSF.<\/p>\n\n\n\n
Je\u017celi wi\u0119c u\u017cywacie w swoich projektach framework\u00f3w wykorzystuj\u0105cych jedno-tagowe elementy a nie u\u017cywacie nowych funkcjonalno\u015bci HTML5,\u00a0 zapewnijcie \u017ce strona b\u0119dzie w\u0142a\u015bciwie interpretowana, dodaj\u0105c deklaracj\u0119 o zgodno\u015bci z html 4.01<\/p>\n\n\n
\n<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01\/\/EN"        "http:\/\/www.w3.org\/TR\/html4\/strict.dtd">\n<\/pre><\/div>\n\n\n
Zmian wszelakich, przede wszystkim w atrybutach, jest oczywi\u015bcie znacznie wi\u0119cej i nie spos\u00f3b wymieni\u0107 ich wszystkich w tym artykule aby nie wywo\u0142a\u0107 senno\u015bci u czytaj\u0105cych. G\u0142odnych wiedzy zapraszam na stron\u0119 W3C\u00a0http:\/\/www.w3.org\/TR\/html5-diff\/<\/a>\u00a0gdzie wyszczeg\u00f3lniono wszystkie zmiany i kt\u00f3ra by\u0142a mym g\u0142\u00f3wny \u017ar\u00f3d\u0142em i inspiracj\u0105 przy pisaniu tego tekstu.<\/p>\n\n\n
\n            \n
\n    \n
\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n    <\/div>\n    \n
\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n
\n            5\/5 ( vote: 1)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"
OD TEGO TRZEBA ZACZ\u0104\u0106 \u017bE\u2026 W ostatnich latach du\u017co s\u0142yszy si\u0119 o HTML 5 i o tym jak\u0105 rewolucj\u0119 w … Continued<\/a><\/p>\n","protected":false},"author":35,"featured_media":484,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1314],"tags":[113,110,55,111],"class_list":["post-247","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-na-twardo","tag-frontend","tag-html5","tag-nowosci","tag-web-development"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/10\/15_HTML5_v21.jpg","category_names":["Development na twardo"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/247"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=247"}],"version-history":[{"count":4,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/247\/revisions"}],"predecessor-version":[{"id":18314,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/247\/revisions\/18314"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/484"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}