HTML5 and CSS3

with(json) { harwig }

Located in Reston, VA

You can start to use many parts of HTML5 today.


  1. HTML4
  2. XHTML 1.0
  3. XHTML 1.1
  4. WhatWG formed
    • Backwards compatibility
    • Well-defined error handling
    • Users should not be exposed to authoring errors
    • Practical use: "Paving the Cow paths"
    • Scripting is here to stay
    • Device-specific profiling should be avoided
    • Open Process
    Web Applications 1.0 Draft
  5. W3C+WhatWG
  6. HTML5 WD
  7. HTML5 CR
  8. HTML5 PR

But Wait!

Despite the hype, the HTML5 specification isn't yet ready due to interoperability issuesPhilippe Le Hegaret, W3C (Oct 2010)
Thanks again W3CDion Almaer

HTML5 should not be considered as a whole. You should cherry pick the technology that suits the solution to your problem.Remy Sharp, author Introducing HTML5


      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

      <html xmlns="" xml:lang="en" lang="en">

      <!DOCTYPE html>

      <html lang="en">

New Structure Elements

Form Support

<input name="q" required>
<input name="q" autofocus>
<input name="q" type="search" placeholder="Search...">
<input type="range" min="0" max="10" value="6">
<input type="number" min="0" max="10" step="2" value="6">

other types

  • email
  • url
  • color
  • tel
  • date
  • month
  • week
  • time
State of HTML5 forms (


Browser Support

HTML5 Browser Test HTML5 Readiness

What about CSS3?

I Hate Images in User Interfaces

1x300px gradient images must die

Non-semantic DOM elements

    1 <table id="ext-comp-1007" cellspacing="0" class="x-btn x-btn-noicon x-btn-over" style="width: 75px; ">
    2     <tbody class="x-btn-small x-btn-icon-small-left">
    3     <tr>
    4       <td class="x-btn-tl"><i>&nbsp;</i></td>
    5       <td class="x-btn-tc"></td>
    6       <td class="x-btn-tr"><i>&nbsp;</i></td>
    7     </tr>
    8     <tr>
    9       <td class="x-btn-ml"><i>&nbsp;</i></td>
   10       <td class="x-btn-mc">
   11         <em class="" unselectable="on">
   12           <button type="button" id="ext-gen39" class=" x-btn-text">Close</button>
   13         </em>
   14       </td>
   15       <td class="x-btn-mr"><i>&nbsp;</i></td>
   16     </tr>
   17     <tr>
   18       <td class="x-btn-bl"><i>&nbsp;</i></td>
   19       <td class="x-btn-bc"></td>
   20       <td class="x-btn-br"><i>&nbsp;</i></td>
   21     </tr>
   22     </tbody>
   23 </table>

Ext JS 4.0 Preview

      <div id="button-1099" 
           class="x-btn x-btn-default x-btn-default-small (4 more classes...)" 
        <em id="ext-gen1194">
          <button type="button" role="button" id="ext-gen1193">
            <em id="ext-gen1194">Button</em>