Getting started with HTML5: Three steps

Even though it is unfinished standard you can and should get started with HTML5 and it is more easy than you may think…

The new Doctype
Is as easy as it can get. Just replace
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">


 with
< !DOCTYPE html>
< html>
and you’re done. Simple.

Video
The format wars are being fought rather publicly these days and the best  part is that it should have little to no effect on you. The < video> tag is able to hold more than one SRC. So your browser can roll down through the options until it finds what will work. Again, simple. The best place to learn more is here: http://camendesign.com/code/video_for_everybody where they have loads of samples such as:

< !– Video for Everybody, Kroc Camen of Camen Design –>
< video width=”640″ height=”360″ controls preload=”none”>
< source src=”__VIDEO__.MP4″  type=”video/mp4″ />
< source src=”__VIDEO__.OGV”  type=”video/ogg” />
< object width=”640″ height=”384″ type=”application/x-shockwave-flash” data=”__FLASH__.SWF”>
< param name=”movie” value=”__FLASH__.SWF” />
< param name=”flashvars” value=”image=__POSTER__.JPG&file=__VIDEO__.MP4″ />
< img src=”__VIDEO__.JPG” width=”640″ height=”360″ alt=”__TITLE__”
    title=”No video playback capabilities, please download the video below” />
< /object>
< /video>
< p> < strong>Download Video:
Closed Format: < a href=”__VIDEO__.MP4″>”MP4″
Open Format: < a href=”__VIDEO__.OGV”>”OGG”
< /p>

Next up, smarter forms.
Weary of validating if that really is an email address or proper URL in that field? Well now the effort is in the lap of the browser. Again, they are really easy to implement. Examples would be

Email: < input type=”email”>
URL: < input type=”url”>
Number: < input type=”number”>
Phone: < input type=”tel”>
Color picker: < input type=”color”>

Slider: < input type=”range” min=”0″ max=”10″ step=”2″ value=”5″>
etc.

Simple, no? Failure is graceful too as the fall back is to text.

Placeholder text for any of these is just as easy!

< input type=”email” placeholder=”Your email address”>

And again, the browser does the work by responding to the cursor by clearing the field automatically. 

And even better! If you need to make it a required field just add “required.”

< input type=”email” placeholder=”Your email address” required>

What if your requirements are not listed? You can build / define your own. For example if you need a credit card field – which would consist of a string of numbers ranging from 13 to 16. Your field would contain this:

 pattern=”[0-9]{13,16}”>

Needless to say there is an awful lot more such as the canvas tag and all of its potential badness and goodness but this should get you started! If you are interested in the Canvas tag there is a good cheat sheet here: http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html