HTML5 - What h#@$ is it?
•
0 likes•595 views
HTML5 is an evolution of the HTML standard that aims to improve support for multimedia and other emerging web technologies. It includes new elements like <video>, <audio>, and semantic elements for structuring documents. While still in development, HTML5 is supported by modern browsers and can be used now with techniques like progressive enhancement to support older browsers. The HTML5 specification aims to both modernize HTML and make it work better for mobile devices and applications.
Report
Share
More Related Content
What's hot
What's hot (11)
Viewers also liked
Viewers also liked (13)
Similar to HTML5 - What h#@$ is it?
Similar to HTML5 - What h#@$ is it? (20)
Recently uploaded
Recently uploaded (20)
HTML5 - What h#@$ is it?
- 1. HTML5 - What the h#@$ is it?Carlos A. RamonJune 27, 2011
- 4. Why use it?
- 6. When should you use it?
- 8. Q and AA Brief History 1981 –Tim Berners Lee proposes an internet-based hypertext system
- 9. 1989 –Tim Berners Lee writes a memo proposing an internet-based hypertext system
- 10. 1991 –HTML tags first mentioned in PUBLIC!
- 11. 1993 – 1.0 goes live
- 12. 1995 – 2.0
- 13. 1996 – CSS 1.0
- 14. 1997 – W3C 4.0
- 15. 2000 – XHTML 1.0 Released
- 16. 2002 – Hooray Tableless CSS layouts
- 17. 2004 –WHATWG starts work on HTML5 under the name Web Applications 1.0
- 18. 2005 – Hello AJAX!
- 19. 2008 –W3C pushes a working draft for HTML5
- 20. 2009 –W3C announces the XHTML2 working group will stop work
- 21. 2012 –HTML5 Candidate Recommendation
- 22. 2022 –HTML5 Proposed Recommendation What is HTML5?It’s a movement not a technology
- 23. It’s HTML + CSS + JS
- 24. A 900 page spec document
- 25. It contains 8 classes
- 26. Semantics
- 28. Device Access
- 29. Connectivity
- 30. Multimedia
- 31. 3D, Graphics & Effects
- 33. CSS3
- 34. It’s still HTML + CSS + JSDoctype<?DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
- 36. Character Set<meta http-equiv="Content-Type“ content="text/html; charset=utf-8" />
- 37. NEW Character Set<meta charset="utf-8" />
- 38. Embedding JS<script type="text/javascript"> </script>
- 39. NEW Embedding JS<script> </script>
- 40. Linking CSS<link rel="stylesheet" href="file.css“ type="text/css" media="all" />
- 41. NEW Linking CSS<link rel="stylesheet“ href="file.css" />
- 42. Block Level Links<li><a href=“apage.html"><imgsrc=“mypic.jpg"><h3>Title</h3><p>Text</p></a></li>
- 43. “Au Revoir!”big
- 44. center
- 45. u
- 46. tt
- 47. s, strike
- 48. font
- 49. acronym
- 50. applet
- 51. dir
- 52. basefont
- 53. frame
- 54. frameset
- 56. nav
- 57. article
- 58. section
- 59. aside
- 60. footerSample HTML Structure<!DOCTYPE HTML><htmllang="en"><head><meta charset=utf-8><title>Sample HTML5 Structure</title><link rel="stylesheet“ href="file.css" /></head><body><div id="container"> <header> <h1>Sample HTML5 Structure</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> </nav> </header> <section> <hgroup> <h1>MainSection</h1> <h2>Thisis a sample HTML5 Page</h2> </hgroup> <article> <p>Thisisthecontentforthefirstarticle</p> </article> <article> <p>Thisisthecontentforthesecondarticle</p> </article> </section> <footer> <p>ThisistheFooter</p> </footer></div></body></html>
- 61. <video><video width="560" height="340" controls><sourcesrc="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'><sourcesrc="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'><objecttype="application/x-shockwave...</video>
- 62. <audio><audio controlspreload="none"><sourcesrc="bestcountryandwesternsongever.ogg" type="audio/ogg"> <sourcesrc="bestcountryandwesternsongever.mp3" type="audio/mpeg"><objecttype="application/x-shockwave...</audio>
- 63. Web Forms - New Attributesrequired - <input type="text" required>
- 64. specifies that an input field must be filled out before submitting.
- 65. autocomplete - <input type="text" autocomplete >
- 66. specifies that the form or input field should have an autocomplete function. Tells the browser to allow the field to be autocompleted or not.
- 67. placeholder - <input type="text" placeholder="Search..." >
- 68. provides a hint that describes the expected value of an input field.
- 69. autofocus - <input type="text" autofocus >
- 70. specifies that a field should automatically get focus when a page is loaded.Web Forms - Input Typessearch
- 71. email
- 72. url
- 73. tel
- 74. number
- 75. range
- 76. date
- 77. colorSo, why use it?Modernize your front-end
- 80. We’re already familiar with the syntax (HTML or XHTML)
- 81. Great for mobile
- 82. Research “Responsive Web Design”
- 83. Promotes standards & accessibilityWho supports it?Modern browsers
- 84. IE 9.0+
- 85. FF 3.5+
- 86. Opera 10+
- 87. Safari
- 88. Chrome
- 90. iOS
- 91. Android
- 92. webOS
- 93. BlackBerry 6.0+When should you use it?NOW
- 94. Steps for modernizationGraceful degradation
- 95. Start HTML5 Ninja Awesome -> Strip features/fallbacks for lesser browsers
- 97. Start w/ necessary -> Enhance for more capable browsersImplementationsSome CSS
- 98. Sectioning elements needs a line break.
- 99. HTML5 Shiv
- 100. determines browser version and creates the elements for us if needed.
- 101. Modernizr
- 102. 3.7k javascript file you can add to your project.
- 103. Works with both HTML5 and CSS3 elements
- 104. Uses feature detection to easily control fallbacksquestion.answerThank you.Carlos A. Ramon713.353.4508carlos.ramon@idea.com@html5ninja@mobiletexas
Editor's Notes
- WHATWG – Web Hypertext Application Technology Working Group
- WHATWG – Web Hypertext Application Technology Working Group
- You can now wrap links around block-level elements, rather than having to create links around every element inside the block element.
- <input type="search">The search field behaves likea regular text field. Somebrowsers add special stylingand/or functionality forclearing.<input type="email">Used for input fields that shouldcontain an e-mail address.<input type="url">Used for input fields that should contain a URL address.<input type="number">Used for input fields that should contain a numericvalue.<input type="tel">Used for input fields that should containnumbersonly<input type="range min="0" max="10" step="2" value="6">Used for input fields that should contain a value from a range of numbers.<input type="date"><input type="month"><input type="week"><input type="time"><input type="datetime"> (utc time)<input type="datetime-local"> (local time)<input type="color">Used for input fields that shouldcontain a color
- Bruce LawsonJeffrey ZeldmanPaul IrishRemy SharpEthanMarcottehttp://html5boilerplate.com/http://www.w3.org/html/logo/ http://html5demos.com/