HTML5 is a markup language used for structuring and presenting content for the World Wide Web and a core technology of the Internet. In this article I have compiled a list of 25 useful HTML5 tools to simplify and speed up your HTML5 coding, I hope you will find the list handy and useful for your development tasks. Enjoy!
Moqups is a nifty HTML5 App used to create wireframes, mockups or UI concepts, prototypes depending on how you like to call them. They’ve tried to make things simple and fairly intuitive so you can unleash your creativity without any obstacles.
WYSIHTML5 is an open source rich text editor, developed by Xing, that produces non-bloated, valid HTML5 code. The editor doesn’t rely on any JS framework, it is lightweight and loads/works pretty fast. It transforms textarea fields and provides the major stuff including text styles (bold, italic), lists, headers, inserting images or links and coloring the text.
Animatron is an online, simple tool that lets you create stunning HTML5 animations and interactive content right in your browser. It lets you collaborate with other users, import artwork, create custom shapes, draw directly within the tool, and much more.
Use the intuitive Animatron Editor to design and publish movies, banners, and infographics that play everywhere, from desktop browsers to mobile devices. No coding necessary – what you see is what you get!
Need to add a network layer to your HTML5 games for things like automatically resuming play on reconnection or using timers to compensate for network lag? Then be sure to check out Cloak, which uses Node.js and also includes a lobby and room system.
Stitches is an HTML5 sprite sheet generator. Simple drag and drop image files into the space below and click “Generate” to create a sprite sheet and stylesheet. Stitches uses a couple of HTML5 APIs, and it is only currently compatible with the latest versions of Chrome and Firefox. However, it does not work on IE9.
7. Swap Zepto
HTML5 Drag & Swap Zepto Plugin lets you sort lists, grids, and more, swapping one item for another. It’s built using the native HTML5 drag and drop API, can include CSS3 drop animations, and works in most modern browsers.
8. HTML5 Maker
10. HTML5 Please
HTML5 Please is an interactive compatibility chart of HTML5/CSS3 features to find out “in which browsers they are supported (or not)“. Using a smart search bar, it makes it possible to filter the results with browser or device support, type (HTML5 or CSS3 elements/properties) and more.
If you need an HTML5 dashboard for monitoring critical data offsite, thenRazorFlowPHP might be just the solution. It makes it possible for your executives, sales & marketing reps, or field techs to stay updated on what’s happening so they can make better decisions. And of course it’s cross-browser and cross-device compatible.
12. Literally Canvas
Literally Canvas is an open source HTML5 widget, which can be integrated into any page, for enabling users to draw online. It comes with a simple set of tools including draw, erase, color-picker, undo, redo, pan and zoom.
TimeJump lets you add deep links to your HTML5 audio and video podcasts. It’s already being used on some ground-breaking podcasts, including ShopTalk and The ATX Web Show. It was created by Paravel and Chris Coyier.
14. Switch to HTML5
15. HTML5 Test
The HTML5 test score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. Even though the specification isn’t finalized yet, all major browser manufacturers are making sure their browser is ready for the future.
16. HTML5 Reset
17. Create M
18. HTML5 Visual Cheat Sheet
HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by me. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5.
Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. It is based on the principle of using the background-position property to align areas of a sprite image into block elements of a web page.
Brunch is an assembler for HTML5 applications. It‘s agnostic to frameworks, libraries, programming, stylesheet & templating languages and backend technology. It is a lightweight approach to building HTML5 applications with an emphasis on elegance and simplicity.
21. HTML5 Video Voting & Popular Bar
HTML5 Video Voting allows you to gather feedback on your videos. Voting is exquisitely simple. All you do is click on the video and use the spacebar to submit your vote, it will automatically populate the bar graph.
22. HTML5 Demos
23. HTML5 Web Notifications
HTML5 Web Notifications come in two flavors: plain text and HTML. Plain text allows you to customize a couple of parameters, HTML shows any .html file you want as a notification. Notifications are different from regular pop-ups in that they require the user’s permission to be shown. Notice that the request permission dialog only shows after user interaction (e.g. clicking a button). If you’re adding this to a Chrome Extension, just add the ‘notifications’ permission and you’re all set.
Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!
ht5ifv is an extensible (allowing the programmer to define new restrictions beyond those already defined by HTML5) and highly configurable (allows changes to the validation rules defined by HTML5 and the addition of new ones) jQuery plugin which allows validation of the HTML5’s forms while the user is typing.