HTML5 introduces new semantic tags that help improve accessibility and search engine optimization. It also features new form input types and APIs for offline storage, geolocation, and multimedia without Flash. CSS3 includes properties for visual transitions and transformations to create animated effects and move elements without requiring JavaScript. HTML5 and CSS3 bring many advantages for building modern responsive web applications, though some features may require polyfills or libraries for cross-browser compatibility.

1. HTML5

2. Use

3. Cases
전용우

4. TOC
1. HTML5
2. CSS3
3. API
4. Flash Free

5. 1. HTML5

6. Semantic Web

7. Semantic Web
header
nav.../nav
/header

8. Semantic Web
header
nav.../nav
/header

9. Semantic Web
header
nav.../nav
/header
section
...
/section

10. Semantic Web
header
nav.../nav
/header
section
...
/section

11. New Feature

12. New Feature

13. New Feature
input type=”text”
placeholder=”곡명, 앨범명, 아티스트명”

14. New Feature

15. New Feature

16. New Feature

17. New Feature

18. New Feature

19. New Feature
input[type=search]
input[type=number]
....
tel, email, time....

20. Simple Tag
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
script type=”text/javascript”
style type=”text/css”
b/

21. Simple Tag
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
!doctype html
script type=”text/javascript”
style type=”text/css”
b/

22. Simple Tag
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
!doctype html
script type=”text/javascript”
style type=”text/css”
b/

23. Simple Tag
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
!doctype html
script type=”text/javascript”
script
style type=”text/css”
b/

24. Simple Tag
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
!doctype html
script type=”text/javascript”
script
style type=”text/css”
b/

25. Simple Tag
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
!doctype html
script type=”text/javascript”
script
style type=”text/css”
style
b/

26. Simple Tag
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
!doctype html
script type=”text/javascript”
script
style type=”text/css”
style
b/

27. Simple Tag
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
!doctype html
script type=”text/javascript”
script
style type=”text/css”
style
b/
b

28. Simple Tag
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
!doctype html
script type=”text/javascript”
script
style type=”text/css”
style
b/
b

29. 2. CSS3

30. Transition

31. Transition

32. Transition
#layer .off{
opacity : 0;
transition-duration: 2s;
transition-property: opacity;
transition-delay: 1s;
transition-timing-function: ease;
}

33. Transform

34. Transform

35. Transform
#section .first{
transition : transform 2s 0s ease;
transform : translate3d(200px, 0, 0);
}

36. Compatibility?

37. Use Library.
(Jindo Mobile, JQuery Mobile, Sencha Mobile..)

38. 3. API

39. localStorage

40. localStorage

41. localStorage
localStorage[“history”] = “전용우”;
localStorage[“history”];

42. geolocation

43. geolocation

44. geolocation
navigator.geolocation.getCurrentPosition( fpSuc, fpFail );

45. 4. Flash Free

46. Flash to JavaScript