This document provides an overview of HTML5, including its history and specifications. It discusses key HTML5 features such as Web Storage, microdata, media queries, canvas, web fonts, and data URLs. Examples are given for many of these features. The document concludes by thanking the reader for changing their view of HTML5 from "Not HTML5" to recognizing it as HTML5.

1. HTML5
HTML5
Change
HTML5
from
not
HTML5.
!! HTML5
2013
2013/04/20
@sada_h
http://bit.ly/html5efsta

2. /
/
/
HTML5
Born
in
1981.
Ruby
/
Rails
/
HTML5
/
JavaScript
/
Java
Kakaku.com,
Inc.
Engineer
2012/08
sadah.github.io @sada_h techlog
html5j
[ ]
[cena( )]

4. HTML5

5. HTML5
YearYear SpecSpec TopicTopic
1993 HTML
1.0 IETF
1997 HTML
3.2 W3C
W3C
1997 HTML
4.0 W3C
1999 HTML
4.0.1 W3C
2000 XHTML
1.0 W3C
HTML
4.0.1 XML

6. HTML5
YearYear SpecSpec TopicTopic
2001 XHTML
1.1 W3C
2007 HTML5 W3C (WG )
2009 XHTML
2.0 XHTML2
WG
2011 HTML5 W3C
2012 HTML5 W3C
(2012/12/17)

7. W3C
Working
Draft,
WD
Last
Call
Working
Draft
Candidate
Recommendation,
CR
HTML5 ( )
Proposed
Recommendation,
PR
W3C W3C
Recommendation,
REC
2012/12/17
World
Wide
Web
Consortium
-
Wikipedia
W3C
-
Wikipedia

10. is
not
HTML5.
is
HTML5.

11. HTML5

12. HTML5
2012/12/17
W3C

14. HTML5

16. HTML5
Markup
HTML5
Specs
:
/
cena( )
Apple
LAWSON
UNITED
ARROWS
LTD.
BEAMS
HTML5 HTML
5.1

17. HTML5
Markup
createElement
html5shiv
[if lt IE 9]>
<script src="dist/html5shiv.js">

18. WebStorage
WebStorage
Google
twitter
Twitter
Google
Web
Storage

19. WebStorage
5MB
QUOTA_EXCEEDED_ERR
localStorage.setItem("key","text");
text = localStorage.getItem("key");
sessionStorage.setItem("key",text);
text = sessionStorage.getItem("key");
Sample:
WebStorage
Sample

20. microdata
/
RDFa
microdata
RDFa
Barack
Obama
Home
-
schema.org
-
Google
Google
Structured
Data
Testing
Tool

21. microdata
/
RDFa
Specs
HTML+RDFa
1.1
Last
Call:
HTML+RDFa
1.1
-
W3C
News
-
07
February
2013
HTML
Microdata
HTML
Microdata
Nightly

22. microdata
<div itemscope itemtype="http://data-vocabulary.org/Person">
私の名前は<span itemprop="name">ひらい さだあき</span>ですが、
みんなから「<span itemprop="nickname">さだ</span>」と呼ばれています。
私のホームページは、
<a href="http://sadah.github.io" itemprop="url">sadah.github.io</a> です。
鎌倉に住んでおり、<span itemprop="title">エンジニア</span>として
<span itemprop="affiliation">カカクコム</span>に勤めています。
</div>
Sample:
microdata

23. microdata
/
RDFa
Home
-
schema.org
microdata
-
Google
-
-
Google
-
-
Google
Google
Structured
Data
Testing
Tool

24. Custom
Data
Attributes
Barack
Obama
3.2.3.9
Embedding
custom
non-visible
data
with
the
data-*
attributes

25. MediaQueries
World
Wide
Web
Consortium
(W3C)
Microsoft
Japan
NTT

26. MediaQueries
@media screen and (max-width: 479px) {
.media-test { color: red; }
}
@media screen and (min-width: 480px) and (max-width: 1023px) {
.media-test { color: blue; }
}
@media screen and (min-width: 1024px) {
.media-test { color: green;}
}
Sample:
MediaQueries
sadah.github.io

27. MediaQueries
CSS

28. MediaQueries
PC
cena

29. MediaQueries
bookmarklet
Spec
:
Media
Queries
Viewport
Resizer
Responsive
Design
Testing
Media
Queries
W3C
REC

30. WebFonts
DevTools
BEAMS
NTT
FONTPLUS

31. WebFonts
sadah.github.io
Google
Web
Fonts
Compare

32. WebFonts
/* using Google Web Fonts */
@font-face {
font-family: 'Allerta Stencil';
src: url(http://themes.googleusercontent.com/static/fonts/allertastencil/v4/Cd
SZfRtHbQrBohqmzSdDYKqcRvMv63bhrwdN_8Hu8N8.woff) format('woff');
}
.webfonts{
font-family: 'Allerta Stencil', sans-serif;
}
Sample:
WebFonts
Web
Fonts
IT

33. WebFonts
Extension
Chrome
-
WhatFont
Chrome
-
Google
Font
Previewer
for
Chrome

34. Canvas
Canvas
GoogleMaps
Thanks
komasshu
!
Spec
:
/
Google
Maps
-
WSJ
HTML
Canvas
2D
Context

35. data
URL
Scheme
RFC
2397
-
The
"data"
URL
scheme

36. data
URL
Scheme
<img src="data:image/jpeg;base64,/9j/4AAQSkZJ ... "
var strDataURI = document.getElementById("canvas-area").toDataURL("image/pn
g");
Sample:
data
URL
Scheme
Sample:
data
URL
Scheme
+
Canvas
Sample:
getUserMedia
+
Canvas
+
Video
+
data
URL
Scheme
+
FullScreen
API

37. HTML5

38. HTML5
HTML5
HTML5
doctype
html5shiv
HTML5
(header )
cena( )

39. HTML5
Rails
jQuery HTML5

40. HTML5
HTML5
HTML5
HTML5

42. HTML5

43. HTML5( )

47. Happy

48. Happy
HTML5
HTML5

49. The
End
Change
HTML5
from
Not
HTML5.
Thank
you
so
mach.
http://bit.ly/html5efsta
@sada_h