Slides from my presentation via Slideshare

5 Ways to Embrace HTML5 Today

Notes from my presentation at DevChatt 2010.

What is HTML5?

  • HTML5 is the next major revision of the HTML spec.
  • It is currently in “Last Call” phase at the WHATWG.
  • It was written both to define new features and ratify current behavior.
  • It is scheduled to be a “Proposed Recommendation” in 2022.

What browsers support HTML5?

  • All of them. Sort of.
  • Most of the proposed features can be implemented today through either native browser support or a combination of CSS and JavaScript.

5 Features Ready to Implement

  • New elements (tags) and attributes
  • Client side storage
  • <audio> and <video>
  • Geolocation
  • New form types

0: the Doctype

<!doctype HTML>

1: New Elements

  • section
  • article
  • aside
  • hgroup
  • header
  • footer
  • nav
  • figure
  • figcaption
  • video
  • audio
  • embed
  • mark
  • progress
  • meter
  • time
  • ruby
  • rt
  • rp
  • canvas
  • command
  • details
  • datalist
  • keygen
  • output
  • dialog

1: New Elements — Implementation

  • Add this <script> tag just after <head>:
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  • Add this line to the top of your CSS file:
section, article, aside, header, footer, nav, figure, dialog { display: block; }
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">&copy;2008-2010 Chattarati.</p>
    </footer>
  </body>
</html>

1: New Attributes — Forms & Inputs

  • autofocus
  • form
  • required
  • autocomplete, min, max, multiple, pattern, step
  • novalidate

1: New Attributes — Miscellaneous

1: New Attributes — Global

2: Client Side Storage

3: <audio>

* Native support for audio file playback with a full JavaScript API for controls * Go full native (http://bit.ly/awkhmZ) * Fallback with 
<audio src=”file.mp3”>

    <embed src=”flashplayer.swf”></embed>
</audio>
* Or, get around the format war with http://bit.ly/bwny0J

4: <video>

* Native support for video file playback with a full JavaScript API for controls * Go full native (http://bit.ly/cdmRVx) * Fallback with 
<video src=”file.mp3”>
    <embed src=”flashplayer.swf”></embed>
</video>
* Or, get around the format war with http://bit.ly/b3AeXi * See some demos at http://youtube.com/html5 or http://bit.ly/cfI2ML

5: New Form Types

  • search
  • tel
  • url
  • email
  • datetime
  • date
  • month
  • week
  • time
  • datetime-local
  • number
  • range
  • color

5: New Form Types

Comments (0)

  1. There are no comments.

Leave a Comment

Please log in to post a comment.

Summary

Notes and slides from my presentation at DevChatt 2010.

Sharing

About the Author