Pratical HTML5
•
7 j'aime•1,212 vues
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.
Recommandé
Contenu connexe
Tendances
Tendances (16)
En vedette
Similaire à Pratical HTML5
Similaire à Pratical HTML5 (20)
Dernier
Dernier (20)
Pratical HTML5
- 1. PracticalHTML . Leon Poole @creativeworld 5
- 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 2004 Estimated that HTML5 will reach the W3C Candidate recommendation stage during 2012 Supported 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 Complicated Seriously, who remembers all of this? HTML5: <!DOCTYPE html> Very short, easy to remember No Document Type Definition Simple!
- 5. Basic Page Structure Common HTML 4 Structure HTML5 Structure Images 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> Vs preferred
- 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