HTML5: An introduction to new

The world of the web, in terms of language, has for years been stranded on the old HTML 4, active since 1999, as Wikipedia reports. Finally something has made it more or less standardized modern browsers have begun to support the new HTML5 (first draft published by the W3C on 22 gennaro 2008 still lacks many parts). The latest document on the website whatwg.org.

What's new in this language? Mainly to cover some gaps "operational" with new tags aimed at usability and semantics. Beware, though: the HTML 5, as the W3C is still in draft stage (draft).


Compatible browsers

All new generation browser support HTML 5: Chrome, Firefox 3.5, Opera and Safari. Oops I forgot someone? No, IE does not support the HTML 5, evidently expecting that train is called de jure standards ...

For the record, I publicly browser usage statistics, updated in August 2009, source W3Schools:

HTML5


You can see that the family is the second IE to Firefox!


New tags
Let's start the show the new doctype, finally with a form that requires no memory and even reinforced the violent copy paste. In fact it is simple:



The new tags are divided into Layout, Multimedia, DHTML and other tags.



HTML 5 tag Layout

* Article: the basic content of the page
* Aside: the extra content
* Figures: additional content that needs a note
* Footer: the foot of the page
* Header: the top of the page
* Navigation: Section Navigation
* Section: definition of sections

The use of these layouts can then call them tags "name" in css. For example, if we just redefine the LI tags on the menu navigation program within
Enter a date: <input name="day" required="required" title="Use format yyyy-mm-dd" type="date" />


But not enough, also supports the validation expressions Regular Expression (reg exp): fantastic. See how valid U.S. zip code:


Enter a U.S. ZIP Code or Canadian Postal Code:

<input name="postcode" pattern="([0-9] (5) (- [0-9] (4 })?)|([ AZ] [0-9] [AZ] \ s + [0-9] [AZ] [0-9]) " required="required" title=" U.S.: 99999-1234; Canadian: A1B 2C3 " type=" text " />

Not bad right? But not everything is possible even to determine the min and max for a numeric field. But for reference, I refer you complete the definition of inputs, which are explained attributes autocomplete, list, required, patterns, min, max, step, placeholder, ...


SVG Support

SVG stands for Scalable Vector Graphics, a definition now old, never used, vector images for the web. Finally you can define a nice circle in this way:



Without necessarily using a GIF: Look what a beautiful kitten!


Canvas

We have already spoken before but it deserves some more line. The new tag can, via javascript, onfly geometric shapes to create and interact with them. For example to create a circle we can write:

var canvas =
document.getElementById ("simpleCanvas");
if (canvas.getContext) (
var ctx = canvas.getContext ("2d");
ctx.beginPath () / / The Circle
ctx.fillStyle = "# ff0000";
ctx.arc (50, 50, 30, 0, 2 * Math.PI, true);
ctx.closePath ();
ctx.fill ();
ctx.save ();