Download as PDF, PPTX
![<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6">
<![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7">
<![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8">
<![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9">
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"
class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">
<title></title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">](https://image.slidesharecdn.com/using-html5-sensibly-110208101852-phpapp02/85/Using-HTML5-sensibly-51-320.jpg)
![<script>!window.jQuery && document.write(unescape
('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script
%3E'))</script>
<!-- scripts concatenated and minified via ant build
script-->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!-- end concatenated and minified scripts-->
<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script> DD_belatedPNG.fix('img, .png_bg'); </
script>
<![endif]-->
</body>
</html>](https://image.slidesharecdn.com/using-html5-sensibly-110208101852-phpapp02/85/Using-HTML5-sensibly-53-320.jpg)
Uploaded byChristian Heilmann
Using HTML5 sensibly
The document, presented by Christian Heilmann at the London AJAX User Meetup in February 2011, discusses the evolution of HTML5 and its significance in simplifying web development while addressing common challenges faced by developers, particularly with legacy browsers like Internet Explorer. It emphasizes the practicality of HTML5's semantic elements, improved APIs, and the necessity for developers to adapt their practices in light of these changes. Heilmann concludes by urging the community to embrace innovation and question the misuse of technology that negatively impacts user experiences on the web.
More Related Content
![[In Control 2010] HTML5](https://cdn.slidesharecdn.com/ss_thumbnails/incontrolorlandohtml5-100302003930-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Using HTML5 sensibly
- 1. Using HTML5 sensibly ChristianHeilmann, London Ajax User Meetup, February 2011
- 2. This will bea change from my normal talks. Instead of giving you the facts, it is my turn to ask some questions.
- 3. But first, letme tell you a story. As stories are important!
- 4. Back in 1939... ...Antarcticaneeded exploring
- 5.
- 9. So let’s seewhat went wrong there... ★ Purely engineering driven ★ Tested while on the road ★ Never tested in the real environment ★ Massive media excitement before it proved its worth
- 11. HTML5 is thenew hotness!
- 12.
- 13.
- 14.
- 15. Everything is HTML5- including browser specific tricks.
- 16. To a degreethis is understandable. There is a lot of confusion about the players and the specs.
- 17. HTML(5) Markup general WTF JavaScript APIs Stuff for Browser/Parser developers
- 18. This gives peoplelots of space for interpretation and focus - and the opportunity to rant.
- 19. The main premiseof HTML5 is pragmatism - making things simpler for all of us.
- 20. Another big topicis that XML was just not for the web - end users should not suffer for the errors of the authors.
- 21. <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>HTML - c'est moi!</title> <link rel="stylesheet" type="text/css" href="styles.css"> <script type="text/javascript" src="magic.js"> </script> </head> <body> <h1>Heading! Everybody duck!</h1> <p>I am content, hear me roar!</p> <p class="footer">By me!</p> </body> </html>
- 22. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML5, c'est moi, ou HTML...</title> <link rel="stylesheet" href="styles.css"> <script src="magic.js"></script> </head> <body> <h1>Heading! Everybody duck!</h1> <p>I am content, hear me roar!</p> <p class="footer">By me!</p> </body> </html>
- 23. HTML5 also includesnew semantic elements (based on class names in use) that structure our documents much better than before.
- 24. <!DOCTYPE html> <html lang="en"> <head> <title>HTML5, c'est moi, ou HTML...</title> <link rel="stylesheet" href="styles.css"> <script src="magic.js"></script> </head> <body> <header><h1>Heading! Everybody duck!</h1></header> <section> <p>I am content, hear me roar!</p> </section> <footer><p>By me!</p></footer> </body> </html>
- 25. HTML5 defines and expects browsersto fix omissions for us - and doesn’t mind case or quotes.
- 26. <!DOCTYPE html> <html lang=en> <TITLE>HTML5, c'est moi, ou HTML...</title> <LINK rel=stylesheet href=styles.css> <script src=magic.js></SCRIPT> <body> <HEADER><h1>Heading! Everybody duck!</h1></header> <section> <p>I am content, hear me roar!</p> </SECTION> <footer><p>By me!</p></FOOTER> </body> </HTML>
- 27. The reason isthat browsers do that anyways - just check the generated code of a document like that.
- 28. <!DOCTYPE html> <html lang="en"><head> <title>HTML5, c'est moi, ou HTML...</title> <link rel="stylesheet" href="styles.css"> <script src="magic.js"></script> </head><body> <header><h1>Heading! Everybody duck!</h1></header> <section> <p>I am content, hear me roar!</p> </section> <footer><p>By me!</p></footer> </body></html>
- 29. <!DOCTYPE html> <html lang=en> <TITLE>HTML5, c'est moi, ou HTML...</title> <LINK rel=stylesheet href=styles.css> <script src=magic.js></SCRIPT> <body> <HEADER><h1>Heading! Everybody duck!</h1></header> <section> <p>I am content, hear me roar!</p> </SECTION> <footer><p>By me!</p></FOOTER> </body> </HTML>
- 30. <!DOCTYPE html> <html lang="en"><head> <title>HTML5, c'est moi, ou HTML...</title> <link rel="stylesheet" href="styles.css"> <script src="magic.js"></script> </head><body> <header><h1>Heading! Everybody duck!</h1></header> <section> <p>I am content, hear me roar! <footer></footer> </p> <p>By me!</p> </section> </body></html>
- 31. Browsers fix alot of stuff for us, this has always been the case.
- 32. ? Can innovation bebased on “people never did this correctly anyways”?
- 33. ? Is it HTMLor BML?
- 34. ? Should HTML bethere only for browsers? What about conversion Services? Search bots? Content scrapers?
- 35.
- 36. Internet Explorer doesn’t allowstyling for elements it doesn’t understand as part of HTML.
- 37. HTML is thething we base everything on - so if we exclusively use the new HTML5 elements, we give IE unstyled documents.
- 38. Time to apply somefixes!
- 39. First fix -elements created with JS can be styled in IE. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style>header{color:#fff;background:#369;}</style> <script>document.createElement('header');</script> </head> <body> <header><h1>Hello!</h1></header> </body> </html>
- 40. Remy Sharp packagedthat up nicely in HTML5shiv. http://code.google.com/p/html5shiv/
- 41. Cue the puristsof the web. “HTML should work without JavaScript!”
- 42. Next solution: Sending HTML5as XML or giving it a namespace. http://www.ibm.com/developerworks/xml/library/x-think45/ http://www.debeterevormgever.nl/html5-ie-without-javascript/
- 43. Purist solution: add DIVsaround the new elements. .header,header, .footer,footer, .aside,aside, .section,section{ display:block; }
- 44. <!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"> <title>HTML5, c'est moi, ou HTML...</title> <link rel="stylesheet" href="styles.css"> <script src="magic.js"></script> </head> <body> <div class="header"><header> <h1>Heading! Everybody duck!</h1> </header></div> <div class="section"><section> <p>I am content, hear me roar!</p> </section></div> <div class="footer"><footer> <p>By me</p> </footer></div> </body> </html>
- 45. Bloody Internet Explorer! Wealways have to do things extra for it!
- 46. All browsers failin one way or another and need patches. Our job is to know them. Luckily, there is help.
- 47.
- 48.
- 49. And as ifby magic - the much shorter and pragmatic markup became more complex again.
- 51. <!doctype html> <!--[if ltIE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0">
- 52. <link rel="shortcut icon"href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch- icon.png"> <link rel="stylesheet" href="css/style.css?v=2"> <script src="js/libs/modernizr-1.6.min.js"></script> </head> <body> <div id="container"> <header> </header> <div id="main"> </div> <footer> </footer> </div> <!-- end of #container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/ 1.4.2/jquery.js"> </script>
- 53. <script>!window.jQuery && document.write(unescape ('%3Cscriptsrc="js/libs/jquery-1.4.2.js"%3E%3C/script %3E'))</script> <!-- scripts concatenated and minified via ant build script--> <script src="js/plugins.js"></script> <script src="js/script.js"></script> <!-- end concatenated and minified scripts--> <!--[if lt IE 7 ]> <script src="js/libs/dd_belatedpng.js"></script> <script> DD_belatedPNG.fix('img, .png_bg'); </ script> <![endif]--> </body> </html>
- 54. One solution touse HTML5 APIs with legacy browsers is using polyfills.
- 55.
- 56. ? Should we shoe-hornnew technology into legacy browsers?
- 57. ? Do patches addcomplexity as we need to test their performance?
- 58. ? How about movingIE<9 fixes to the server side? Padding with DIVs with classes and no JS for IE?
- 59. Making video andaudio simpler.
- 60. Embedding audio andvideo is easy in HTML5 <video src="interview.ogv" controls> <a href="interview.ogv">Download the video</a> </video>
- 61. To make allcapable browsers play the video... <video controls> <source src="interview.mp4" type="video/mp4"> </source> <source src="interview.webm" type="video/webm"> </source> <source src="interview.ogv" type="video/ogg"> </source> <p>Download the <a href="interview.mp4">video in MP4 format</a>. </p> </video>
- 62. Where there isa need, there is an opportunity for a business.
- 64. However, there isa real problem for businesses.
- 65.
- 66. ? Can we expectcontent creators to create video in many formats to support an open technology?
- 67. ? Can a servicelike vid.ly be trusted for content creation and storage?
- 68. ? Is HTML5 notapplicable for premium content?
- 69. It is timefor all of us to take initiative and make this work.
- 70. Question authority andcall out wrong messaging.
- 71. Bad use oftechnology doesn’t only break end user experiences - it breaks the web! http://gawker.com/#!5754678/what-should-our-new- national-anthem-be
- 72.
- 73.
- 74.