Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Structures, Semantics, Controls, and More: HTML 5 is Here!

OK, so the estimated timeline says it will be 2012 before HTML 5 is a W3C Candidate Recommendation and 2022 before browsers fully recognize HTML 5. But that doesn't mean that we can't start using it now!

The Web Hypertext Application Technology Working Group (WHATWG) has proposed HTML 5 as the next standard. HTML 5 includes new elements for structure and external content (like audio, video, and graphics), and it adds new attributes to some existing elements. Backward compatibility is maintained so that HTML 5 documents and applications work (or degrade nicely) in existing browsers. The resulting code is very clean and, in some ways, could be considered minimal (especially when compared to HTML 4 or XHTML 1).

Come learn about the future of HTML! See demos and explanations, learn which browsers already support it, and get resources and references to more information.

  • Login to see the comments

Structures, Semantics, Controls, and More: HTML 5 is Here!

  1. 1. Structures, Semantics, Controls, and More: HTML 5 is Here!<br />Char James-Tanny<br />JTF Associates, Inc.<br />http://jtfassociates.com<br />char@jtfassociates.com ~ @charjtf<br />Copyright © 2010 JTF Associates, Inc.<br />1<br />
  2. 2. Copyright © 2010 JTF Associates, Inc.<br />
  3. 3. Background<br />Copyright © 2010 JTF Associates, Inc.<br />3<br />
  4. 4. Timeline<br />Copyright © 2010 JTF Associates, Inc.<br />4<br />11/1996 XML<br />(first working draft)<br />1/08 HTML 5<br />(working draft)<br />2001 Semantic Web<br />12/96 CSS1<br />5/98 CSS2<br />5/96 HTML 2.0<br />(tables added)<br />1/97 HTML 3.2<br />12/97 HTML 4<br />1/00 XHTML 1.0<br />5/01 XHTML 1.1<br />6/04 HTML 5 Development Starts<br />11/95 HTML 2.0<br />(IETF)<br />Not to scale<br />
  5. 5. Layout Stages<br />Copyright © 2010 JTF Associates, Inc.<br />5<br />row<br />row<br />column<br />column<br />row<br />row<br />1996 Tables (HTML 2)<br />
  6. 6. Layout Stages<br />Copyright © 2010 JTF Associates, Inc.<br />5<br />div<br />div<br />div<br />div<br />div<br />1997 DIVs (HTML 3.2)<br />
  7. 7. Layout Stages<br />Copyright © 2010 JTF Associates, Inc.<br />5<br />header<br />nav<br />article<br />aside<br />section<br />section<br />aside<br />footer<br />2004 Semantic Structure (HTML 5)<br />
  8. 8. HTML 5 Stages<br />2004: Development starts (WHATWG)<br />“…new version of HTML 4, XHTML 1, and DOM Level 2”<br />“…defines many APIs that form the basis of Web architecture”<br />2008: First Public Working Draft<br />2012: W3C Candidate Recommendation<br />2022: W3C Recommendation<br />Copyright © 2010 JTF Associates, Inc.<br />6<br />
  9. 9. Elements and Attributes<br />Copyright © 2010 JTF Associates, Inc.<br />7<br />
  10. 10. DOCTYPE<br /><!DOCTYPE html><br />Not…<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <br />OR<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd><br />Copyright © 2010 JTF Associates, Inc.<br />8<br />
  11. 11. Structural(Semantic) Elements<br />Copyright © 2010 JTF Associates, Inc.<br />9<br /><header><br /><nav><br /><article><br /><header><br /><nav><br /><article><br /><section><br /><aside><br /><footer><br /><aside><br /><section><br /><aside><br /><section><br /><footer><br />
  12. 12. Other New Elements<br />audio and video<br />canvas<br />command<br />datalist<br />figure and figcaption<br />mark<br />time<br />Copyright © 2010 JTF Associates, Inc.<br />10<br />
  13. 13. Element/Attribute Syntax<br />No rules:<br />Mix case (not case sensitive)<br />Double quotes, single quotes, no quotes<br />Closing tags not required for void elements<br />Optional attribute values<br />Allows for easier conversion from older specs<br />Just be consistent!<br />I use XHTML syntax.<br />Copyright © 2010 JTF Associates, Inc.<br />11<br />
  14. 14. Element/Attribute Examples<br /><imgsrc=“pic.gif" width="207" height="47" alt=“alt text here" /><br /><imgsrc=pic.gif width=207 height=47 alt=alt text here /><br /><IMG src=“pic.gif" width=207 height="47" alt><br />Copyright © 2010 JTF Associates, Inc.<br />12<br />
  15. 15. New Controls<br />Drag-and-drop<br />Editable Areas<br />Geolocation (not really HTML5)<br />Client-side Storage (session, local, database)<br />Copyright © 2010 JTF Associates, Inc.<br />13<br />
  16. 16. Some Important Changes<br />No attributes on <body><br />Can link block level elements (of content)<br />Be sure to set a to use { display: block; }<br />Create anchors by adding id to tag:<br /><h1 id=“welcome”>Welcome!</h1> NOT<br /><h1><a name=“welcome”>Welcome!</a></h1><br />Copyright © 2010 JTF Associates, Inc.<br />14<br />
  17. 17. Browser Compatibility and Support<br />Copyright © 2010 JTF Associates, Inc.<br />15<br />
  18. 18. Browser Compatibility<br />Opera 10.1<br />Safari 4<br />Chrome 4<br />FF 3.6<br />IE6/IE7/IE8: Needs script to define elements<br />Shiv script available<br />Some pages still won’t work.<br />When Can I Use… http://a.deveria.com/caniuse/<br />Copyright © 2010 JTF Associates, Inc.<br />16<br />Lots of support for many elements<br />
  19. 19. Conversion Issues<br />Copyright © 2010 JTF Associates, Inc.<br />17<br />
  20. 20. Planning the Process<br />Decide which syntax you will use.<br />Add new DOCTYPE.<br />Reduce content in <head> (see PDF).<br />Remove all presentation tags and attributes, and replace with CSS.<br />Remove all table tags and replace with structural tags.<br />If necessary, learn HTML4, CSS, and semantics.<br />Copyright © 2010 JTF Associates, Inc.<br />18<br />
  21. 21. Here’s What You Need to Know<br />Adding the new HTML 5 DOCTYPE makes the page HTML 5.<br />Google now uses HTML 5.<br />You can use many of the new elements and attributes now.<br />Obsolete elements will still work. However, the page won’t be valid HTML 5.<br />See PDF – page 1 for list.<br />Copyright © 2010 JTF Associates, Inc.<br />19<br />
  22. 22. Demos<br />Copyright © 2010 JTF Associates, Inc.<br />20<br />
  23. 23. Copyright © 2010 JTF Associates, Inc.<br />
  24. 24. Copyright © 2010 JTF Associates, Inc.<br />24<br />
  25. 25. Copyright © 2010 JTF Associates, Inc.<br />
  26. 26. Copyright © 2010 JTF Associates, Inc.<br />26<br />
  27. 27. Copyright © 2010 JTF Associates, Inc.<br />
  28. 28. Copyright © 2010 JTF Associates, Inc.<br />28<br />
  29. 29. WritersUA Samples<br />Visit http://jtfassociates.com/wua2010 for sample HTML files.<br />Copyright © 2010 JTF Associates, Inc.<br />24<br />

×