Structures, Semantics, Controls, and More: HTML 5 is Here!<br />Char James-Tanny<br />JTF Associates, Inc.<br />http://jtf...
Copyright © 2010 JTF Associates, Inc.<br />
Background<br />Copyright © 2010 JTF Associates, Inc.<br />3<br />
Timeline<br />Copyright © 2010 JTF Associates, Inc.<br />4<br />11/1996 XML<br />(first working draft)<br />1/08 HTML 5<br...
Layout Stages<br />Copyright © 2010 JTF Associates, Inc.<br />5<br />row<br />row<br />column<br />column<br />row<br />ro...
Layout Stages<br />Copyright © 2010 JTF Associates, Inc.<br />5<br />div<br />div<br />div<br />div<br />div<br />1997 DIV...
Layout Stages<br />Copyright © 2010 JTF Associates, Inc.<br />5<br />header<br />nav<br />article<br />aside<br />section<...
HTML 5 Stages<br />2004: Development starts (WHATWG)<br />“…new version of HTML 4, XHTML 1, and DOM Level 2”<br />“…define...
Elements and Attributes<br />Copyright © 2010 JTF Associates, Inc.<br />7<br />
DOCTYPE<br /><!DOCTYPE html><br />Not…<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/...
Structural(Semantic) Elements<br />Copyright © 2010 JTF Associates, Inc.<br />9<br /><header><br /><nav><br /><article><br...
Other New Elements<br />audio and video<br />canvas<br />command<br />datalist<br />figure and figcaption<br />mark<br />t...
Element/Attribute Syntax<br />No rules:<br />Mix case (not case sensitive)<br />Double quotes, single quotes, no quotes<br...
Element/Attribute Examples<br /><imgsrc=“pic.gif" width="207" height="47" alt=“alt text here" /><br /><imgsrc=pic.gif widt...
New Controls<br />Drag-and-drop<br />Editable Areas<br />Geolocation (not really HTML5)<br />Client-side Storage (session,...
Some Important Changes<br />No attributes on <body><br />Can link block level elements (of content)<br />Be sure to set a ...
Browser Compatibility and Support<br />Copyright © 2010 JTF Associates, Inc.<br />15<br />
Browser Compatibility<br />Opera 10.1<br />Safari 4<br />Chrome 4<br />FF 3.6<br />IE6/IE7/IE8: Needs script to define ele...
Conversion Issues<br />Copyright © 2010 JTF Associates, Inc.<br />17<br />
Planning the Process<br />Decide which syntax you will use.<br />Add new DOCTYPE.<br />Reduce content in <head> (see PDF)....
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 />Y...
Demos<br />Copyright © 2010 JTF Associates, Inc.<br />20<br />
Copyright © 2010 JTF Associates, Inc.<br />
Copyright © 2010 JTF Associates, Inc.<br />24<br />
Copyright © 2010 JTF Associates, Inc.<br />
Copyright © 2010 JTF Associates, Inc.<br />26<br />
Copyright © 2010 JTF Associates, Inc.<br />
Copyright © 2010 JTF Associates, Inc.<br />28<br />
WritersUA Samples<br />Visit http://jtfassociates.com/wua2010 for sample HTML files.<br />Copyright © 2010 JTF Associates,...
Upcoming SlideShare
Loading in …5
×

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

1,085 views
997 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,085
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • http://9elements.com/io/projects/html5/canvas/ - FF
  • Internet Engineering Task Force (IETF), Web Hypertext Application Technology Working Group (WHATWG); CSS3 introduced May 2001
  • http://html5doctor.com/aside-revisited/
  • http://html5doctor.com/aside-revisited/
  • http://html5doctor.com/aside-revisited/
  • WHATWG: Web Hypertext Application Technology Working GroupHTML 5 is about moving HTML away from document markup and turning it into a language for web applications.
  • Body: no a, background, bgcolor, link, text, vlink attributes. Other attributes are allowed.
  • http://www.gesteves.com/experiments/starwars.html
  • http://standards-next.org/ - Firefox
  • 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 />

    ×