Html5 intro
1 like2,472 views
This document provides an overview of HTML5 history and features. It discusses the evolution of HTML standards from early versions to HTML5, including key events like the browser wars. It outlines the vision and rules of HTML5, such as using <!DOCTYPE html> and removing closing tags from void elements. New HTML5 features covered include semantic elements, APIs, and tools to support HTML5 development.
Html5 intro
- 1. HTML5 Introduction Ynon Perek Wednesday, January 30, 13
- 2. Agenda HTML History HTML5 Rules New Features Browser Support HTML5 Page Structure Wednesday, January 30, 13
- 3. In The Beginning While working at CERN in the 90s, Berners-Lee develops WWW 1991 The first web site (CERN’s info page) 1994 Berners-Lee founded the W3C http://www.flickr.com/photos/tanaka/3212373419/ Wednesday, January 30, 13
- 4. 1991 HTML1 Described in a document called “HTML Tags” Included 20 elements Influenced by SGML Wednesday, January 30, 13
- 5. 1995 HTML2 One year after Netscape was founded Forms Tables Image Maps http://www.flickr.com/photos/kalleboo/2214787531/ Wednesday, January 30, 13
- 6. 1997 HTML3.2 Standardizing browser wars Dropping Netscape’s blink and MS marquee On the right: Blue - IE Light green - Netscape http://en.wikipedia.org/wiki/File:Browser_Wars.svg Wednesday, January 30, 13
- 7. 1999 HTML4 Browser war was over. MS won Many new elements, including iframe, label, legend, object Deprecated: applet, center, font, menu, strike http://www.flickr.com/photos/daniello/422213306/ Wednesday, January 30, 13
- 8. After The Browser Wars W3C starts to work on XHTML, MathML, SVG and others XML based technologies HTML is considered “finished” Wednesday, January 30, 13
- 9. HTML4 Suitable for web sites, not web applications Wednesday, January 30, 13
- 10. 2004 WHATWG The Web Hypetertext Application Technology Working Group came to life in 2004 to bring life into HTML It was founded by Apple, Mozilla and Opera Published a proposal for Web Applications 1.0 spec, which has later evolved into HTML5 Wednesday, January 30, 13
- 11. 2009 HTML5 No more XHTML Many new elements Web Application Oriented Wednesday, January 30, 13
- 12. State of HTML5 Still In Draft Candidate Recommendations stage during 2012 W3C Recommendation deadline: 2022 However, many parts of the recommendations are fully functional today Wednesday, January 30, 13
- 13. Web Tech History 1991 HTML 1999 HTML4 1995 HTML2 2000 XHTML1 1996 CSS1 + 2002 Tableless Web JavaScript Design 1997 HTML3.2 2005 Ajax 1998 CSS2 2009 HTML5 Wednesday, January 30, 13
- 14. HTML5 Vision Wednesday, January 30, 13
- 15. Paving The Cow Path The WHATWG took the time to understand what everyone does, analyzed good practices and standardized them This leads to evolution and not revolution Wednesday, January 30, 13
- 16. Utility Over Purity HTML5 is overwhelmingly practical, allowing many code that used to be invalid and making developers lives easier Less code, less headaches, more fun. Wednesday, January 30, 13
- 17. Content & Presentation HTML5 deprecates many old presentational elements in favor of CSS. Enhancements in CSS3 selectors enable better separation between content and presentation Wednesday, January 30, 13
- 18. Plugin Free Paradigm Provide native APIs for everything that used to required a proprietary plugin Flash is no longer mandatory Wednesday, January 30, 13
- 19. HTML5 Vision Paving The Cow Path Utility over Purity Separation of Content and Presentation Plugin Free Wednesday, January 30, 13
- 20. Q&A http://www.flickr.com/photos/92163630@N00/95509221/ Wednesday, January 30, 13
- 21. The Rules Wednesday, January 30, 13
- 22. Doctype Remove old clutter from the doctype declaration For an HTML5 page, use: <!DOCTYPE html> MIME Type: text/html Wednesday, January 30, 13
- 23. Character Encoding Remove old clutter from encoding definitions Use: <meta charset=”UTF-8”> Note no need to close meta tags Can also use the old syntax Wednesday, January 30, 13
- 24. Tag Fun No need to close void elements both <br /> and <br> are valid HTML Validator: http://validator.w3.org/ Wednesday, January 30, 13
- 25. HTML5 New Features New Syntactic Elements New Semantic Elements New APIs Wednesday, January 30, 13
- 26. HTML5 Semantics WHATWG analyzed and learned the uses of <div> elements in many web sites They have found a few common usages HTML5 includes specialized elements for these common usages Can still use a <div> Wednesday, January 30, 13
- 27. Semantic Elements header: header content footer: footer content section: a section of articles article: articles are arranged inside sections aside: related content nav: navigational element Wednesday, January 30, 13
- 28. New APIs Web Storage Geolocation Web SQL Device Orientation Application Cache Forms Web Workers Audio & Video Web Sockets Canvas Desktop Notifications Web GL Drag & Drop History API File System API And More... Wednesday, January 30, 13
- 29. HTML Polyfills Replacement library for older browsers Make a smooth switch to HTML5 http://www.flickr.com/photos/tuba/2424237036/ Wednesday, January 30, 13
- 30. HTML5 Tools HTML5 Boilerplate. A base HTML5 template with backward compatibility and feature detection Modernizr. A feature detection js library Polyfills: https://github.com/Modernizr/Modernizr/wiki/ HTML5-Cross-browser-Polyfills Wednesday, January 30, 13
- 31. Demo: HTML Boilerplate Page Structure Best practices Feature Detection Wednesday, January 30, 13
- 32. HTML5 IDEs WebStorm Komodo Edit Eclipse / Visual Studio gVim Aptana Studio Wednesday, January 30, 13
- 33. HTML5 Lab Build a home page for your resume in HTML5 with no styling Describe your job history, hobbies and education Use the boilerplate and semantic elements Bonus: Add some CSS Styling Wednesday, January 30, 13