Discover HTML5 and CSS3 (JavaScript come too) - Part 1

I want to start a chain of posts about the new features and how to use them in HTML5 and CSS3. You probably have heard about it, but maybe didn't read so much. These two elements are web standards for developers and they have arrived to replace (X)HTML 4.01 and CSS 2.1. Here the chapters of this course:

• Part 1: Introduction.
• Part 2: Document scheme, new tags and style.
• Part 3: Forms, modernizr library and new input types/attributes.
• Part 4: Canvas with examples.
• Part 5: CSS3 (I).
• Part 6: CSS3 (II).

Still a beta, HTML5 and CSS3 have some new features you should know:

• HTML5
• New tags to represent some content in you web.
• Delete tags without meaning because of CSS.
• New elements to create animations or play sound or video without addins (Flash, Silverlight,...)
• Form structure improvement and native validation
• ...
• CSS3
• New selectors
• Advanced design: round corners, gradients, multiple background images,...
• HSL colour and oppacity
• Fonts and WOFF format
• Transitions, transformations and animations

Anyway, in the middle of these two guys is JavaScript. We will use it like a tool to work with all these new features and it will appear for sure in these new posts.

Compatibility with all web explorer is very important. Not all of them can use HTML5 and the JavaScript developed, this is why I use to add comments in my scripts to tell the browser not to read this or that, see example below lines 2 and 6:

If an old browser which can't understand JS starts reading this, it will not recognize the word <script> and will be ignored. Then the HTML comment comes "<!--" and avoid all until it find "< /script >"; same for -->. Anyway if a new browser reads the script, it will recognize the "< script >" tag and it will ignore the "<!--" inside of it.</script>