Tips, Tricks and Tools You Will Need to Start Using HTML5 Today
HTML5 has been a really hot topic in web development. With the support of most modern browsers available (Safari, chrome, firefox, IE10 and mobile devices), even though the specification has not fully completed yet, but many people have already adopted it as the main technology for all the web development projects. Online giant websites such as Google, facebook, twitter and youtube, they are all built in HTML5!
For me, the most exciting features of HTML5 are the canvas and the robust form capabilities. Canvas experiment can be seen all over the places (not IE, better with Chrome) but for the form elements, they aren't well supported yet. However, as a late adopter, I can see now is the time to pick up HTML5 and start to update myself with the latest implementation of the specifications.
So, I made this post, for myself as a research and for you all who want to learn it as well. I will make a second series about HTML5 next week about references and tutorials. Stay tuned!
HTML5 Support Charts
Before you start, you might want to know the supported feature by most modern browser as well as mobile platform too.
Enable HTML5 tags!
- HTML5Shiv: This script makes IE to recognise and style the HTML5 elements.
- HTML5 Enabler: Similar to HTML5Shiv, HTML5 Enabler gets IE to acknowledge the new elements in HTML5.
- Modernizr: Modernrizr allows us to take the advantage of the new capabilities of HTML5 and CSS3.
- HTML5 Reset: This one is something different from the rest. It comes with folder structure and files ready for you to start a new project. For HTML5 and CSS3 support, it uses modernizr.
HTML5 Video player. You get consistent look between browsers. WIth forced fallback to flash features, it will work in all browsers including IE6 and mobile devices.
- AudioJSHTML Audio player. audio.js uses html5 audio element and it has the same main features like VideoJS - consistent layout and fallback to flash if HTML5 is not supported.
- HTML5WidgetImplements a subset of the HTML5 Forms module, including calendars, colour swatches, sliding widgets, client side validation and more.
- Webforms2HTMl5 Form Attribute support eg pattern, required, autofocus.
- LimeJSLimeJS is a HTML5 game framework for building fast, native-experience games for all modern touchscreens and desktop browsers.
- FlexieJSNot really about HTML5, it's the support for the awesome CSS3 Flexible Box Model.
Also, there are a few HTML5 tools available online to speed up the pace to develop HTML5 websites. I have found a few HTMl5 cheatsheet and online reference as well.
- HTML5 BoilerplateHTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site. You get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash.
- Switch to HTML5Useful online tool that generates the HTML5 document structure according to your preference.
- InitializrInitializr is an HTML5 templates generator to help you getting started with an HTML5 project. It is built on HTML5 Boilerplate above.
- HTML5 Visual Cheatsheet
- HTML5 Canvas Cheatsheet
- HTML5 PocketBook
One More Thing...
You can keep track of HTML5 update via this link
And, HTML5 websites inspiration. This HTML gallery consists all the websites made with HTML5.
Next week, we will be talking about HTML5 tutorials and references online. Stay tuned!