HTML5 Element Flowchart

An easy-to-understand HTML5 sectioning element flowchart to help you get to grips with some of the new elements in HTML5.

HTML5 still has quite a few myths and misconceptions which lead one to misuse its technology. New semantic elements introduce a better way to define the content of web pages, yet not all of them are very convenient nor straightforward. Do you know exactly when each element should be used (and when not)? Don’t fear, the Doctor is to the rescue.


Is it The <em>Section</em> Or The <em>Aside</em>? An HTML5 Element Flowchart


HTML5 Doctor has created HTML5 Elements Flowchart to illustrate the correct and semantic way of using the new HTML5 elements, such as aside, section or article. Print it out and hang it on the wall for future reference — it will surely come in handy. (ld)


HTML5 Please

Use the new and shiny responsibly.

With all the excitement surrounding new HTML5 and CSS3 features, perhaps we sometimes overlook the problems some of them might introduce as well. HTML5 Please is a resource that offers us the collective knowledge of professional developers who have worked deep in the trenches of HTML5.


A lightweight jQuery plugin that enables expanding and collapsing content.

This Plugin delivers an accessible and lightweight solution to a widely adopted interface pattern (known as progressive disclosure). It includes features like cookie persistence, ARIA compliance, and is designed to be flexible and modular enough to be used in many different’t scenarios.

Source by:


Related articles

23 Useful Online HTML5 Tools

via 23 Useful Online HTML5 Tools – DesignModo.

Are you aware that HTML5 is captivating the web by leaps and bounds? This new language is used for displaying the content on net. One can also add in audios, videos, various fonts, web graphics, drag and drop, animations to make your pages more colorful and informative. It is simply a renewed and much better version of the XHML1 or HTML4 and is also compatible to those versions.

The online sprite tool box compresses your image and puts your image in a sprite. This compression will definitely increase the speed of your images and the time of loading. The 3D sketch tool makes use of HTML Canvas for creating a 3D drawing. This is done by holding down the SPACE bar and then dragging it horizontally with the cursor. Drawing dashed lines and making the drawing to vibrate can be easily done with this. The velocity sketch tool is an exceptional online drawing tool from HTML5. One can make strange web things with this tool. Designers are sure to make some new and creative innovations out of this. The font testing tool is really good when you want to see web pages with a new font keeping. You can do this by taking font.ttf files to the top of the toolbar to appear in the list.

The pattern generator tool is good for web designers to make header backgrounds and pages. There are numerous options for you to choose from and is also easy to use. The X-Ray tool lets you see the particulars of pages of any webpage. This can be done by dragging the bookmark let on their site to your bookmarks. You can investigate by visiting the webpage, then click X-ray book mark and then your desired element. Automation plays well on various mobile or smart phones because it is based totally on HTML5 with no flash used.

The online HTML5 audio maker tool brings in new features of the audio. With this the use of audio power will increase in websites. A similar online HTML5 video maker tool has been launched to increase the use of video for different websites. There are also various powerful animation tools for working online as well as offline. Some of the latest versions of online tools are not well-known to web designers. The above tools are noteworthy for their creativity and informativeness.

New HTML5 Features to Improve your Web Form

New HTML5 Features to Improve your Web Form.

HTML5 introduces numerous new options to create more functional web forms. In this article, I’ll show you exciting new HTML5 features to improve your forms and make them more functional and user-friendly.

Please note that HTML5 is an emerging technique. These examples are not intended for use on a production site. Results may vary according to browser implementation. Please use Chrome or Safari for best results.

Continue reading