HTML5 new elements details, time, address, mark, progressbar and meter

Hello, If you haven’t already then you may want to read my previous post that highlights some popular HTML5 tags. Link to that post is http://jaspreetchahal.org/html5-new-elements-to-define-page-layout/This post is continuation to the previous post and we will touch base on a few more elements and I will tell you which element are no longer part of HTML5 before we jump onto other topics. Ok so lets first of check which elements made their way out

  1.  is gone,  Instead use
  2.  is gone,  Instead use
  3.  is gone,  Instead use CSS styling
  4.  is gone,  Instead use CSS style text-align:center
  5. , and <frameset></strong> were a nuisance and they are dead now, even though you still can use <strong>iFrame</strong></li> <li><strong><font></strong> Old fashioned way to set text font is gone, instead use CSS styles</li> <li><strong><strike></strong> is gone, instead use CSS style <strong>text-decoration:strikethrough or <del></strong></li> <li><strong><tt>, <u> </strong>are dead too. Use CSS styles instead</li> </ol> <p>If you know any other element that are gone please let me know, so that I can update above list. Ok so now that we know that above mentioned elements are gone, so it makes more sense not to use them anymore. let's go ahead and check elements like details, time, address, mark, progressbar and meter To know better lets do another web page that will explain their usage.</p> <h2>The problem: create profile page showing way to use details, time, address, mark, progressbar and meter element</h2> <p>Alright lets build a simple profile page that will show usage of above mentioned tags, We will use them in context.</p> <p>Here is an example with Demo</p> <p></p><!-- Crayon Syntax Highlighter v2.6.6 --> <div id="crayon-541ca5a26b147889077143" class="crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"> <div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><span class="crayon-title"></span> <div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div> <div class="crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"></div> <div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;"> &lt;body class="container"&gt; &lt;header&gt; &lt;img alt="Jaspreet Chahals Blog" src="/images/logo.png" /&gt; &lt;hgroup&gt; &lt;h1&gt;&lt;a href="#"&gt;Jaspreet Chahals Profile&lt;/a&gt;&lt;/h1&gt; &lt;/hgroup&gt; &lt;/header&gt; &lt;address&gt; North of Melbourne &lt;br&gt; 3086 Victoria &lt;br&gt; Australia &lt;/address&gt; &lt;article class="clearfix"&gt; &lt;header&gt; &lt;h1&gt;Enrolment&lt;/h1&gt; &lt;p&gt;Last updated: &lt;time datetime="2012-10-19"&gt;19&lt;sup&gt;th&lt;/sup&gt; October 2012&lt;/time&gt;, Next update: &lt;mark&gt;pending&lt;/mark&gt;&lt;/p&gt; &lt;/header&gt; &lt;h3&gt;Course details&lt;/h3&gt; &lt;section&gt; &lt;details&gt; &lt;summary&gt;Click here to check out the details&lt;/summary&gt; Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. &lt;/details&gt; &lt;/section&gt; &lt;h2&gt;Progress&lt;/h2&gt; &lt;progress value="3" max="10" style="border: 1px solid;"&gt;30% there&lt;/progress&gt; &lt;h2&gt;Drive quota used (30%)&lt;/h2&gt; &lt;meter max="6" value="2"&gt;2 of 6 GB&lt;/meter&gt; &lt;/article&gt; &lt;aside&gt; &lt;h2&gt;Site wide navigation&lt;/h2&gt; &lt;nav&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Meet the team&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt; &lt;/nav&gt; &lt;/aside&gt; &lt;footer class="clearfix"&gt; &lt;small&gt;© Copyright JaspreetChahal.org&lt;/small&gt; &lt;/footer&gt; &lt;/body&gt;</textarea></div> <div class="crayon-main" style=""> <table class="crayon-table"> <tr class="crayon-row"> <td class="crayon-nums " data-settings="show"> <div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-2">2</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-4">4</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-6">6</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-8">8</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-10">10</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-12">12</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-14">14</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-16">16</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-18">18</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-20">20</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-22">22</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-24">24</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-26">26</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-28">28</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-30">30</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-32">32</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-33">33</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-34">34</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-35">35</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-36">36</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-37">37</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-38">38</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-39">39</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-40">40</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-41">41</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b147889077143-42">42</div><div class="crayon-num" data-line="crayon-541ca5a26b147889077143-43">43</div></div> </td> <td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-line" id="crayon-541ca5a26b147889077143-1"><span class="crayon-o">&lt;</span><span class="crayon-e">body </span><span class="crayon-t">class</span><span class="crayon-o">=</span><span class="crayon-s">"container"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">header</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">img </span><span class="crayon-v">alt</span><span class="crayon-o">=</span><span class="crayon-s">"Jaspreet Chahals Blog"</span><span class="crayon-h"> </span><span class="crayon-v">src</span><span class="crayon-o">=</span><span class="crayon-s">"/images/logo.png"</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">hgroup</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">h1</span><span class="crayon-o">&gt;</span><span class="crayon-o">&lt;</span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-v">href</span><span class="crayon-o">=</span><span class="crayon-s">"#"</span><span class="crayon-o">&gt;</span><span class="crayon-e">Jaspreet </span><span class="crayon-e">Chahals </span><span class="crayon-v">Profile</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">a</span><span class="crayon-o">&gt;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">h1</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">hgroup</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">header</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">address</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">North </span><span class="crayon-e">of </span><span class="crayon-v">Melbourne</span><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-v">br</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-cn">3086</span><span class="crayon-h"> </span><span class="crayon-v">Victoria</span><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-v">br</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">Australia</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">address</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">article </span><span class="crayon-t">class</span><span class="crayon-o">=</span><span class="crayon-s">"clearfix"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">header</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">h1</span><span class="crayon-o">&gt;</span><span class="crayon-v">Enrolment</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">h1</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">p</span><span class="crayon-o">&gt;</span><span class="crayon-e">Last </span><span class="crayon-v">updated</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-e">time </span><span class="crayon-v">datetime</span><span class="crayon-o">=</span><span class="crayon-s">"2012-10-19"</span><span class="crayon-o">&gt;</span><span class="crayon-cn">19</span><span class="crayon-o">&lt;</span><span class="crayon-v">sup</span><span class="crayon-o">&gt;</span><span class="crayon-v">th</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">sup</span><span class="crayon-o">&gt;</span><span class="crayon-h"> </span><span class="crayon-i">October</span><span class="crayon-h"> </span><span class="crayon-cn">2012</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">time</span><span class="crayon-o">&gt;</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">Next </span><span class="crayon-v">update</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-v">mark</span><span class="crayon-o">&gt;</span><span class="crayon-v">pending</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">mark</span><span class="crayon-o">&gt;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">p</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">header</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">h3</span><span class="crayon-o">&gt;</span><span class="crayon-e">Course </span><span class="crayon-v">details</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">h3</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">section</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">details</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-v">summary</span><span class="crayon-o">&gt;</span><span class="crayon-e">Click </span><span class="crayon-e">here </span><span class="crayon-st">to</span><span class="crayon-h"> </span><span class="crayon-e">check </span><span class="crayon-e">out </span><span class="crayon-e">the </span><span class="crayon-v">details</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">summary</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-22"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">Lorem </span><span class="crayon-e">ipsum </span><span class="crayon-e">dolor </span><span class="crayon-e">sit </span><span class="crayon-v">amet</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">consetetur </span><span class="crayon-e">sadipscing </span><span class="crayon-v">elitr</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">sed </span><span class="crayon-e">diam </span><span class="crayon-e">nonumy </span><span class="crayon-e">eirmod </span><span class="crayon-e">tempor </span><span class="crayon-e">invidunt </span><span class="crayon-e">ut </span><span class="crayon-e">labore </span><span class="crayon-e">et </span><span class="crayon-e">dolore </span><span class="crayon-e">magna </span><span class="crayon-e">aliquyam </span><span class="crayon-v">erat</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">sed </span><span class="crayon-e">diam </span><span class="crayon-v">voluptua</span><span class="crayon-sy">.</span><span class="crayon-h"> </span><span class="crayon-e">At </span><span class="crayon-e">vero </span><span class="crayon-e">eos </span><span class="crayon-e">et </span><span class="crayon-e">accusam </span><span class="crayon-e">et </span><span class="crayon-e">justo </span><span class="crayon-e">duo </span><span class="crayon-e">dolores </span><span class="crayon-e">et </span><span class="crayon-e">ea </span><span class="crayon-v">rebum</span><span class="crayon-sy">.</span><span class="crayon-h"> </span><span class="crayon-e">Stet </span><span class="crayon-e">clita </span><span class="crayon-e">kasd </span><span class="crayon-v">gubergren</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">no </span><span class="crayon-e">sea </span><span class="crayon-e">takimata </span><span class="crayon-e">sanctus </span><span class="crayon-e">est </span><span class="crayon-e">Lorem </span><span class="crayon-e">ipsum </span><span class="crayon-e">dolor </span><span class="crayon-e">sit </span><span class="crayon-v">amet</span><span class="crayon-sy">.</span><span class="crayon-h"> </span><span class="crayon-e">Lorem </span><span class="crayon-e">ipsum </span><span class="crayon-e">dolor </span><span class="crayon-e">sit </span><span class="crayon-v">amet</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">consetetur </span><span class="crayon-e">sadipscing </span><span class="crayon-v">elitr</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">sed </span><span class="crayon-e">diam </span><span class="crayon-e">nonumy </span><span class="crayon-e">eirmod </span><span class="crayon-e">tempor </span><span class="crayon-e">invidunt </span><span class="crayon-e">ut </span><span class="crayon-e">labore </span><span class="crayon-e">et </span><span class="crayon-e">dolore </span><span class="crayon-e">magna </span><span class="crayon-e">aliquyam </span><span class="crayon-v">erat</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">sed </span><span class="crayon-e">diam </span><span class="crayon-v">voluptua</span><span class="crayon-sy">.</span><span class="crayon-h"> </span><span class="crayon-e">At </span><span class="crayon-e">vero </span><span class="crayon-e">eos </span><span class="crayon-e">et </span><span class="crayon-e">accusam </span><span class="crayon-e">et </span><span class="crayon-e">justo </span><span class="crayon-e">duo </span><span class="crayon-e">dolores </span><span class="crayon-e">et </span><span class="crayon-e">ea </span><span class="crayon-v">rebum</span><span class="crayon-sy">.</span><span class="crayon-h"> </span><span class="crayon-e">Stet </span><span class="crayon-e">clita </span><span class="crayon-e">kasd </span><span class="crayon-v">gubergren</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">no </span><span class="crayon-e">sea </span><span class="crayon-e">takimata </span><span class="crayon-e">sanctus </span><span class="crayon-e">est </span><span class="crayon-e">Lorem </span><span class="crayon-e">ipsum </span><span class="crayon-e">dolor </span><span class="crayon-e">sit </span><span class="crayon-v">amet</span><span class="crayon-sy">.</span><span class="crayon-h"> </span><span class="crayon-e">Lorem </span><span class="crayon-e">ipsum </span><span class="crayon-e">dolor </span><span class="crayon-e">sit </span><span class="crayon-v">amet</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">consetetur </span><span class="crayon-e">sadipscing </span><span class="crayon-v">elitr</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">sed </span><span class="crayon-e">diam </span><span class="crayon-e">nonumy </span><span class="crayon-e">eirmod </span><span class="crayon-e">tempor </span><span class="crayon-e">invidunt </span><span class="crayon-e">ut </span><span class="crayon-e">labore </span><span class="crayon-e">et </span><span class="crayon-e">dolore </span><span class="crayon-e">magna </span><span class="crayon-e">aliquyam </span><span class="crayon-v">erat</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">sed </span><span class="crayon-e">diam </span><span class="crayon-v">voluptua</span><span class="crayon-sy">.</span><span class="crayon-h"> </span><span class="crayon-e">At </span><span class="crayon-e">vero </span><span class="crayon-e">eos </span><span class="crayon-e">et </span><span class="crayon-e">accusam </span><span class="crayon-e">et </span><span class="crayon-e">justo </span><span class="crayon-e">duo </span><span class="crayon-e">dolores </span><span class="crayon-e">et </span><span class="crayon-e">ea </span><span class="crayon-v">rebum</span><span class="crayon-sy">.</span><span class="crayon-h"> </span><span class="crayon-e">Stet </span><span class="crayon-e">clita </span><span class="crayon-e">kasd </span><span class="crayon-v">gubergren</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">no </span><span class="crayon-e">sea </span><span class="crayon-e">takimata </span><span class="crayon-e">sanctus </span><span class="crayon-e">est </span><span class="crayon-e">Lorem </span><span class="crayon-e">ipsum </span><span class="crayon-e">dolor </span><span class="crayon-e">sit </span><span class="crayon-v">amet</span><span class="crayon-sy">.</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-23"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">details</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">section</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">h2</span><span class="crayon-o">&gt;</span><span class="crayon-v">Progress</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">h2</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-26"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">progress </span><span class="crayon-v">value</span><span class="crayon-o">=</span><span class="crayon-s">"3"</span><span class="crayon-h"> </span><span class="crayon-v">max</span><span class="crayon-o">=</span><span class="crayon-s">"10"</span><span class="crayon-h"> </span><span class="crayon-v">style</span><span class="crayon-o">=</span><span class="crayon-s">"border: 1px solid;"</span><span class="crayon-o">&gt;</span><span class="crayon-cn">30</span><span class="crayon-o">%</span><span class="crayon-h"> </span><span class="crayon-v">there</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">progress</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-27"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">h2</span><span class="crayon-o">&gt;</span><span class="crayon-e">Drive </span><span class="crayon-e">quota </span><span class="crayon-e">used</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-cn">30</span><span class="crayon-o">%</span><span class="crayon-sy">)</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">h2</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-28"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">meter </span><span class="crayon-v">max</span><span class="crayon-o">=</span><span class="crayon-s">"6"</span><span class="crayon-h"> </span><span class="crayon-v">value</span><span class="crayon-o">=</span><span class="crayon-s">"2"</span><span class="crayon-o">&gt;</span><span class="crayon-cn">2</span><span class="crayon-h"> </span><span class="crayon-i">of</span><span class="crayon-h"> </span><span class="crayon-cn">6</span><span class="crayon-h"> </span><span class="crayon-v">GB</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">meter</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-29"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">article</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-30"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">aside</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-31"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">h2</span><span class="crayon-o">&gt;</span><span class="crayon-e">Site </span><span class="crayon-e">wide </span><span class="crayon-v">navigation</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">h2</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-32"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">nav</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-33"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-v">ul</span><span class="crayon-o">&gt;</span><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-v">li</span><span class="crayon-o">&gt;</span><span class="crayon-o">&lt;</span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-v">href</span><span class="crayon-o">=</span><span class="crayon-s">"#"</span><span class="crayon-o">&gt;</span><span class="crayon-v">Home</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">a</span><span class="crayon-o">&gt;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">li</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-34"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">li</span><span class="crayon-o">&gt;</span><span class="crayon-o">&lt;</span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-v">href</span><span class="crayon-o">=</span><span class="crayon-s">"#"</span><span class="crayon-o">&gt;</span><span class="crayon-v">About</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">a</span><span class="crayon-o">&gt;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">li</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-35"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">li</span><span class="crayon-o">&gt;</span><span class="crayon-o">&lt;</span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-v">href</span><span class="crayon-o">=</span><span class="crayon-s">"#"</span><span class="crayon-o">&gt;</span><span class="crayon-e">Meet </span><span class="crayon-e">the </span><span class="crayon-v">team</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">a</span><span class="crayon-o">&gt;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">li</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-36"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">li</span><span class="crayon-o">&gt;</span><span class="crayon-o">&lt;</span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-v">href</span><span class="crayon-o">=</span><span class="crayon-s">"#"</span><span class="crayon-o">&gt;</span><span class="crayon-v">News</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">a</span><span class="crayon-o">&gt;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">li</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-37"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">li</span><span class="crayon-o">&gt;</span><span class="crayon-o">&lt;</span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-v">href</span><span class="crayon-o">=</span><span class="crayon-s">"#"</span><span class="crayon-o">&gt;</span><span class="crayon-v">Contact</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">a</span><span class="crayon-o">&gt;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">li</span><span class="crayon-o">&gt;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">ul</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-38"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">nav</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-39"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">aside</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-40"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">footer </span><span class="crayon-t">class</span><span class="crayon-o">=</span><span class="crayon-s">"clearfix"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-41"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">small</span><span class="crayon-o">&gt;</span>©<span class="crayon-h"> </span><span class="crayon-e">Copyright </span><span class="crayon-v">JaspreetChahal</span><span class="crayon-sy">.</span><span class="crayon-v">org</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">small</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b147889077143-42"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">footer</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b147889077143-43"><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">body</span><span class="crayon-o">&gt;</span></div></div></td> </tr> </table> </div> </div> <!-- [Format Time: 0.0376 seconds] --> <p></p> <p>Here is a demo for above code.</p> <h2>Demo</h2> <p>Try it in Chrome, Firefox, Safari or IE10</p> <p><meter> element is not yet implemented in Internet explorer.</p> <p><a href="http://jaspreetchahal.org/examples/html5/html5-new-elements-example-2.html" onclick="_gaq.push(['_trackEvent', 'outbound-article-', 'http://jaspreetchahal.org/examples/html5/html5-new-elements-example-2.html', 'http://jaspreetchahal.org/examples/html5/html5-new-elements-example-2.html']);" >http://jaspreetchahal.org/examples/html5/html5-new-elements-example-2.html</a></p> <div style="margin-bottom: 30px;overflow: hidden;font-size: 11px;font-style: italic;text-align: center;background-color: #F4F4F4;border: 1px solid #DDD;padding: 20px;padding-bottom: 15px;"><script type="text/javascript"><!-- google_ad_client = "ca-pub-1303602453159174"; /* jcorg large rectanlge */ google_ad_slot = "8389632666"; google_ad_width = 336; google_ad_height = 280; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> <p>A bit explanation on new tags</p> <ol> <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-details-element" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-details-element', 'details']);" rel="external nofollow" title="" target="_blank"><strong>details</strong></a><br /> Well! this is such a powerful addition, at the time of writing only Chrome supports<br /> <details> tag. Ask yourself a question, how many time in your web programming career you used javascript to show hide some <strong>details.? </strong>Many times! should be your answer. This new <strong>element </strong>takes care of that. Load the demo in Chrome and you will see exactly what I mean.</li> <li><strong><a href="http://dev.w3.org/html5/spec/the-summary-element.html" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'http://dev.w3.org/html5/spec/the-summary-element.html', 'summary']);" rel="external nofollow" title="" target="_blank">summary</a></strong><br /> The summary element goes hand in hand with details element and show <strong>summary</strong> of whats hidden by <strong>details</strong> element. I used it in our example as a message to user as you can see from our example.</li> <li><strong><a href="http://dev.w3.org/html5/spec/text-level-semantics.html#the-time-element" rel="external nofollow" title="" target="_blank">time<br /> </a></strong><time> element gives an option to add encoded dates and time for machines while the actual date and time can still be shown to user in human readable format. Its more of a HTML5 way for micro formatted information to give something semantic meaning</li> <li><strong><a href="http://www.w3.org/TR/html-markup/address.html" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'http://www.w3.org/TR/html-markup/address.html', 'address']);" rel="external nofollow" title="" target="_blank">address</a><br /> </strong><br /> <address> is more or less again there to give semantic meaning for a section. This element represents contact information.</li> <li><strong><a href="http://dev.w3.org/html5/spec/the-mark-element.html" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'http://dev.w3.org/html5/spec/the-mark-element.html', 'mark']);" rel="external nofollow" title="" target="_blank">mark</a><br /> </strong>mark is used to highlight some text to get attention of user or for references purposes. Basically it indicates a highlight.<strong></strong></li> <li><a href="http://dev.w3.org/html5/spec/the-progress-element.html" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'http://dev.w3.org/html5/spec/the-progress-element.html', 'progressbar']);" rel="external nofollow" title="" target="_blank"><strong>progressbar</strong></a><br /> nor supported in IE9 or below progress bar represent progress of an action. e.g. If you are uploading a file you can use progress bar to show user status of their upload in percentage, bytes left of total, bytes sent of total  etc<strong>. </strong>In our example we used it to show my course progress. possible attributes are<br /> <strong>1.</strong> <em>value</em><br /> <strong>2.</strong> <em>max</em><br /> Currently supported in all major browsers including IE10</li> <li><strong><a href="http://dev.w3.org/html5/spec/the-meter-element.html" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'http://dev.w3.org/html5/spec/the-meter-element.html', 'meter']);" rel="external nofollow" title="" target="_blank">meter</a></strong><br /> <strong><meter></strong> element represents a scalar measurement<strong>. In our example </strong>we used it to represent "Drive quota". A max value should be know and the current value should be within minimum value and maximum value. Possible attributes are<br /> <strong>1.</strong> <em>value : </em>the actual value for the scale. e.g. 1 out of 5 will have value 1. <em> </em><br /> <strong>2.</strong> <em>min: </em>minimum allowed value. If not mentioned then ZERO is assumed.<br /> <strong>3.</strong> <em>max: </em>maximum value, this should be greater than minimum value else minimum value will be used as maximum value.<br /> <strong>4.</strong> <em>low: </em>low part of the value range, this should be less than <em><strong>high</strong></em> value, if <em>low</em> is less than <em>min </em>then <em>low = min</em><br /> <strong>5.</strong> <em>high: </em>high part of the value range, <em>if high > max then high = max</em><br /> <strong>6.</strong> <em>optimum</em> this value needs to be between min and max.<strong>This tag is  not supported in IE yet. </strong></li> </ol> <p>There are few things you can try. New elements are added to give more meaning to the content you write. More you use them more habitual you will become knowing your content better.</p> <p>&nbsp;</p> <p>To know more about the elements I have mentioned in this post you must click on the "<strong>w3 specification links</strong>" that are added to the elements themselves. I think you will learn more that way. Idea of my post is not to explain each and every element in depth but rather focus on how to use them semantically.</p> <p>If you think this post need some more resources links please let me know there are heaps floating around that are good.</p> <p>Once again its a good idea to include this little snippet in all your HTML5 pages to that likes of IE7, IE8, IE9 can understand new elements.</p><!-- Crayon Syntax Highlighter v2.6.6 --> <div id="crayon-541ca5a26b16d475021263" class="crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"> <div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><span class="crayon-title"></span> <div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><span class="crayon-mixed-highlight" title="Contains Mixed Languages"></span><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div> <div class="crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"></div> <div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;"> &lt;!--[if lt IE 9]&gt; &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt; &lt;![endif]--&gt;</textarea></div> <div class="crayon-main" style=""> <table class="crayon-table"> <tr class="crayon-row"> <td class="crayon-nums " data-settings="show"> <div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-541ca5a26b16d475021263-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-541ca5a26b16d475021263-2">2</div><div class="crayon-num" data-line="crayon-541ca5a26b16d475021263-3">3</div></div> </td> <td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-line" id="crayon-541ca5a26b16d475021263-1"><span class="crayon-o">&lt;</span><span class="crayon-o">!</span><span class="crayon-o">--</span><span class="crayon-sy">[</span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-e">lt</span><span class="crayon-h"> </span><span class="crayon-e">IE</span><span class="crayon-h"> </span><span class="crayon-cn">9</span><span class="crayon-sy">]</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-541ca5a26b16d475021263-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"http://html5shiv.googlecode.com/svn/trunk/html5.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line" id="crayon-541ca5a26b16d475021263-3"><span class="crayon-o">&lt;</span><span class="crayon-o">!</span><span class="crayon-sy">[</span><span class="crayon-st">endif</span><span class="crayon-sy">]</span><span class="crayon-o">--</span><span class="crayon-o">&gt;</span></div></div></td> </tr> </table> </div> </div> <!-- [Format Time: 0.0064 seconds] --> <p>You should put all your CSS below above snippet.</p> <p>In the <a href="http://jaspreetchahal.org/html5-handling-browsers/" onclick="_gaq.push(['_trackEvent', 'outbound-article-', 'http://jaspreetchahal.org/html5-handling-browsers/', 'next post']);" >next post</a> in HTML5 category, I will be talking about <strong>browser handling</strong> and good HTML5 resources to kick start your next project.</p> <p>&nbsp;</p> <p>Cheers</p> <div style="margin-bottom: 30px;overflow: hidden;font-size: 11px;font-style: italic;text-align: center;background-color: #F4F4F4;border: 1px solid #DDD;padding: 20px;padding-bottom: 15px;"><script type="text/javascript"><!-- google_ad_client = "ca-pub-1303602453159174"; /* JCOrg Rich */ google_ad_slot = "2622278414"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> <p>&nbsp;</p> <div style="display: none">VN:F [1.9.22_1171]</div><div class="ratingblock "><div class="ratingheader "></div><div class="ratingstars "><div id="article_rater_3904" class="ratepost gdsr-oxygen gdsr-size-16"><div class="starsbar gdsr-size-16"><div class="gdouter gdheight"><div id="gdr_vote_a3904" style="width: 0px;" class="gdinner gdheight"></div><div id="gdr_stars_a3904" class="gdsr_rating_as"><a id="gdsrX3904X5X0XaXarticle_rater_3904Xarticle_loader_3904X10X16" title="5 / 5" class="s5" rel="nofollow"></a><a id="gdsrX3904X4X0XaXarticle_rater_3904Xarticle_loader_3904X10X16" title="4 / 5" class="s4" rel="nofollow"></a><a id="gdsrX3904X3X0XaXarticle_rater_3904Xarticle_loader_3904X10X16" title="3 / 5" class="s3" rel="nofollow"></a><a id="gdsrX3904X2X0XaXarticle_rater_3904Xarticle_loader_3904X10X16" title="2 / 5" class="s2" rel="nofollow"></a><a id="gdsrX3904X1X0XaXarticle_rater_3904Xarticle_loader_3904X10X16" title="1 / 5" class="s1" rel="nofollow"></a></div></div></div></div><div id="article_loader_3904" style="display: none; width: 80px " class="ratingloaderarticle"><div class="loader arrows " style="height: 16px"><div class="loaderinner">please wait...</div></div></div></div><div class="ratingtext "><div id="gdr_text_a3904">Rating: 0.0/<strong>5</strong> (0 votes cast)</div></div></div><div style="display: none">VN:F [1.9.22_1171]</div><div class="thumblock "><div id="gdsr_thumb_3904_a_up" class="gdt-size-16 gdthumb gdup"><a id="gdsrX3904XupXaX25X16XY" class="gdt-starrating" rel="nofollow"></a></div><div id="gdsr_thumb_3904_a_loader_up" style="display: none; width: 16px " class="ratingloader loadup"><div class="loader flower thumb" style="width: 16px; height: 16px;"></div></div><div id="gdsr_thumb_3904_a_dw" class="gdt-size-16 gdthumb gddw"><a id="gdsrX3904XdwXaX25X16XY" class="gdt-starrating" rel="nofollow"></a></div><div id="gdsr_thumb_3904_a_loader_dw" style="display: none; width: 16px " class="ratingloader loaddw"><div class="loader flower thumb" style="width: 16px; height: 16px;"></div></div><div class="ratingtext "><div id="gdsr_thumb_text_3904_a" class="gdt-size-16 gdthumbtext">Rating: <strong>0</strong> (from 0 votes)</div></div><div class="raterclear"></div></div><div class="sharedaddy sd-sharing-enabled"><div class="robots-nocontent sd-block sd-social sd-social-official sd-sharing"><h3 class="sd-title">Share this post with your friends</h3><div class="sd-content"><ul><li class="share-twitter"><div class="twitter_button"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?url=http%3A%2F%2Fjaspreetchahal.org%2Fhtml5-new-elements-details-time-address-mark-progressbar-and-meter%2F&#038;counturl=http%3A%2F%2Fjaspreetchahal.org%2Fhtml5-new-elements-details-time-address-mark-progressbar-and-meter%2F&#038;count=horizontal&#038;text=HTML5%20new%20elements%20details%2C%20time%2C%20address%2C%20mark%2C%20progressbar%20and%20meter%3A" style="width:101px; height:20px;"></iframe></div></li><li class="share-google-plus-1"><div class="googleplus1_button"><div class="g-plus" data-action="share" data-annotation="bubble" data-href="http://jaspreetchahal.org/html5-new-elements-details-time-address-mark-progressbar-and-meter/"></div></div></li><li class="share-facebook"><div class="like_button"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fjaspreetchahal.org%2Fhtml5-new-elements-details-time-address-mark-progressbar-and-meter%2F&amp;layout=button_count&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;height=21&amp;locale=en_US&amp;width=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:96px; height:21px;" allowTransparency="true"></iframe></div></li><li class="share-linkedin"><div class="linkedin_button"><script type="in/share" data-url="http://jaspreetchahal.org/html5-new-elements-details-time-address-mark-progressbar-and-meter/" data-counter="right"></script></div></li><li class="share-end"></li></ul></div></div></div></div><div class="post-meta"><span class="categories">Filed Under: <a href="http://jaspreetchahal.org/category/html5/" rel="category tag">HTML5</a></span> <span class="tags">Tagged With: <a href="http://jaspreetchahal.org/tag/html5-address-tag-example/" rel="tag">HTML5 address tag example</a>, <a href="http://jaspreetchahal.org/tag/html5-deprecated-elements-tags/" rel="tag">HTML5 deprecated elements tags</a>, <a href="http://jaspreetchahal.org/tag/html5-details-tag-example/" rel="tag">HTML5 details tag example</a>, <a href="http://jaspreetchahal.org/tag/html5-meter-tag-example/" rel="tag">HTML5 meter tag example</a>, <a href="http://jaspreetchahal.org/tag/html5-progress-tag-example/" rel="tag">HTML5 progress tag example</a>, <a href="http://jaspreetchahal.org/tag/html5-removed-elements/" rel="tag">HTML5 removed elements</a></span></div></div> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Speak Your Mind <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html5-new-elements-details-time-address-mark-progressbar-and-meter/#respond" style="display:none;">Cancel reply</a></small></h3> <form action="http://jaspreetchahal.org/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate> <p class="comment-form-author"><input id="author" name="author" type="text" value="" size="30" tabindex="1" aria-required="true" /><label for="author">Name</label> <span class="required">*</span></p> <p class="comment-form-email"><input id="email" name="email" type="text" value="" size="30" tabindex="2" aria-required="true" /><label for="email">Email</label> <span class="required">*</span></p> <p class="comment-form-url"><input id="url" name="url" type="text" value="" size="30" tabindex="3" /><label for="url">Website</label></p> <p class="comment-form-url"><label for="atf_twitter_id">twitter (@username)</label><input id="atf_twitter_id" name="atf_twitter_id" type="text" size="30" value=""/></p> <p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" tabindex="4" aria-required="true"></textarea></p> <p class="form-submit"> <input name="submit" type="submit" id="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='3904' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p> <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="323b6f6523" /></p><p id="gasp_p" style="clear:both"></p><script type="text/javascript"> var version = "3.1"; var gasp_p = document.getElementById("gasp_p"); var gasp_cb = document.createElement("input"); var gasp_text = document.createTextNode(" Did you +1\'nd this post from top of this page? "); gasp_cb.type = "checkbox"; gasp_cb.id = "gasped"; gasp_cb.name = "gasped"; gasp_cb.style.width = "25px"; gasp_p.appendChild(gasp_cb); gasp_p.appendChild(gasp_text); var frm = gasp_cb.form; frm.onsubmit = gasp_it; function gasp_it(){ if(gasp_cb.checked != true){ alert("Did you forgot to +1 this post? "); return false; } return true; } </script> <noscript>you MUST enable javascript to be able to comment</noscript> <input type="hidden" id="gasp_email" name="gasp_email" value="" /> <input type="hidden" id="gasp_time" name="gasp_time" value="1411163554"/> <input type="hidden" id="norefreshnonce"/><input type="hidden" name="cl_post_title" id="cl_post_title"/><input type="hidden" name="cl_post_url" id="cl_post_url"/><input type="hidden" name="cl_prem" id="cl_prem"/><input type="hidden" name="cl_df" id="cl_df"/><input type="hidden" name="cl_entice_google" id="cl_entice_google" value="no"/><input type="hidden" name="cl_entice_twitter" id="cl_entice_twitter" value="no"/><input type="hidden" name="cl_entice_facebook" id="cl_entice_facebook" value="no"/><div id="commentluv"><div id="cl_messages"></div><input type="checkbox" id="doluv" name="doluv" checked="checked" /><span id="mylastpost"><a href="http://www.commentluv.com/?ref=clp-jkchahal7721" title="" rel="external nofollow" target="_blank"><img alt="CommentLuv badge" src="http://jaspreetchahal.org/wp-content/plugins/commentluv-premium/images/CL91_default.png"/></a></span><span id="showmorespan"><img class="clarrow" id="showmore" src="http://jaspreetchahal.org/wp-content/plugins/commentluv-premium/images/down-arrow.gif" alt="Show more posts" title="Show more posts" style="display:none;"/></span></div><div id="lastposts" style="display:none;"></div><p class="comment-subscription-form"><input type="checkbox" name="subscribe_comments" id="subscribe_comments" value="subscribe" style="width: auto; -moz-appearance: checkbox; -webkit-appearance: checkbox;" /> <label class="subscribe-label" id="subscribe-label" for="subscribe_comments">Notify me of follow-up comments by email.</label></p><p class="comment-subscription-form"><input type="checkbox" name="subscribe_blog" id="subscribe_blog" value="subscribe" style="width: auto; -moz-appearance: checkbox; -webkit-appearance: checkbox;" /> <label class="subscribe-label" id="subscribe-blog-label" for="subscribe_blog">Notify me of new posts by email.</label></p><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="10"/></p> </form> </div><!-- #respond --> </div><div id="sidebar" class="sidebar widget-area"><div id="adinj-3" class="widget adinjwidget"><div class="widget-wrap"><h4 class="widget-title widgettitle">Sponsored Links</h4> <!--Ad Injection:widget_3--><script type="text/javascript"><!-- google_ad_client = "ca-pub-1303602453159174"; /* Jcorg homepage */ google_ad_slot = "8150415659"; google_ad_width = 300; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div></div> <div id="text-19" class="widget widget_text"><div class="widget-wrap"><h4 class="widget-title widgettitle">Latest Free stuff by me</h4> <div class="textwidget"><div style="text-align:center"><!--<a href="http://blockfak.es" onclick="_gaq.push(['_trackEvent', 'outbound-widget', 'http://blockfak.es', '']);" target='_blank'><img src="http://blockfak.es/img/logo.png"></a><br>--><br> <a href="http://khovo.com" onclick="_gaq.push(['_trackEvent', 'outbound-widget', 'http://khovo.com', '']);" target='_blank'><img src="http://khovo.com/imgs/khovo.png" width="250" height="80"></a> <br><br> <a href="http://isdomainblacklisted.com" onclick="_gaq.push(['_trackEvent', 'outbound-widget', 'http://isdomainblacklisted.com', '']);" target='_blank'><img src="/images/idb.png"></a> <br><br> <a href="http://twtreminder.com" onclick="_gaq.push(['_trackEvent', 'outbound-widget', 'http://twtreminder.com', '']);" target='_blank'><img src="/images/twtreminder.png"></a> </div> </div> </div></div> <div id="text-3" class="widget widget_text"><div class="widget-wrap"><h4 class="widget-title widgettitle">Connect </h4> <div class="textwidget"><div style="text-align:center"> <a href="https://plus.google.com/115454845108821658209?prsrc=3" onclick="_gaq.push(['_trackEvent', 'outbound-widget', 'https://plus.google.com/115454845108821658209?prsrc=3', 'I amon']);" rel="author external nofollow" style="display:inline-block;text-decoration:none;color:#333;text-align:center;font:13px/16px arial,sans-serif;white-space:nowrap;" title="" target="_blank"><span style="display:inline-block;font-weight:bold;vertical-align:top;margin-right:5px;margin-top:8px;">I am</span><span style="display:inline-block;vertical-align:top;margin-right:15px;margin-top:8px;">on</span><img src="https://ssl.gstatic.com/images/icons/gplus-32.png" alt="" style="border:0;width:32px;height:32px;"/></a> <br> <a href="https://twitter.com/jschahal" onclick="_gaq.push(['_trackEvent', 'outbound-widget', 'https://twitter.com/jschahal', 'Follow @jschahal']);" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false" rel="external nofollow" title="" target="_blank">Follow @jschahal</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><br> <a href="http://www.youtube.com/user/jassiechahal" onclick="_gaq.push(['_trackEvent', 'outbound-widget', 'http://www.youtube.com/user/jassiechahal', '']);" rel="external nofollow" title="" target="_blank"><img src="//s.ytimg.com/yt/img/creators_corner/Subscribe_to_my_videos/YT_Subscribe_123x19_red.png" alt="Subscribe to me on YouTube"/></a> <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fjaspreetchahal.org&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=lucida+grande&amp;height=21&amp;appId=135793783198674" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe> </div> <!-- <div style="text-align:center;padding-top:10px"><a href="/guest-author-opportunities"> <button class="shinyblue" >Become a Guest Poster</button> </a> </div>--></div> </div></div> <div id="text-20" class="widget widget_text"><div class="widget-wrap"><h4 class="widget-title widgettitle">Sites I Visit Often</h4> <div class="textwidget"><a href="https://gaander.com" onclick="_gaq.push(['_trackEvent', 'outbound-widget', 'https://gaander.com', ' Australia']);" title="Find fun things near you."><img src="https://gaander.com/images/gaander1.png" style="width:200px" alt="Find fun things near you with Gaander"> Australia</a></div> </div></div> <div id="categories-3" class="widget widget_categories"><div class="widget-wrap"><h4 class="widget-title widgettitle">Categories</h4> <ul> <li class="cat-item cat-item-115"><a href="http://jaspreetchahal.org/category/c/" >C#</a> (29) </li> <li class="cat-item cat-item-76"><a href="http://jaspreetchahal.org/category/css/" >CSS</a> (36) </li> <li class="cat-item cat-item-9"><a href="http://jaspreetchahal.org/category/databases/" >Databases</a> (13) </li> <li class="cat-item cat-item-23"><a href="http://jaspreetchahal.org/category/general-technical/" >General Technical</a> (146) </li> <li class="cat-item cat-item-97"><a href="http://jaspreetchahal.org/category/designing/" >Graphic Designing</a> (7) </li> <li class="cat-item cat-item-435"><a href="http://jaspreetchahal.org/category/html5/" >HTML5</a> (31) </li> <li class="cat-item cat-item-95"><a href="http://jaspreetchahal.org/category/javascript/" >Javascript</a> (101) </li> <li class="cat-item cat-item-78"><a href="http://jaspreetchahal.org/category/linux/" >Linux</a> (27) </li> <li class="cat-item cat-item-32"><a href="http://jaspreetchahal.org/category/media/" >Media, Promo codes, News and my Opinion</a> (36) </li> <li class="cat-item cat-item-4"><a href="http://jaspreetchahal.org/category/mobile/" >Mobile Computing</a> (28) </li> <li class="cat-item cat-item-1"><a href="http://jaspreetchahal.org/category/php/" >PHP</a> (66) </li> <li class="cat-item cat-item-146"><a href="http://jaspreetchahal.org/category/software-by-jc/" >Tools I wrote</a> (25) </li> <li class="cat-item cat-item-46"><a href="http://jaspreetchahal.org/category/wordpress/" >Wordpress</a> (41) </li> <li class="cat-item cat-item-340"><a href="http://jaspreetchahal.org/category/wordpress-plugins/" >Wordpress Plugins</a> (12) </li> </ul> </div></div> <div id="archives-4" class="widget widget_archive"><div class="widget-wrap"><h4 class="widget-title widgettitle">Archives</h4> <ul> <li><a href='http://jaspreetchahal.org/2014/09/'>September 2014</a>&nbsp;(1)</li> <li><a href='http://jaspreetchahal.org/2014/08/'>August 2014</a>&nbsp;(1)</li> <li><a href='http://jaspreetchahal.org/2014/07/'>July 2014</a>&nbsp;(2)</li> <li><a href='http://jaspreetchahal.org/2014/05/'>May 2014</a>&nbsp;(1)</li> <li><a href='http://jaspreetchahal.org/2014/03/'>March 2014</a>&nbsp;(2)</li> <li><a href='http://jaspreetchahal.org/2014/02/'>February 2014</a>&nbsp;(1)</li> <li><a href='http://jaspreetchahal.org/2014/01/'>January 2014</a>&nbsp;(1)</li> <li><a href='http://jaspreetchahal.org/2013/12/'>December 2013</a>&nbsp;(1)</li> <li><a href='http://jaspreetchahal.org/2013/11/'>November 2013</a>&nbsp;(1)</li> <li><a href='http://jaspreetchahal.org/2013/10/'>October 2013</a>&nbsp;(1)</li> <li><a href='http://jaspreetchahal.org/2013/08/'>August 2013</a>&nbsp;(3)</li> <li><a href='http://jaspreetchahal.org/2013/07/'>July 2013</a>&nbsp;(3)</li> <li><a href='http://jaspreetchahal.org/2013/06/'>June 2013</a>&nbsp;(5)</li> <li><a href='http://jaspreetchahal.org/2013/05/'>May 2013</a>&nbsp;(5)</li> <li><a href='http://jaspreetchahal.org/2013/04/'>April 2013</a>&nbsp;(16)</li> <li><a href='http://jaspreetchahal.org/2013/03/'>March 2013</a>&nbsp;(12)</li> <li><a href='http://jaspreetchahal.org/2013/02/'>February 2013</a>&nbsp;(2)</li> <li><a href='http://jaspreetchahal.org/2013/01/'>January 2013</a>&nbsp;(8)</li> <li><a href='http://jaspreetchahal.org/2012/12/'>December 2012</a>&nbsp;(13)</li> <li><a href='http://jaspreetchahal.org/2012/11/'>November 2012</a>&nbsp;(9)</li> <li><a href='http://jaspreetchahal.org/2012/10/'>October 2012</a>&nbsp;(28)</li> <li><a href='http://jaspreetchahal.org/2012/09/'>September 2012</a>&nbsp;(29)</li> <li><a href='http://jaspreetchahal.org/2012/08/'>August 2012</a>&nbsp;(27)</li> <li><a href='http://jaspreetchahal.org/2012/07/'>July 2012</a>&nbsp;(31)</li> <li><a href='http://jaspreetchahal.org/2012/06/'>June 2012</a>&nbsp;(26)</li> <li><a href='http://jaspreetchahal.org/2012/05/'>May 2012</a>&nbsp;(38)</li> <li><a href='http://jaspreetchahal.org/2012/04/'>April 2012</a>&nbsp;(54)</li> <li><a href='http://jaspreetchahal.org/2012/03/'>March 2012</a>&nbsp;(39)</li> <li><a href='http://jaspreetchahal.org/2012/02/'>February 2012</a>&nbsp;(55)</li> <li><a href='http://jaspreetchahal.org/2012/01/'>January 2012</a>&nbsp;(22)</li> <li><a href='http://jaspreetchahal.org/2011/12/'>December 2011</a>&nbsp;(13)</li> <li><a href='http://jaspreetchahal.org/2011/11/'>November 2011</a>&nbsp;(5)</li> <li><a href='http://jaspreetchahal.org/2011/10/'>October 2011</a>&nbsp;(5)</li> <li><a href='http://jaspreetchahal.org/2011/09/'>September 2011</a>&nbsp;(36)</li> <li><a href='http://jaspreetchahal.org/2011/08/'>August 2011</a>&nbsp;(11)</li> </ul> </div></div> </div></div></div></div><div id="footer-widgets" class="footer-widgets"><div class="wrap"><div class="footer-widgets-1 widget-area"><div id="featured-page-4" class="widget featured-content featuredpage"><div class="widget-wrap"><h4 class="widget-title widgettitle">Disclaimer</h4> <div class="post-1359 page type-page status-publish has-post-thumbnail hentry entry"><a href="http://jaspreetchahal.org/disclaimer/" title="Disclaimer" class="alignnone"><img width="287" height="120" src="http://jaspreetchahal.org/wp-content/uploads/2012/02/rules-287x120.jpg" class="entry-image attachment-page" alt="Disclaimer" itemprop="image" /></a><p>The information contained in this website is for general information purposes only. The information is assembled and provided by Jaspreet Chahal (unless specified otherwise) and while I endeavour to &#x02026; <a href="http://jaspreetchahal.org/disclaimer/" class="more-link">[Read More...]</a></p></div></div></div> <div id="recent-comments-3" class="widget widget_recent_comments"><div class="widget-wrap"><h4 class="widget-title widgettitle">Recent Comments</h4> <ul id="recentcomments"><li class="recentcomments"><span class="comment-author-link">Alessandro</span> on <a href="http://jaspreetchahal.org/wordpress-youtube-channel-embed-plugin/comment-page-2/#comment-2715">wordpress youtube channel embed plugin</a></li><li class="recentcomments"><span class="comment-author-link"><a href="http://jaspreetchahal.org" rel="external nofollow" class="url" title="" target="_blank">Jaspreet Chahal</a></span> on <a href="http://jaspreetchahal.org/wordpress-youtube-channel-embed-plugin/comment-page-2/#comment-2707">wordpress youtube channel embed plugin</a></li><li class="recentcomments"><span class="comment-author-link">charbel chacty</span> on <a href="http://jaspreetchahal.org/wordpress-youtube-channel-embed-plugin/comment-page-2/#comment-2684">wordpress youtube channel embed plugin</a></li><li class="recentcomments"><span class="comment-author-link"><a href="http://jaspreetchahal.org" rel="external nofollow" class="url" title="" target="_blank">Jaspreet Chahal</a></span> on <a href="http://jaspreetchahal.org/wordpress-jc-coupon-plugin-lite/comment-page-3/#comment-2584">WordPress JC Coupon Plugin Free</a></li><li class="recentcomments"><span class="comment-author-link">Steven</span> on <a href="http://jaspreetchahal.org/wordpress-jc-coupon-plugin-lite/comment-page-3/#comment-2547">WordPress JC Coupon Plugin Free</a></li></ul></div></div> </div><div class="footer-widgets-2 widget-area"><div id="featured-page-5" class="widget featured-content featuredpage"><div class="widget-wrap"><h4 class="widget-title widgettitle">Software by me {shop now}</h4> <div class="post-1208 page type-page status-publish has-post-thumbnail hentry entry"><a href="http://jaspreetchahal.org/shop/" title="Shop" class="alignnone"><img width="287" height="120" src="http://jaspreetchahal.org/wp-content/uploads/2012/02/cart-287x120.jpg" class="entry-image attachment-page" alt="cart" itemprop="image" /></a><p>My shop contains all the projects that I worked on and maintaining them. Projects includes databases, Wordpress plugins, Rackspace Cloud Files tools and much more so explore and see If I got something &#x02026; <a href="http://jaspreetchahal.org/shop/" class="more-link">[Read More...]</a></p></div></div></div> </div><div class="footer-widgets-3 widget-area"><div id="linkcat-363" class="widget widget_links"><div class="widget-wrap"><h4 class="widget-title widgettitle">My Other Sites</h4> <ul class='xoxo blogroll'> <li><a href="http://freebulkimageresizer.com/" rel="me external nofollow" title="" target="_blank">Free Bulk Image Resizer and watermarker</a></li> <li><a href="http://isDomainBlacklisted.com" rel="me" title="Handy SEO and Networking tools" target="_blank">isDomainBlacklisted</a></li> <li><a href="http://ispeaktext.com" rel="me" title="A simple speech to text editor (Experimental)" target="_blank">iSpeakText</a></li> <li><a href="http://jquerybar.com" rel="me external nofollow" title="" target="_blank">jQuery Notification Bar</a></li> <li><a href="http://onlinebase64decoder.com" rel="me">Online base64 decoder and encoder</a></li> <li><a href="http://promocodestock.com" rel="me" title="Site covers many well known companies for deals, promotions and coupons." target="_blank">Promotions and Coupons</a></li> <li><a href="https://securepasswordgenerator.org" rel="me" title="Generate your next strong password on 256 bit encrypted site. You can even check strength of you current passwords." target="_blank">Secure Password Generator</a></li> <li><a href="http://khovo.com" rel="me" target="_blank">Serious Comics Just for you by my pen</a></li> </ul> </div></div> </div></div></div><div id="footer" class="footer"><div class="wrap"> <p>&#xa9; Copyright 2014 <a href="http://jaspreetchahal.org/">jaspreetchahal.org</a> &#xb7; All Rights Reserved &#xb7; <a href="http://jaspreetchahal.org/privacy-policy/">Privacy Policy</a></p> </div></div></div> <div style="display:none"> </div> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-881678-14', 'jaspreetchahal.org'); ga('send', 'pageview'); </script><script type='text/javascript'>jQuery(document).ready(function($) {$(".myController").jFlow({controller: ".jFlowControl",slideWrapper : "#jFlowSlider",slides: "#slides",selectedWrapper: "jFlowSelected",width: "870px",height: "400px",timer: 4000,duration: 800,loop: 0,effect: "fade",prev: ".slider-previous",next: ".slider-next",auto: true});});</script> <script type="text/javascript"> WPCOM_sharing_counts = {"http:\/\/jaspreetchahal.org\/html5-new-elements-details-time-address-mark-progressbar-and-meter\/":3904} </script> <script type="text/javascript"> jQuery(document).on( 'ready post-load', function(){ jQuery( 'a.share-twitter' ).on( 'click', function() { window.open( jQuery(this).attr( 'href' ), 'wpcomtwitter', 'menubar=1,resizable=1,width=600,height=350' ); return false; }); }); </script> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <script type="text/javascript"> jQuery(document).on( 'ready post-load', function(){ jQuery( 'a.share-facebook' ).on( 'click', function() { window.open( jQuery(this).attr( 'href' ), 'wpcomfacebook', 'menubar=1,resizable=1,width=600,height=400' ); return false; }); }); </script> <script type="text/javascript"> jQuery( document ).ready( function() { jQuery.getScript( '//platform.linkedin.com/in.js?async=true', function success() { IN.init(); }); }); jQuery( document.body ).on( 'post-load', function() { if ( typeof IN != 'undefined' ) IN.parse(); }); </script><link rel="stylesheet" href="http://jaspreetchahal.org/wp-content/plugins/wpsalesmagix/wpsmagix.css" type="text/css" ><script type='text/javascript' src='http://jaspreetchahal.org/wp-content/plugins/akismet/_inc/form.js?ver=3.0.2'></script> <link rel='stylesheet' id='jcwperrata_style-css' href='http://jaspreetchahal.org/wp-content/plugins/wp-errata/jcedit.css?ver=4.0' type='text/css' media='all' /> <link rel='stylesheet' id='jcorgytce_ppstyle-css' href='http://jaspreetchahal.org/wp-content/plugins/jcwp-youtube-channel-embed/css/prettyPhoto.css?ver=4.0' type='text/css' media='all' /> <link rel='stylesheet' id='jcorgytce_ytcestyle-css' href='http://jaspreetchahal.org/wp-content/plugins/jcwp-youtube-channel-embed/css/jcYoutubeChannelEmbedd.css?ver=4.0' type='text/css' media='all' /> <script type='text/javascript' src='http://jaspreetchahal.org/wp-includes/js/jquery/ui/jquery.ui.menu.min.js?ver=1.10.4'></script> <script type='text/javascript' src='http://jaspreetchahal.org/wp-includes/js/jquery/ui/jquery.ui.autocomplete.min.js?ver=1.10.4'></script> <script type='text/javascript' src='http://jaspreetchahal.org/wp-content/plugins/datademos/ajax.js?ver=1.9.2'></script> <script type='text/javascript'> /* <![CDATA[ */ var thickboxL10n = {"next":"Next >","prev":"< Prev","image":"Image","of":"of","close":"Close","noiframes":"This feature requires inline frames. You have iframes disabled or your browser does not support them.","loadingAnimation":"http:\/\/jaspreetchahal.org\/wp-includes\/js\/thickbox\/loadingAnimation.gif"}; /* ]]> */ </script> <script type='text/javascript' src='http://jaspreetchahal.org/wp-includes/js/thickbox/thickbox.js?ver=3.1-20121105'></script> <script type='text/javascript'> /* <![CDATA[ */ var wc_add_to_cart_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","ajax_loader_url":"\/\/jaspreetchahal.org\/wp-content\/plugins\/woocommerce\/assets\/images\/ajax-loader@2x.gif","i18n_view_cart":"View Cart","cart_url":"http:\/\/jaspreetchahal.org\/cart\/","is_cart":"","cart_redirect_after_add":"no"}; /* ]]> */ </script> <script type='text/javascript' src='//jaspreetchahal.org/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js?ver=2.1.12'></script> <script type='text/javascript' src='//jaspreetchahal.org/wp-content/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js?ver=2.60'></script> <script type='text/javascript'> /* <![CDATA[ */ var woocommerce_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","ajax_loader_url":"\/\/jaspreetchahal.org\/wp-content\/plugins\/woocommerce\/assets\/images\/ajax-loader@2x.gif"}; /* ]]> */ </script> <script type='text/javascript' src='//jaspreetchahal.org/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=2.1.12'></script> <script type='text/javascript' src='//jaspreetchahal.org/wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery.cookie.min.js?ver=1.3.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var wc_cart_fragments_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","fragment_name":"wc_fragments"}; /* ]]> */ </script> <script type='text/javascript' src='//jaspreetchahal.org/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js?ver=2.1.12'></script> <script type='text/javascript' src='http://s0.wp.com/wp-content/js/devicepx-jetpack.js?ver=201438'></script> <script type='text/javascript' src='http://jaspreetchahal.org/wp-includes/js/comment-reply.min.js?ver=4.0'></script> <script type='text/javascript' src='http://jaspreetchahal.org/wp-content/themes/genesis/lib/js/menu/superfish.min.js?ver=1.7.4'></script> <script type='text/javascript' src='http://jaspreetchahal.org/wp-content/themes/genesis/lib/js/menu/superfish.args.min.js?ver=2.1.2'></script> <script type='text/javascript' src='http://jaspreetchahal.org/wp-content/themes/genesis/lib/js/menu/superfish.compat.min.js?ver=2.1.2'></script> <script type='text/javascript' src='http://jaspreetchahal.org/wp-content/plugins/genesis-slider/js/jflow.plus.js?ver=0.9.6'></script> <script type='text/javascript' src='http://jaspreetchahal.org/wp-content/plugins/jcwp-like-to-unlock/application.js?ver=1.5'></script> <script type='text/javascript' src='http://jaspreetchahal.org/wp-content/plugins/jcwp-like-to-unlock/html2canvas.js?ver=1.5'></script> <script type='text/javascript' src='http://jaspreetchahal.org/wp-content/plugins/jcwp-scroll-to-top/jcScrollTop.min.js?ver=1.5'></script> <script type='text/javascript' src='http://jaspreetchahal.org/wp-content/plugins/wp-errata/jcedit.min.js?ver=1.0'></script> <script type='text/javascript'> /* <![CDATA[ */ var JCEditAjax = {"ajaxurl":"http:\/\/jaspreetchahal.org\/wp-admin\/admin-ajax.php","postID":"3904"}; /* ]]> */ </script> <script type='text/javascript' src='http://jaspreetchahal.org/wp-content/plugins/wp-errata/ajax.js?ver=4.0'></script> <script type='text/javascript' src='http://jaspreetchahal.org/wp-content/plugins/jcwp-youtube-channel-embed/jquery.prettyPhoto.js?ver=4.0'></script> <script type='text/javascript' src='http://jaspreetchahal.org/wp-content/plugins/jcwp-youtube-channel-embed/jcorgYoutubeUserChannelEmbed.js?ver=4.0'></script> <script type='text/javascript'> /* <![CDATA[ */ var recaptcha_options = {"lang":"en"}; /* ]]> */ </script> <script type='text/javascript' src='http://jaspreetchahal.org/wp-content/plugins/jetpack/modules/sharedaddy/sharing.js?ver=20121205'></script> <script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US </script> <script type="text/javascript"> jQuery(document).ready(function () { $jcorgltuel = jQuery(".jcwp-like-to-unlock"); var jcorgltu_cnv = 'jcorgltu_cnv'; html2canvas(jQuery(".jcwp-like-to-unlock"), { onrendered: function (canvas) { document.body.appendChild(canvas); jQuery(canvas).attr("id", jcorgltu_cnv).css({ position: 'absolute', top: $jcorgltuel.offset().top, left: $jcorgltuel.offset().left }).css("z-index", 10); stackBlurCanvasRGBA(jcorgltu_cnv, 0, 0, $jcorgltuel.outerWidth(false), $jcorgltuel.outerHeight(false), 16); jQuery(window).resize(function () { setTimeout(function () { jQuery(canvas).css({ top: $jcorgltuel.offset().top, left: $jcorgltuel.offset().left, width: $jcorgltuel.outerWidth(false), height: $jcorgltuel.outerHeight(false) }); }, 10) }); } } ); var jcorgliscript=document.createElement('script'); jcorgliscript.setAttribute("type",'IN/Share'); jcorgliscript.setAttribute("data-url","http://jaspreetchahal.org/html5-new-elements-details-time-address-mark-progressbar-and-meter/"); jcorgliscript.setAttribute("data-counter","right"); jcorgliscript.setAttribute("data-onsuccess","jcorg_ltulitwcb"); var jcorgliscripttw=document.createElement('a'); jcorgliscripttw.setAttribute("href",'https://twitter.com/share'); jcorgliscripttw.setAttribute("class",'twitter-share-button'); jcorgliscripttw.setAttribute("data-url","http://jaspreetchahal.org/html5-new-elements-details-time-address-mark-progressbar-and-meter/"); jcorgliscripttw.setAttribute("data-text","Check this out"); jcorgliscripttw.setAttribute("data-via","@jschahal"); jcorgliscripttw.setAttribute("data-dnt","@true"); jcorgliscripttw.innerHTML = "Tweet"; jQuery("<div id='jcwp-like-to-unlock-wrap' style='background: #f9f9f9;border:5px #eeeeee solid;border-radius: 15px;padding:15px;margin-bottom:25px;height:92px;'><div style='text-align: center;font-size: 18px; border-bottom:3px solid #eee;margin-bottom:8px;box-sizing:border-box;padding-bottom:10px;color:#C00'>Are you finding this post cool, Why not give it a FaceBook like or A Google plus to continue reading..</div><div id='jcwp-like-to-unlock-fb' style='float:left;width:25%;text-align:center'></div><div id='jcwp-like-to-unlock-gp' style='float:left;width:25%;text-align:center'></div><div id='jcwp-like-to-unlock-li' style='float:left;width:25%;text-align:center'></div><div id='jcwp-like-to-unlock-twitter' style='float:left;width:25%;text-align:center'></div><div style='clear:both'></div></div>").insertBefore($jcorgltuel); jQuery("#jcwp-like-to-unlock-fb").jcFacebookLike({ href: location.href, applicationId: "135793783198674", show_faces:false, layout: "button_count", width: "100", font: "lucida grande", colorscheme: "light", callbackLike: function (response) { jQuery("#"+jcorgltu_cnv).hide(); jQuery("#jcwp-like-to-unlock-wrap").hide(); jcorg_ltu_report("3904"); }, callbackUnLike: function (response) { jQuery("#"+jcorgltu_cnv).show() jQuery("#jcwp-like-to-unlock-wrap").show(); } }); jQuery("#jcwp-like-to-unlock-gp").jcPlusBtn({ href: location.href, size: "standard", // size of Google plus buttin, possible values: small | medium | tall | standard annotation: "inline", // annotaion type: inline | bubble | none callback: function (d) { }, // this function must be in Global scope, async: true, // true if action needs to be asynchronous html5: "yes", // if generated code needs to be HTML5 compliant width: "300" // if not HTML5 then specify width }); jQuery("#jcwp-like-to-unlock-li").append(jcorgliscript); jQuery("#jcwp-like-to-unlock-twitter").append(jcorgliscripttw); }); </script> <script> window.twttr.ready(function (twttr) { window.twttr.events.bind('tweet', function (event) { jcorg_ltulitwcb(); }); }); </script> <script> jQuery(window).load(function() { jQuery().jcScrollTop({ duration:1000, scroleActivateAt:200, scrollElementId:"jcScrollTop", easingType:"easeInOutQuad", position:'center', scrollText:"Scroll to top - a FREE WP plugin by me", backgroundColor:'#ed702b', foreColor:"#FFF", fontFamily:"Calibri", fontSize:'15px', zIndex:'999999 !important', fontWeight:'bold', textPadding:'5px', containerWidth:'240px', containerBorder:'2px solid #ed702b', borderRadius:'10px 10px 0px 0px', callback:function(){} }); }); </script> <script> jQuery(window).load(function() { jQuery(".jcedit").jcedit({saveAction:function (originalContent,newContent,editableElement) { jQuery.post( // see tip #1 for how we declare global javascript variables JCEditAjax.ajaxurl, { action : 'jcedit-submit', // other parameters can be added along with "action" postID : JCEditAjax.postID, oldContent:originalContent, newContent:newContent, url:location.href, name:jQuery("#jcedit-user").val(), email:jQuery("#jcedit-email").val() }, function( response ) { if(response.success) { alert('Thank you for your contribution for making this post better. An administrator has been notified.'); } } ); }, fancyDialog:true, stripTagsOnPasteInsert:true, debug:true, showHelpAlertAfterSelectAll:true, saveBtnLabel:"Send for correction", cancelBtnLabel:"Reset and close" }); }); </script> <script src="http://stats.wp.com/e-201438.js" type="text/javascript"></script> <script type="text/javascript"> st_go({v:'ext',j:'1:3.1.1',blog:'26731568',post:'3904',tz:'10'}); var load_cmc = function(){linktracker_init(26731568,3904,2);}; if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc); else load_cmc(); </script></body> </html>