Pratical HTML5
7 likes1,227 views
HTML5 is in its 'last call' phase as of February 2010, having started in 2004, with expected recommendations by 2012 and broad support from major browsers, though special measures are needed for older versions of Internet Explorer. The document outlines the simplicity and ease of use of HTML5 compared to XHTML 1.0, emphasizing short doctype declaration and practical examples of HTML5 markup in a blog context. The author expresses enthusiasm for HTML5's potential impact on web development while also showing interest in the advancements of CSS3.
![HTML5 has relatively good browser support, except for one...A little JavaScript will help IE recognise new HTML5 elements...<!--[if gte IE 6]>document.createElement('header');document.createElement('footer');document.createElement('section');document.createElement('aside');document.createElement('nav');document.createElement('article');document.createElement('time');document.createElement('mark');<![endif]-->](https://image.slidesharecdn.com/pratical-html5-100318212730-phpapp01/85/Pratical-HTML5-3-320.jpg)
Pratical HTML5
- 1. PracticalHTML .Leon Poole@creativeworld5
- 2. Where is HTML5 at?HTML5 is in “last call” phase (Feb 2010),but was started by the Web Hypertext Application Technology Working Group (WHATWG) in 2004Estimated that HTML5 will reach the W3C Candidate recommendation stage during 2012Supported in Chrome, Firefox 3.5+, Opera, and Safari 4+, IE8(?) and IE9 already (JavaScript hack required to support earlier IE versions)HTML5 is at “HTML5”, not “HTML 5”
- 3. HTML5 has relatively good browser support, except for one...A little JavaScript will help IE recognise new HTML5 elements...<!--[if gte IE 6]>document.createElement('header');document.createElement('footer');document.createElement('section');document.createElement('aside');document.createElement('nav');document.createElement('article');document.createElement('time');document.createElement('mark');<![endif]-->
- 4. HTML5’s !DOCTYPE!DOCTYPE declares what type of document it is to the browser.. XHTML1.0:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Long and ComplicatedSeriously, who remembers all of this?HTML5:<!DOCTYPE html>Very short, easy to rememberNo Document Type DefinitionSimple!
- 5. Basic Page StructureCommon HTML 4 StructureHTML5 StructureImages courtesy of A List Apart - An introduction to HTML 5 by Lachlan Hunt
- 6. Some Practical Examples of HTML5markup based on my experience in a blog environment.
- 7. HTML5: Nesting of Heading elements<article> <hgroup> <h1>Article title</h1> <h2>Article subtitle</h2> </hgroup> <section> <h3>Section title</h3> <p>Content…</p> <section> <h4>Subsection title</h4> <p>Content…</p> </section> </section></article><article> <hgroup> <h1>Article title</h1> <h2>Article subtitle</h2> </hgroup> <section> <h1>Section title</h1> <p>Content…</p> <section><h1>Subsection title</h1> <p>Content…</p> </section> </section></article>Vspreferred
- 8. HTML5: Blog Comments Markup<body><header><h1>My Website</h1></header><article> <header><h1>My best blog post</h1></header> <section><p>Story you can’t stop reading</p></section> <footer><p>Meta data</p></footer> <article id="comment-2"> <cite>Leon Poole</cite> <time datetime="2010-03-15">March 18th, 2010</time>* <p>Comment goes in here...</p> <footer> <p>You can <a href=“#”>Reply</a> to this comment. </p> </footer></article> <article id=“comment-3”>...etc</article><nav> <a href=“#”>Previous Post</a> <a href=“#”>Next Post</a></nav></article><footer></footer></body>* To my knowledge, Microformats tools don’t parse the time element right now
- 9. HTML5: Navigation Bar<body> <header> <div class=“logo”><imgsrc=“” alt=“”></div> <hgroup> <h1>My Awesome Website</h1> <h2>With an dually awesome slogan</h2> </hgroup> </header> <nav> <ul> <li><a href=“/”>Home</a></li> <li><a href=“/blog/”>Blog</a></li> </ul> </nav> <article> <header>Practical HTML5</header> <section>LoremIpsum...</section> <footer>Copyright</footer> </article> <footer></footer></body>
- 10. HTML5: Sidebar for a blog<aside> <nav> <h1>My Blogroll</h1> <ul> <li><a href="http://example.com/">Example Blog</a> </ul> </nav> <nav> <h1>Archives</h1> <ol > <li><a href="/march/">March</a> <li><a href="/february/">February</a> </ol> </nav></aside><aside> <h1>Twitter Feed</h1> <blockquote cite="http://twitter.com/creativeworld"> <p>Tweet tweet.</p> </blockquote> </aside>
- 11. Final thoughts...Great in concept.Future of standards-based web development looks bright.Awesome for web and apps developers.Doesn’t change too much for web designers.Wondering how HTML5 will impact on SEO...??I love it... but I’m more excited about CSS3 ;)Thank you!
- 12. Resources & Links:HTML 5 Tag Referencehttp://www.w3schools.com/html5/html5_reference.asp