HTML5 – Useful Links for Developers

As 2013 the HTML5 standard is still actively being developed and revised, and it is not fully supported by any Web browser. There are a number of tools freely available to HTML5 developers that help enhance browser support for HTML5 and that add to the speed and ease of developing a site.

In this article I will review some of the major tools, frameworks, libraries, and online resources that anyone working with HTML5 will find useful. Also make sure to read more about HTML5 in my series of articles.

Development Tools and Frameworks:

LiveWeave.com is an online HTML5 editor that allows you to prototype your code in real time. You can also choose to include various libraries such as JQuery or Modernizr. This is certainly the most useful HTML5 prototyping tool I have seen that will hopefully save you a lot of time.

http://liveweave.com/

Initializr will generate an HTML5 template for you based on your project’s requirements. Just click the components you want to be part of your project and the site does the set-up work for you. It’s just that easy.

http://www.initializr.com/

99Lime.com HTML KickStart lets you quickly put together the core components of a new HTML5 Web site. You can piece together the CSS, HTML5, and JQuery parts that you need using their Web UI. Simple to use, and great for saving time when putting together a new site.

http://www.99lime.com/

HTML5Test.com – To check your browser’s score for how well it supports the HTML5 standard, browse to html5test.com. In addition to an overall score out of 500 this test also shows a break-down of what parts of the HTML5 standard are supported and what parts aren’t.

http://html5test.com/

Development Libraries and Components

HTML5 Shiv is used to enable styling of some HTML5 elements in older versions of Internet Explorer. Note that if you are using Modernizr already then you do not need to separately include HTML5 Shiv since by default it is contained in the Modernizr package (as of Modernizr version 1.5). Here is a link to the online version of HTML5 Shiv that you can directly reference in your code without downloading a package:

http://html5shiv.googlecode.com/svn/trunk/html5.js

Or more specifically, here is the markup for including HTML5 Shiv for versions of IE 9 and below:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Modernizr detects your browser’s capabilities on a feature-by-feature basis, so using it to tailor your code gives you an fine level of granularity. If you are testing a page you’ll find it easiest to link to a Web version rather than downloading and referencing the library on your local machine. Here is a Web link to version 1.5.0 of Modernizr:

http://cachedcommons.org/cache/modernizr/1.5.0/javascripts/modernizr.js

JQuery and JQuery-UI are the most used JavaScript libraries when it comes to either making up for browser deficiencies, or providing JavaScript functionality beyond that of default HTML5. Here are the online versions of the JQuery and JQuery-UI libraries:

<script src=”http://code.jquery.com/jquery-1.9.1.js“></script>
<script src=”http://code.jquery.com/ui/1.10.2/jquery-ui.js“></script>

HTML5 Examples, Tutorials, and Latest News

The W3C HTML5 Specification is useful to check for HTML5 features. This is a link to the 5th major version (HTML 5.1). The HTML5 is still a work in progress and is not uniformly supported in each browser and browser version, but this is a reference that goes a long way into showing where the standard is expected to go.

http://www.w3.org/html/wg/drafts/html/master/Overview.html

CoreServlets.com provides detailed working samples, explanations, and code for each of the new HTML5 input types and attributes. You can see what each types will render as in your browser and what pre-HTML5 browsers will show.

http://www.coreservlets.com/html5-tutorial/input-types.html

Two useful sites for HTML5 tutorials & news are HTML5 Bookmarks and HTML5 Rocks.

1. HTML5 Bookmarks is a resource site for HTML5 with many articles and examples: http://html5bookmarks.com/
2. Likewise, have a look at HTML5 Rocks for HTML5 articles and examples: http://www.html5rocks.com/en/