Hidden HTML5 Tags Every Web Developer Should Know
- Introduction of HTML5 should reduce the usage of external plugins such as Flash.
- The development process using HTML5 needs to be transparent to the public.
- HTML5 should have more Markups so as to completely replace scripting.
- HTML5 should be independent of the device and should have better error handling mechanisms.
Keeping in mind the above rules few interesting set of features were introduced into HTML5 along with the addition of few interesting HTML5 tags which are hidden from most of the web designers. Here is just a glance at the interesting features that have been added to HTML5 along with the list of hidden HTML5 tags .
- HTML5 has introduced new form controls such as Search, Calendar, URL, Date, Email and Time.
- HTML5 provides support for local storage.
- HTML5 has introduced a new tag namely <Canvas> which is of great use in 2D drawing.
- You have several content specific elements such as <section>, <article>, <header>, <nav> <footer> and lots more.
- HTML5 as well provides you the privilege for Media Playback with the use of <Audio> and <Video> HTML5 tags.
Here is the list of Hidden HTMl5 Tags that will make your life easier when coding:
1) <canvas> HTML5 Tag
This HTML5 tag will provide you a bitmapped surface to work with something similar to what you will be suing with GDI+ or the .NET image object. Despite the fact that Canvas is not that perfect it is yet considered a great way of building graphs and charts which have at all times been the weak drop in HTML. You can as well create custom graphics with the <Canvas> tag by replicating the layers with the use of multiple canvas objects piled on top of each other.
2) <figcaption> and <figure> Tag
The <figure> HTML5 tag is a container for the content specifically for pictures but it can be used for anything not just images. <figcaption> is a HTML5 tag that is used inside the <figure> tag for providing a subtitle or caption to the contents that are contained in the <figure> tag. For instance say you might want to use 4 images that indicate the sales growth chart inside the <figure> tag and the <fig caption> tag will have text embedded like “Yearly Sales Growth 2000-2004. The pictures will display next to each other and the text inside the <fig caption> tag will be running below all the four.
3) <datalist> Tag
4) <Meter> and <Progress> Tags
These are the two HTML5 tags which are similar and will look alike on the screen in most of the cases but they do have their own different semantic meanings. The <meter> HTML5 tag is used for measurements and gauges of value such as quantity used thermometers and lots more whereas the <progress> HTML5 tag is used to indicate the completion of a task or to show how much it has been completed. This tag as well has an indeterminate mode wherein if there is something whose duration is not known then in such situations indeterminate mode is used for example searching a database.
5) <details> Tag