What's new in HTML 5
The new features:
- <video> and <audio> tags for media playback (say goodbye to Flash players);
- structural tags <article>, <section>, <nav>, <aside>, and <footer> (used instead of <div class="section"> and <div id="footer">; the benefits are improved recognition of the page elements by search engines and screen readers);
- new control types for web forms (email and URL fields, color and date picker, spinbox, slider, progress bar, meter, and key pair generator);
- client-side form validation: required fields, regular expression constraints, minimal and maximum values (previously was done with JavaScript or AJAX);
- placeholder text and setting focus (JavaScript was used for this purpose, and it often was buggy);
- <canvas> tag for 2D drawing with JavaScript;
- <menu> tag for creating hierarchical menus, toolbars, and context menus;
- client-side storage accessible from JavaScript;
- Geolocation API for tracking user's location from GPS or Wi-Fi data (test in your browser; only Firefox works now);
- standardized attributes for drag-and-drop, WYSIWYG editing, and spell checking;
- simplified <!doctype html> and <meta charset="..."> tags.
Showcase examples
- SketchPad. A drawing web app using HTML 5 canvas (no Flash required).
- Vaullt. HTML 5 <video> showcase. See also page source (<nav>, <aside>, and <footer> are used for structural markup).
- Games using HTML 5 canvas. A Doom-style shooter and a 3D tetris.
- LOGO interpreter in your browser (using <canvas>).
References and tutorials
- Web Design Checklist. HTML5 and CSS3 support in different browsers. Also in your current browser (scroll down one screen on their site).
- Can I use: compatibility tables for HTML5/CSS3 support in desktop and mobile browsers. They show where can you use a particular HTML5 feature.
- The HTML5 test. Check how well does your browser support HTML5.
- The official standard. See also a shorter version for web authors, another shorter version, and a non-normative document on markup.
- New tags, attributes, and events.
- Wikipedia article on HTML 5.
- WTF is HTML5 (infographic).
- Dive into HTML5 by Mark Pilgrim (e-book).
- HTML5 Doctor, helping you implement HTML5 today (blog).
- HTML5 presentation: new JavaScript APIs, HTML5 tags, CSS5 selectors and attributes. The site works only in Google Chrome :(
Leave your comment