HTML5 is a new version of HTML that aims to improve the semantic structure and functionality of web pages. It introduces new elements like <header>, <nav>, <article>, and <footer> to better define page sections. While browser support is still evolving, many modern browsers support key HTML5 features. The HTML5 specification is developed by the World Wide Web Consortium to advance web standards.
10. W3WHO?
• The World Wide Web Consortium
• International standards organisation for the World Wide Web
11. W3WHO?
• The World Wide Web Consortium
• International standards organisation for the World Wide Web
• HTML, XML, CSS, XQUERY
12. W3WHO?
• The World Wide Web Consortium
• International standards organisation for the World Wide Web
• HTML, XML, CSS, XQUERY
• They don’t dictate what the browsers build
14. HISTORY
• 1998 - WC3 stopped work on HTML spec. XHTML was
the future.
15. HISTORY
• 1998 - WC3 stopped work on HTML spec. XHTML was
the future.
• XHTML 2.0 required a new MIME Type, XML syntax and
XML parsing errors (Far from user friendly)
16. HISTORY
• 1998 - WC3 stopped work on HTML spec. XHTML was
the future.
• XHTML 2.0 required a new MIME Type, XML syntax and
XML parsing errors (Far from user friendly)
• 2004
- Not everybody thought this was the way to go,
WHATWG formed (Opera, Apple, Google & Mozilla)
17. HISTORY
• 1998 - WC3 stopped work on HTML spec. XHTML was
the future.
• XHTML 2.0 required a new MIME Type, XML syntax and
XML parsing errors (Far from user friendly)
• 2004
- Not everybody thought this was the way to go,
WHATWG formed (Opera, Apple, Google & Mozilla)
• Web Forms 2.0 & Web Applications 1.0 Spec
18. HISTORY
• 1998 - WC3 stopped work on HTML spec. XHTML was
the future.
• XHTML 2.0 required a new MIME Type, XML syntax and
XML parsing errors (Far from user friendly)
• 2004
- Not everybody thought this was the way to go,
WHATWG formed (Opera, Apple, Google & Mozilla)
• Web Forms 2.0 & Web Applications 1.0 Spec
• 2006 - W3C used WHATWG specs as a basis for HTML5
21. HTML5 MYTHS
•I Can’t Use HTML5 Until 2022.
• This browser supports HTML5, but that one doesn't.
22. HTML5 MYTHS
•I Can’t Use HTML5 Until 2022.
• This browser supports HTML5, but that one doesn't.
• HTML5 will kill Flash.
23. HTML5 IS NOT
HTML5 is often used to refer to a set of other new web
technologies, including..
24. HTML5 IS NOT
HTML5 is often used to refer to a set of other new web
technologies, including..
• CSS3 (animations, gradients and rounded corners)
Go
25. HTML5 IS NOT
HTML5 is often used to refer to a set of other new web
technologies, including..
• CSS3 (animations, gradients and rounded corners)
• Web fonts
Go
Comic sans was
just the start
26. HTML5 IS NOT
HTML5 is often used to refer to a set of other new web
technologies, including..
• CSS3 (animations, gradients and rounded corners)
• Web fonts
• Geolocation
Go
Comic sans was
just the start
27. HTML5 IS NOT
HTML5 is often used to refer to a set of other new web
technologies, including..
• CSS3 (animations, gradients and rounded corners)
• Web fonts
• Geolocation
Go
• SVG
Comic sans was
just the start
28. HTML5 IS NOT
HTML5 is often used to refer to a set of other new web
technologies, including..
• CSS3 (animations, gradients and rounded corners)
• Web fonts
• Geolocation
Go
• SVG
• Desktop notifications Comic sans was
just the start
29. HTML5 IS
• New semantic elements • Canvas
• Browser form validation • Editable content
• Offline • Drag & Drop
• History API • Undo API
• Audio/Video • X-Domain messaging
30. WHAT CAN HTML5 DO?
• Provide a better user experience on the desktop and mobile
• Help improve accessibility
• Help improve SEO
• Reduce the gap between web applications and native
• It won’t do it for you
32. PAVING THE COW PATHS
• Let the masses tell you where to build
33. PAVING THE COW PATHS
• Let the masses tell you where to build
• It’s a lot more forgiving than XHTML
34. PAVING THE COW PATHS
• Let the masses tell you where to build
• It’s a lot more forgiving than XHTML
<img src="nice.jpg" />
<img src="nice.jpg">
<img src="nice.jpg">
<img src=nice.jpg>
<IMG SRC=nice.jpg>
<iMg SrC=nice.jpg>
35. NEW DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML 4</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
41. NEW ELEMENTS
document.createElement('header');
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
There is a non JS fix,
but it’s a lot more
complicated
45. BROWSER SUPPORT
• Feature detection not browser sniffing.
• IE9 will actually support a lot of this.
• WebKit - Open Source browser engine
46. BROWSER SUPPORT
• Feature detection not browser sniffing.
• IE9 will actually support a lot of this.
• WebKit - Open Source browser engine
• Mobile is mostly WebKit based, great support for HTML5
WebKit WebKit WebKit WebKit WebKit
47. ev k e 65
Mo en 42=' rop1 1='p Var _a
d9 "><a
mg
cl 46
85
de ts 10 8= ub s= 01 as _T
ra =' 00 'T s' 'p 07 ta s= 2"
ti ev 2' ;s ro 54 rg
on en 0661 ;s .e p1 85 et "m
in >
</ t2 32 .p Va 5, _1 =" im
'; p _b
ad
dr
a>
</ we 4400 rop1 r3=' rop 96
54 la ap
ic
es h2 bl 00 9= re 16 68 nk on
MICRODATA
> in 'R ad ,p 5_ "
s"
>< kC 10'; G in ro T2 hr _1
"
st li
ck s. 18'; g'; p17 "
cl
ef
='
Br ro <
ng p cl Tr link s.p s.e ,pr as h
id >R ac Tr ro Va op s= ttp:
Di g
ni e. R ea ass= ki
ng ackE p21= r12= 8,p
1 "w
eb //ww
ng di "a (t ro
. ef
ur <p
ng
</ ddre hi vent '1.1 'kwd p1 si
te w.sp
Re s, s ' '; 9, "
al bish cl st
ro ss"> 'o ='ev ;s.p s.p pro ti i
Al e as ng ') p tl
</ es d Wi s=" >, <spa ;" ent2 rop4 rop1 21,
di , Fi th fr n ' 1= 5 p
v> ne An ee Be
rk cl na
me ; '1 ='90 rop4
T a 00
<d Wi As ext sh
ir ss="
="
om 10 1075 1,p
ne i e ni 01
iv s. an F clea RG addr tu 29 485'
cl rf 1 re 66
<u as
s=
Fu
nc
ee
l. ix 8B ess" ID 34
56
l "a ti Tr "> B< >2 2_
On /s ad
cl
as dver
on
s. adit Th pa 13, 90
</ <l s= t- </ io e n> Ca 10
id </ 75
=" ul
>
i>
Te
"t
el cta"
p> na
lP
<s
tr sp vers 48
ri om l: -s ub on an ha
gh
tw
ni
tu <u <s in > Fa g>Re
><
/p m Ro
on ar re l tr gl yr > ad
,e
cl
ic ds ID cl
as on e"> e. ad
i ,
ve k= " 2_ s= g> Lu ng</ <s
'0 nt "s ad <l "o 01 nc pa
0 s' .l 90 i> th 18 h st n
;s 842' ;s. ink 10 <a e 9 &a rong
75 75
s.
.p
ro ;s eV
ar
Tr
ac 48 targ r-ct 0
76
mp
; >
ev p4 .p
ro 1= kV 5_
19 et=" a"
> 7< Ev Side
na e 2 ' a 65 /s en
me nts= ='10 p18= pub rs=' 46 _bla tr
on
in
g
Of
sp =" 'T s' 85 Me C
an om 'eve 0006 2' ;s prop _T nk" g>
</ al
> n ; . 2"
we itur nt2' 6132 s.p eVar 15,p ti
hr
ef li
>
s
bs r
it eID2 ;web 4400 op1 3='r rop1 tl =
e= 'htt
e< 9
/a _ad9 link 0010 ='R eadi 6,pr "V
is p://
>< Cl '; G1 op
/l 0107 ic s. 8' ng'; 17 it w
</ </ i> 54 kT li ;s s. ,p Th ww.s
di u r n . r e
v> l> 85
_1 acki kTra prop Var op18
e Mo piri
de
<d
96
54 ng ck
Ev
21
='
12
=' ,p ra t-ho
iv 68 NonC en 1. kw rop1 ti
on use.
id 5_ N( ts 1' d' 9, 's
T2 ; c
oo
d- <u ="
no "> this ='ev ;s.p s.p prop we o.uk
Vi r bs
=" Read l
cl tNat si ,'o' ent2 rop4 op1 21,p it /mod
s. t 1= 5 e"
;s li ing- a
<l ss=" ad90 <s );" '; '1 ='90 rop4 e
cl rati
.e nkTr RG1 i c pa 00
Va 8B la
ta
bb
10
75 n
cl 10 1075 1,pr as
s= on/'
.p ac 01 48 op "a
ro r1=' kVa B-9 ss= ed"> 485_ as
s= 29
66 5';s 42,e rr
' p1 p r 01 "s 1 " o
55. MICRODATA
<div itemscope itemtype="http://data-vocabulary.org/Review">
<span itemprop="itemreviewed">Pizza Suprema</span>
Reviewed by <span itemprop="reviewer">Ulysses Grant</span> on
<time itemprop="dtreviewed" datetime="2009-01-06">Jan 6</time>.
<span itemprop="summary">Delicious, tasty pizza in New York!</span>
<span itemprop="description">An ideal neighborhood pizza joint...</span>
Rating: <span itemprop="rating">4.5</span>
</div>
56. MICRODATA
<div itemscope itemtype="http://data-vocabulary.org/Review">
<span itemprop="itemreviewed">Pizza Suprema</span>
Reviewed by <span itemprop="reviewer">Ulysses Grant</span> on
<time itemprop="dtreviewed" datetime="2009-01-06">Jan 6</time>.
<span itemprop="summary">Delicious, tasty pizza in New York!</span>
<span itemprop="description">An ideal neighborhood pizza joint...</span>
Rating: <span itemprop="rating">4.5</span>
</div>
• Easier for machines to understand
57. MICRODATA
<div itemscope itemtype="http://data-vocabulary.org/Review">
<span itemprop="itemreviewed">Pizza Suprema</span>
Reviewed by <span itemprop="reviewer">Ulysses Grant</span> on
<time itemprop="dtreviewed" datetime="2009-01-06">Jan 6</time>.
<span itemprop="summary">Delicious, tasty pizza in New York!</span>
<span itemprop="description">An ideal neighborhood pizza joint...</span>
Rating: <span itemprop="rating">4.5</span>
</div>
• Easier for machines to understand
• Could use the hooks to style
58. MICRODATA
<div itemscope itemtype="http://data-vocabulary.org/Review">
<span itemprop="itemreviewed">Pizza Suprema</span>
Reviewed by <span itemprop="reviewer">Ulysses Grant</span> on
<time itemprop="dtreviewed" datetime="2009-01-06">Jan 6</time>.
<span itemprop="summary">Delicious, tasty pizza in New York!</span>
<span itemprop="description">An ideal neighborhood pizza joint...</span>
Rating: <span itemprop="rating">4.5</span>
</div>
• Easier for machines to understand
• Could use the hooks to style
• Search engines are using it, today
59. MICRODATA
<div itemscope itemtype="http://data-vocabulary.org/Review">
<span itemprop="itemreviewed">Pizza Suprema</span>
Reviewed by <span itemprop="reviewer">Ulysses Grant</span> on
<time itemprop="dtreviewed" datetime="2009-01-06">Jan 6</time>.
<span itemprop="summary">Delicious, tasty pizza in New York!</span>
<span itemprop="description">An ideal neighborhood pizza joint...</span>
Rating: <span itemprop="rating">4.5</span>
</div>
• Easier for machines to understand
• Could use the hooks to style
• Search engines are using it, today
61. DATA ATTRIBUTES
• Previously had to litter markup with hidden meta data
• Can now legally add custom data attributes
62. DATA ATTRIBUTES
• Previously had to litter markup with hidden meta data
• Can now legally add custom data attributes
<div class="listing" id="ad1648679410_nat901079">
<h1>Company Name</h1>
<img src="staticmap/map.jpg" class="map"/>
<div class="hidden lat">51.46227</div>
<div class="hidden lon">-1.00816</div>
</div>
63. DATA ATTRIBUTES
• Previously had to litter markup with hidden meta data
• Can now legally add custom data attributes
<div class="listing" id="ad1648679410_nat901079">
<h1>Company Name</h1>
<img src="staticmap/map.jpg" class="map"/>
<div class="hidden lat">51.46227</div>
<div class="hidden lon">-1.00816</div>
</div>
<div class="listing" data-shortlistid="ad1648679410" data-natid="901079">
<h1>Company Name</h1>
<img src="staticmap/map.jpg" class="map" data-lat="51.46227" data-lon="-1.00816"/>
</div>
64. DATA ATTRIBUTES
• Previously had to litter markup with hidden meta data
• Can now legally add custom data attributes
<div class="listing" id="ad1648679410_nat901079">
<h1>Company Name</h1>
<img src="staticmap/map.jpg" class="map"/>
<div class="hidden lat">51.46227</div>
<div class="hidden lon">-1.00816</div>
</div>
<div class="listing" data-shortlistid="ad1648679410" data-natid="901079">
<h1>Company Name</h1>
<img src="staticmap/map.jpg" class="map" data-lat="51.46227" data-lon="-1.00816"/>
</div>
var shortlistID = $('.parentListing').data('shortlistid');
69. HTML5 FORMS
• Browser handles errors
• New input types, email, number, url, range..
• Browser handles date pickers
70. HTML5 FORMS
• Browser handles errors
• New input types, email, number, url, range..
• Browser handles date pickers
• No need to use Javascript to validate (one day)
95. FORMATS
• Apple backing MP4 (H.264)
• Safari desktop & mobile support MP4 only
96. FORMATS
• Apple backing MP4 (H.264)
• Safari desktop & mobile support MP4 only
• Google went and bought a codec, then open sourced it
97. FORMATS
• Apple backing MP4 (H.264)
• Safari desktop & mobile support MP4 only
• Google went and bought a codec, then open sourced it
• Google Chrome will only support WebM
98. FORMATS
• Apple backing MP4 (H.264)
• Safari desktop & mobile support MP4 only
• Google went and bought a codec, then open sourced it
• Google Chrome will only support WebM
• Microsoft IE9 - WebM and MP4
99. FORMATS
• Apple backing MP4 (H.264)
• Safari desktop & mobile support MP4 only
• Google went and bought a codec, then open sourced it
• Google Chrome will only support WebM
• Microsoft IE9 - WebM and MP4
• Mozilla Firefox - WebM & OGG
100. FORMATS
• Apple backing MP4 (H.264)
• Safari desktop & mobile support MP4 only
• Google went and bought a codec, then open sourced it
• Google Chrome will only support WebM
• Microsoft IE9 - WebM and MP4
• Mozilla Firefox - WebM & OGG
• Opera - WebM & OGG
101. IN THE WILD
<video id="movie" class="video-lrgPlayerCont" width="450" height="252" preload="" controls="">
<source src="http://videohosting.net/asset/87EC67A71ADBBB97/mp4" type="video/mp4">
<source src="http://videohosting.net/asset/87EC67A71ADBBB97/ogv" type="video/ogg">
<embed src="http://videohosting.net/mediaplayer.swf" width="450" height="252">
</video>
• MP4
• OGG
• Polyfill with a Flash fallback
102. IN THE WILD
<video id="movie" class="video-lrgPlayerCont" width="450" height="252" preload="" controls="">
<source src="http://videohosting.net/asset/87EC67A71ADBBB97/mp4" type="video/mp4">
<source src="http://videohosting.net/asset/87EC67A71ADBBB97/ogv" type="video/ogg">
<embed src="http://videohosting.net/mediaplayer.swf" width="450" height="252">
</video>
• MP4
• OGG
• Polyfill with a Flash fallback
103. IN THE WILD
<video id="movie" class="video-lrgPlayerCont" width="450" height="252" preload="" controls="">
<source src="http://videohosting.net/asset/87EC67A71ADBBB97/mp4" type="video/mp4">
<source src="http://videohosting.net/asset/87EC67A71ADBBB97/ogv" type="video/ogg">
<embed src="http://videohosting.net/mediaplayer.swf" width="450" height="252">
</video>
• MP4
• OGG
• Polyfill with a Flash fallback
111. LOCAL STORAGE
• Cookies can only store 4Kb, add to page load
• Local Storage 5Mb per domain
112. LOCAL STORAGE
• Cookies can only store 4Kb, add to page load
• Local Storage 5Mb per domain
• Can be used to cache request data
113. LOCAL STORAGE
• Cookies can only store 4Kb, add to page load
• Local Storage 5Mb per domain
• Can be used to cache request data
• Use JSON.stringyfy & JSON.parse to read/write
114. LOCAL STORAGE
• Cookies can only store 4Kb, add to page load
• Local Storage 5Mb per domain
• Can be used to cache request data
• Use JSON.stringyfy & JSON.parse to read/write
• Polyfill with cookies/window.name hack
128. GEOLOCATION
• Has it’s own specification, not part of HTML5
• Uses GPS or IP address
129. GEOLOCATION
• Has it’s own specification, not part of HTML5
• Uses GPS or IP address
• Latitude & Longitude
130. GEOLOCATION
• Has it’s own specification, not part of HTML5
• Uses GPS or IP address
• Latitude & Longitude
• Accuracy
131. GEOLOCATION
// if the browser supports the w3c geo api
if(navigator.geolocation){
// get the current position
navigator.geolocation.getCurrentPosition(
function(position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;
});
}
goo.gl/6BPM1