Pratical HTML5

3,778 views

Published on

Leon Poole from Creative World gives you "Practical HTML5". A short talk that starts with a brief look at where HTML5 is currently, followed by some practical HTML5 markup examples.

This presentation was originally created for a discussion on HTML5 at the Brisbane Web Design meetup group.

Published in: Design, Technology

Pratical HTML5

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

×