5 Ways to Embrace HTML5 Today

27 March 2010

Notes from my presentation at DevChatt 2010.

What is HTML5?

What browsers support HTML5?

5 Features Ready to Implement

0: the Doctype

<!doctype HTML>

1: New Elements

1: New Elements — Implementation

h2. 1: New Elements — Sample — chattarati.com

<!DOCTYPE html>
<html>
  <head>
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  </head>
  <body>
    <header>
      <a href="/" title="Chattarati Homepage">Chattarati</a>
      <nav>
        <ul>
          <li><a href="/metro/" title="Metro" class="metro ancestor" rel="metro">Metro</a></li>
        </ul>
      </nav>
    </header>
    <section id="main">
      <article class="hentry">
        <header>
          <h1>School Board Upholds Normal Park's Current Zone</h1>
        </header>
        <footer>By <a href="/author/acollier/" class="author vcard url fn">Aaron Collier</a></footer>
        <p>The debate over Normal Park Museum Magnet's zone came to a head Thursday evening when the</p>
      </article>
    </section>
    <section id="sb">
      <section class="summary-article">
        <h2>Summary</h2>
        <div class="summary">Thursday evening, the Hamilton County School Board voted 6 to 3 to approve</div>
      </section>
    </section>
    <footer id="ft">
      <p class="copyright">©2008-2010 Chattarati.</p>
    </footer>
  </body>
</html>

1: New Attributes — Forms & Inputs

1: New Attributes — Miscellaneous

1: New Attributes — Global

2: Client Side Storage

3: <audio>

<<audio src="file.mp3">

    <embed src="flashplayer.swf"></embed>
</audio>

4: <video>

<video src="file.mp3">
    <embed src="flashplayer.swf"></embed>
</video>

5: New Form Types

5: New Form Types