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