Uploaded byCarlos Ramon
HTML5 - What h#@$ is it?
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.
More Related Content
![[In Control 2010] HTML5](https://cdn.slidesharecdn.com/ss_thumbnails/incontrolorlandohtml5-100302003930-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!](https://cdn.slidesharecdn.com/ss_thumbnails/eduiconf-html5-cheezeburgers-111013121954-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Exploring Apple’s On-Device FoundationModels](https://cdn.slidesharecdn.com/ss_thumbnails/md-exploringappleson-devicefoundationmodels-251124030840-d690542c-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Full-Stack Development] PHP in AI Age: The Laravel Way. (Rizqy Hi...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-phpinaiagethelaravelway-251125012602-ef9d330e-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DevFest Strasbourg 2025] - NodeJs Can do that !!](https://cdn.slidesharecdn.com/ss_thumbnails/devfeststrasbourg2025-nodejscandothat-251127142731-da65b6fd-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Mobile Engineer and Software Engineer: Are we...](https://cdn.slidesharecdn.com/ss_thumbnails/md-mobileengineerandsoftwareengineerarewestillrelevantsidiqpermana-251127010650-55224ef1-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Full-Stack Development] Digital Accessibility: Why Developers nee...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-digitalaccessibilitywhydevelopersneedtoknowandcarein2025-251127011019-0674441d-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Artificial Intelligence] Building AI Systems That Users (and Comp...](https://cdn.slidesharecdn.com/ss_thumbnails/ai-buildingaisystemsthatusersandcompanieslove-251124030845-038f7732-thumbnail.jpg?width=640&height=640&fit=bounds)
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML5 - What h#@$ is it?
- 1. HTML5 - Whatthe h#@$ is it?Carlos A. RamonJune 27, 2011
- 2.
- 3.
- 4.
- 5.
- 6. When should youuse it?
- 7.
- 8. Q and AABrief History 1981 –Tim Berners Lee proposes an internet-based hypertext system
- 9. 1989 –Tim BernersLee writes a memo proposing an internet-based hypertext system
- 10. 1991 –HTML tagsfirst mentioned in PUBLIC!
- 11. 1993 – 1.0goes live
- 12.
- 13. 1996 – CSS1.0
- 14. 1997 – W3C4.0
- 15. 2000 – XHTML1.0 Released
- 16. 2002 – HoorayTableless CSS layouts
- 17. 2004 –WHATWG startswork on HTML5 under the name Web Applications 1.0
- 18. 2005 – HelloAJAX!
- 19. 2008 –W3C pushesa working draft for HTML5
- 20. 2009 –W3C announcesthe XHTML2 working group will stop work
- 21. 2012 –HTML5 CandidateRecommendation
- 22. 2022 –HTML5 ProposedRecommendation What is HTML5?It’s a movement not a technology
- 23. It’s HTML +CSS + JS
- 24. A 900 pagespec document
- 25. It contains 8classes
- 26.
- 27.
- 28.
- 29.
- 30.
- 31. 3D, Graphics &Effects
- 32.
- 33.
- 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”>
- 35.
- 36. Character Set<meta http-equiv="Content-Type“content="text/html; charset=utf-8" />
- 37. NEW Character Set<metacharset="utf-8" />
- 38.
- 39. NEW Embedding JS<script></script>
- 40. Linking CSS<link rel="stylesheet"href="file.css“ type="text/css" media="all" />
- 41. NEW Linking CSS<linkrel="stylesheet“ href="file.css" />
- 42. Block Level Links<li><ahref=“apage.html"><imgsrc=“mypic.jpg"><h3>Title</h3><p>Text</p></a></li>
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60. footerSample HTML Structure<!DOCTYPEHTML><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 aninput field must be filled out before submitting.
- 65. autocomplete - <inputtype="text" autocomplete >
- 66. specifies that theform or input field should have an autocomplete function. Tells the browser to allow the field to be autocompleted or not.
- 67. placeholder - <inputtype="text" placeholder="Search..." >
- 68. provides a hintthat describes the expected value of an input field.
- 69. autofocus - <inputtype="text" autofocus >
- 70. specifies that afield should automatically get focus when a page is loaded.Web Forms - Input Typessearch
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77. colorSo, why useit?Modernize your front-end
- 78.
- 79.
- 80. We’re already familiarwith the syntax (HTML or XHTML)
- 81.
- 82. Research “Responsive WebDesign”
- 83. Promotes standards &accessibilityWho supports it?Modern browsers
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93. BlackBerry 6.0+When shouldyou use it?NOW
- 94. Steps for modernizationGracefuldegradation
- 95. Start HTML5 NinjaAwesome -> Strip features/fallbacks for lesser browsers
- 96.
- 97. Start w/ necessary-> Enhance for more capable browsersImplementationsSome CSS
- 98. Sectioning elements needsa line break.
- 99.
- 100. determines browser versionand creates the elements for us if needed.
- 101.
- 102. 3.7k javascript fileyou can add to your project.
- 103. Works with bothHTML5 and CSS3 elements
- 104. Uses feature detectionto easily control fallbacksquestion.answerThank you.Carlos A. Ramon713.353.4508carlos.ramon@idea.com@html5ninja@mobiletexas
Editor's Notes
- #4 WHATWG – Web Hypertext Application Technology Working Group
- #5 WHATWG – Web Hypertext Application Technology Working Group
- #14 You can now wrap links around block-level elements, rather than having to create links around every element inside the block element.
- #21 <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
- #27 Bruce LawsonJeffrey ZeldmanPaul IrishRemy SharpEthanMarcottehttp://html5boilerplate.com/http://www.w3.org/html/logo/ http://html5demos.com/