Wednesday, January 02, 2008

Start Using HTML 5 Now! (Sorta)

So you can't start using <section> and <header> yet. But that doesn't mean you can't start thinking like that.

What the HTML specs are really about is standards, and standards are just agreed upon practices. So if more people start using classes this way in preperation for html5 than we'll be halfway there.

Use HTML5 Semantics for HTML4

Look at the spec and if make sure you're using your tags like HTML5 suggests. Particularly b, i, em, strong, address, blockquote, dl, small.

HTML5 Elements

  • <section><header><footer> -> <div class="section"><div class="header"><div class="footer"> Arguably use <h1><h2><h3> instead of div
  • <nav> -> <div class="nav">
  • <article> -> <div class="article">
  • <aside> -> <div class="aside">
  • <dialog> -> <dl class="dialog">
  • <mark> -> <span class="mark">
  • <date/><time/><datetime/> -> Use Microformats datetime-design-pattern <abbr class="datetime data-1998-03-12T08:30:00-05:00">12 March 1998 from 8:30am EST</abbr>
  • <progress/> -> <span class="progress"><span class="value">0</span>/<span class="max">10</span></span>
  • <meter/> -> Similar to <progress/>. can also add <span class="min"/> and <span class="optimum"/>
  • <var/> -> <i class="var">n</i>.
  • <samp/> -> <kbd class="samp">sample text</kbd>
  • <figure><legend> -> <div class="figure"><em class="legend">

Validate against HTML5

If you want to feel a little better about this choice you can validate against HTML5.

Microformats

While this doesn't really have much to do with HTML5, it is another way you can standardize your practices. There's lots of services that look for microformats so there's no reason not to learn and use them. They'll likely only get more important as time goes on.

Further Reading and References