I have been keen to take a look at html 5 and I thought I would have a go.  Google have recently released an os based on it, and Microsoft are promising that Internet Explorer will (mostly) support it.

From my initial view it looks really sensible.  I hope that the browsers can get together and thrash out a solution to the video tag – it would save everyone from having to install flash, or worse still silverlight.

1) Embed other XML

HTML 5 allows for MathML and SVG elements to be used inside a document

2) New Tags

• section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
  this confuses me a bit – but it seems to be to define an area of the page as a section.
  
• article represents an independent piece of content of a document, such as a blog entry or newspaper article.
  On the blog home page (like this one) each blog entry would be wrapped in a <article></article> tag.  It’s likely to be well implemented by blog engines, and cms systems. Particularly if Google news will syndicate your content because its in an article tag
• aside represents a piece of content that is only slightly related to the rest of the page.
  This is for off-topic content. Great for search engines – but I can’t see many people using this too much unless they’re really geeky
• hgroup represents the header of a section
  Strangely named but I guess quite useful if you are keen to structure your pages perfectly.  Really useful for SEO and search engines.
• header represents a group of introductory or navigational aids.
  Similar sounding to head, heading is for what always seems to get put in “<div class=’head’>”.  Really useful for SEO and search engines.
• footer represents a footer for a section and can contain information about the author, copyright information, et cetera.
  The same as header, but with the footer.  Really useful for SEO and search engines.
• nav represents a section of the document intended for navigation.
  The same as header and footer but for the navigation.
• dialog can be used to mark up a conversation like this:

  <dialog>
   <dt> Sir if you were my husband I'd poison your tea
   <dd> Lady, if you were my wife I would drink it
  </dialog>

• figure can be used to associate a caption together with some embedded content, such as a graphic or video:

  <figure>
   <video src="paris_hilton_vid"></video>
   <legend>un-named hotel heiress in video shame</legend>
  </figure>
  This wont hurt SEO, or Talking Browsers, and it seems to offer some nice possibilities

• video and audio for multimedia content.
  Implementation of this is likely to be very hit and miss. Every browser seems really keen to do it absolutely differently
• embed is used for plugin content.
• mark represents a run of marked text.
  This is really for search results snippets where the word found is highlighted. Now the mark tag can be used
• progress represents a completion of a task, such as downloading or when performing a series of expensive operations.
  Self explanatory, but useful.  Should not be confused with things that require the meter tag.
• meter represents a measurement, such as disk usage.
  Nice – this will help (support:  http://html5doctor.com/measure-up-with-the-meter-tag/)

• time represents a date and/or time.
  Another nice addition, works on the locale of the browser
• ruby, rt and rp allow for marking up ruby annotations.
  Meh
• canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
• command represents a command the user can invoke.
  The <command> tag defines a command button, like a radiobutton, a checkbox, or a button. The command element must be inside a menu element. If not, it will not be displayed.

• details represents additional information or controls which the user can obtain on demand.
• datalist together with the a new list attribute for input can be used to make comboboxes:

  <input list="browsers">
  <datalist id="browsers">
   <option value="Safari">
   <option value="Firefox">
  </datalist>

• keygen represents control for key pair generation.
  Seems to allow for massively complicated key pair generation. I can’t think of a example use – but I’m sure there is a fabulous one.
• output represents some type of output, such as from a calculation done through scripting.

3) New Input Types

There are mostly cool, and there are some nice hooks that you can add in with javascript (setCustomValidity).  I could write a book on these – but for the most part I’m happy to suggest using your heads and reading the documentation.

• tel
  for entering telephone numbers
• search
  a synonym for text, useful for the browser to keep search results, but not other fields
• url
  a validated field for urls
• email
  a validated entry field for email addresses
• datetime
a whole host of date/time pickers (nice)
• date
• month
• week
• time
• datetime-local
• number
  lets you choose a number
• range
lets you pick a number (floating point) between the minimum and maximum values
• color
  a colour picker, nice

4) Additional Attributes

input required=true|false

this is a bonus – a really sensible and useful addition.

Summary

As you can see there are a host of nice new features. Some of the new tags you could start using now (largely they will be ignored by older browsers). Others will require browser tweaking to get them to work successfully. But I think all-round its a nice standard.

Joel