HTML 5 In a Big Nutshell
•
52 likes•30,540 views
HTML 5 is a new version of HTML that is still being developed. It aims to evolve HTML instead of reinventing it. Key features include new form elements, input types, semantic elements, APIs for offline apps, and standardized video and audio embedding. Browser support is growing but the specification may not be finalized until 2022. However, many features are already implemented and can be used today through emulation if needed.
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (15)
Similar to HTML 5 In a Big Nutshell
Similar to HTML 5 In a Big Nutshell (20)
More from Lennart Schoors
Recently uploaded
Recently uploaded (20)
HTML 5 In a Big Nutshell
- 1. HTML 5 In a big nutshell. Lennart Schoors
- 2. Me . lead web designer at Netlog http://www.netlog.com . blog at http://lensco.be
- 3. HTML 5 . Introduction . Web Forms 2.0 . Web Applications 1.0 . When?
- 4. HTML 5 Part I – Introduction
- 5. Background . WHATWG . founded in 2004 . reaction against the road the W3C was taking . XHTML was no failure, but XML part never really took off . renewed focus on HTML and real-world issues . “evolving instead of reinventing”
- 6. Background . 2007: WHATWG joins forces with W3C . HTML WG . both groups now work on the HTML 5 spec . all parties are now involved . anyone can contribute! . First Public Working Draft: January 22, 2008
- 7. Syntax example – XHTML 1 strict: <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot;>
- 8. Syntax HTML 5: <!doctype html> <html> <head> <meta charset=quot;utf-8quot;>
- 9. Syntax XHTML taught us: . lowercase tags! . close void elements! (img, meta, input, ...) . no empty attributes! (disabled=”disabled”) . always put attribute values in double quotes!
- 10. Syntax HTML 5 says: you choose.
- 12. Syntax . Tag soup? No! . small degree of freedom, but very detailed rules for parsing . validation will matter . keep a clean coding style, you’ll thank yourself for it later
- 13. Syntax . HTML 5 is designed so that old HTML 4 browsers can safely ignore new HTML 5 constructs . “Documents must not use deprecated features. User agents should support deprecated features.” . extensive error handling by UAs
- 14. What’s gone Say bye bye to: . frames . acronym, basefont, big, center, font, s, strike, tt, u . language attribute on script . loads of presentational attributes: cellpadding, cellspacing, width & height on tables & cells, align & valign, clear, size on inputs, ...
- 15. Good riddance!
- 16. HTML 5 Part II – Web Forms 2.0
- 17. Web Forms 2.0 . set of elements, attributes & input types . complete repetition model for forms with recurring fields (adding, removing and moving blocks) . better solutions for combo-boxes & auto-completion — like search suggestions (list attribute, datalist & select elements)
- 18. Input types . date & time (single or range) . email & url . color picker . user agent can provide the user interface — integrated with native tools . client-side validation
- 19. Input types <input type=”date”> in Opera:
- 20. Attributes . required, placeholder, autofocus, autocomplete, inputmode . validation with pattern attribute (using regular expressions) . min, max (number of files for multi-file uploads) . a <fieldset> can be entirely disabled . form (assign form elements to multiple forms)
- 21. Web Forms 2.0 . standardization of input methods . a lot less Javascript and server-side work . super useful!
- 22. HTML 5 Part III – Web Applications 1.0
- 23. Web Applications 1.0 . set of elements, attributes & APIs . because it’s not 1998 anymore . the web is no longer a collection of static pages
- 24. Elements . meter, progress, output, time . m for marked content (like search results) . embed (finally a standard) . video and audio
- 25. Elements . Semantics! . section, article, aside, header, footer, nav . dialog (for conversations) . figure (grouping images & legend) . better for disabled devices (handheld devices, search engines, ...) . better for disabled users
- 26. Attributes . ping for links (no more redirects for tracking) . target is back . <ol> has start & reversed . <iframe> has seamless & sandbox . contenteditable (finally a standard!) . data-* (define your own attributes)
- 27. APIs . API = a set of Javascript objects, methods, events . drag & drop . canvas (standardized) . back button management . cross-document messaging . notifications . listen for server-side DOM events
- 28. More APIs . offline data with storage, client-side databases and application cache . classList — access multiple classes with has(), add(), remove() and toggle() . getElementsByClassName() getSelection() hasFocus() document.activeElement innerHTML (standardized) ...
- 29. Case I: offline data . sessionStorage . temporary key/value pairs . one session per tab/window . replace cookies for session tracking . extensive Javascript methods & events
- 30. Case I: offline data . localStorage . like sessionStorage, but . persistent . global
- 31. Case I: offline data . client-side databases . SQLite — lots of structured, relational data . asynchronous . callback based . fast
- 32. Case I: offline data . application cache . store entire apps offline — HTML, JS, CSS, images, etc. . atomic updating . you tell the browser what’s new and what not in a manifest file
- 33. Case I: offline data . bringing it all together: standalone web apps . site-specific browser . custom app name & icon . online & offline . available in Safari 4
- 34. Case II: video & audio . standardized way of embedding media . fallback when not supported . multiple streams in one element . full Javascript API: controls, errors, networkState, readyState, events, ... . attributes for controls, poster, autoplay, ...
- 35. Case II: video & audio example: <video src=clip.ogg controls> <source type=video/mp4 src=clip.mp4> <source type=video/ogg src=clip.ogg> Download the <a href=clip.ogg>clip</a>. </video>
- 36. Case II: video & audio . Formats? . discussion still open (Apple & Nokia vs. Mozilla & Opera) . quot;there are no known codecs that satisfy all the current playersquot; . probably no 'single' standard
- 37. Web Applications 1.0 . a whole bunch of new elements, attributes and APIs for web apps . super useful!
- 38. HTML 5 Part IV – When?
- 39. When will HTML 5 be finished? 2022 * * includes two complete specifications & complete test suite
- 40. It’s the future!
- 41. When? 2022 — 4 reasons you shouldn't care: . 2012 is the year of the apocalypse . HTML 4 hasn't even reached the status they want to achieve with HTML 5 . W3C: spec with interoperable implementations in late 2010, and widespread adoption in 2012 . Because you can start today
- 42. Already (partially) implemented . canvas . contentEditable . getElementsByClassName . offline storage . video & audio . Web Forms 2.0 . Cross-document messaging . ...
- 43. Browser implementations . Opera & Webkit lead the pack . Mozilla is close . IE8 is doing very well . validators: still experimental, but finished soon
- 44. And there’s always emulation . Web Forms 2 http://sourceforge.net/projects/wf2/ . Canvas http://sourceforge.net/projects/excanvas/ . ... . roll your own
- 45. HTML 5 That’s all folks! . http://www.whatwg.org . http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5) . http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers . http://www.w3schools.com/tags/html5.asp . validators: http://qa-dev.w3.org/wmvs/HEAD/ & http://html5.validator.nu Read on at http://lensco.be