You are here: Home / HTML5 / HTML5 new elements details, time, address, mark, progressbar and meter

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

by Jaspreet Chahal on October 20, 2012 Leave a Comment

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><!-- Urvanov Syntax Highlighter v2.8.12 --> <div id="urvanov-syntax-highlighter-62b9f6dc53d62743011453" class="urvanov-syntax-highlighter-syntax crayon-theme-classic urvanov-syntax-highlighter-font-monaco urvanov-syntax-highlighter-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 urvanov-syntax-highlighter-nums-button" title="Toggle Line Numbers"><div class="urvanov-syntax-highlighter-button-icon"></div></div><div class="crayon-button urvanov-syntax-highlighter-plain-button" title="Toggle Plain Code"><div class="urvanov-syntax-highlighter-button-icon"></div></div><div class="crayon-button urvanov-syntax-highlighter-wrap-button" title="Toggle Line Wrap"><div class="urvanov-syntax-highlighter-button-icon"></div></div><div class="crayon-button urvanov-syntax-highlighter-expand-button" title="Expand Code"><div class="urvanov-syntax-highlighter-button-icon"></div></div><div class="crayon-button urvanov-syntax-highlighter-copy-button" title="Copy"><div class="urvanov-syntax-highlighter-button-icon"></div></div><div class="crayon-button urvanov-syntax-highlighter-popup-button" title="Open Code In New Window"><div class="urvanov-syntax-highlighter-button-icon"></div></div></div></div> <div class="crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"></div> <div class="urvanov-syntax-highlighter-plain-wrap"><textarea wrap="soft" class="urvanov-syntax-highlighter-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="urvanov-syntax-highlighter-main" style=""> <table class="crayon-table"> <tr class="urvanov-syntax-highlighter-row"> <td class="crayon-nums " data-settings="show"> <div class="urvanov-syntax-highlighter-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-1">1</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-2">2</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-3">3</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-4">4</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-5">5</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-6">6</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-7">7</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-8">8</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-9">9</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-10">10</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-11">11</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-12">12</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-13">13</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-14">14</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-15">15</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-16">16</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-17">17</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-18">18</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-19">19</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-20">20</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-21">21</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-22">22</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-23">23</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-24">24</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-25">25</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-26">26</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-27">27</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-28">28</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-29">29</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-30">30</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-31">31</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-32">32</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-33">33</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-34">34</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-35">35</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-36">36</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-37">37</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-38">38</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-39">39</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-40">40</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-41">41</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-42">42</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d62743011453-43">43</div></div> </td> <td class="urvanov-syntax-highlighter-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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="urvanov-syntax-highlighter-62b9f6dc53d62743011453-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.0027 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" data-wpel-link="internal">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 async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- jcorg large rectanlge --> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1303602453159174" data-ad-slot="8389632666"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </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" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer"><strong>details</strong></a><br /> Well! this is such a powerful addition, at the time of writing only Chrome supports </p> <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" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer">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" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer">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" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer">address</a><br /> </strong></p> <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" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer">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" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer"><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" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer">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><!-- Urvanov Syntax Highlighter v2.8.12 --> <div id="urvanov-syntax-highlighter-62b9f6dc53d69860890736" class="urvanov-syntax-highlighter-syntax crayon-theme-classic urvanov-syntax-highlighter-font-monaco urvanov-syntax-highlighter-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="urvanov-syntax-highlighter-mixed-highlight" title="Contains Mixed Languages"></span><div class="crayon-button urvanov-syntax-highlighter-nums-button" title="Toggle Line Numbers"><div class="urvanov-syntax-highlighter-button-icon"></div></div><div class="crayon-button urvanov-syntax-highlighter-plain-button" title="Toggle Plain Code"><div class="urvanov-syntax-highlighter-button-icon"></div></div><div class="crayon-button urvanov-syntax-highlighter-wrap-button" title="Toggle Line Wrap"><div class="urvanov-syntax-highlighter-button-icon"></div></div><div class="crayon-button urvanov-syntax-highlighter-expand-button" title="Expand Code"><div class="urvanov-syntax-highlighter-button-icon"></div></div><div class="crayon-button urvanov-syntax-highlighter-copy-button" title="Copy"><div class="urvanov-syntax-highlighter-button-icon"></div></div><div class="crayon-button urvanov-syntax-highlighter-popup-button" title="Open Code In New Window"><div class="urvanov-syntax-highlighter-button-icon"></div></div></div></div> <div class="crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"></div> <div class="urvanov-syntax-highlighter-plain-wrap"><textarea wrap="soft" class="urvanov-syntax-highlighter-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="urvanov-syntax-highlighter-main" style=""> <table class="crayon-table"> <tr class="urvanov-syntax-highlighter-row"> <td class="crayon-nums " data-settings="show"> <div class="urvanov-syntax-highlighter-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d69860890736-1">1</div><div class="crayon-num crayon-striped-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d69860890736-2">2</div><div class="crayon-num" data-line="urvanov-syntax-highlighter-62b9f6dc53d69860890736-3">3</div></div> </td> <td class="urvanov-syntax-highlighter-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="urvanov-syntax-highlighter-62b9f6dc53d69860890736-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="urvanov-syntax-highlighter-62b9f6dc53d69860890736-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="urvanov-syntax-highlighter-62b9f6dc53d69860890736-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.0035 seconds] --> <p>You should put all your CSS below above snippet.</p> <p>In the <a href="http://jaspreetchahal.org/html5-handling-browsers/" data-wpel-link="internal">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 async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- JCOrg Rich --> <ins class="adsbygoogle" style="display:inline-block;width:468px;height:60px" data-ad-client="ca-pub-1303602453159174" data-ad-slot="2622278414"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <p>&nbsp;</p> <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"><a href="https://twitter.com/share" class="twitter-share-button" data-url="https://jaspreetchahal.org/html5-new-elements-details-time-address-mark-progressbar-and-meter/" data-text="HTML5 new elements details, time, address, mark, progressbar and meter" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer">Tweet</a></li><li class="share-facebook"><div class="fb-share-button" data-href="https://jaspreetchahal.org/html5-new-elements-details-time-address-mark-progressbar-and-meter/" data-layout="button_count"></div></li><li class="share-linkedin"><div class="linkedin_button"><script type="in/share" data-url="https://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 id='jp-relatedposts' class='jp-relatedposts' > <h3 class="jp-relatedposts-headline"><em>Related</em></h3> </div></div><div class="post-meta"><span class="categories">Filed Under: <a href="https://jaspreetchahal.org/category/html5/" rel="category tag" data-wpel-link="internal">HTML5</a></span> <span class="tags">Tagged With: <a href="https://jaspreetchahal.org/tag/html5-address-tag-example/" rel="tag" data-wpel-link="internal">HTML5 address tag example</a>, <a href="https://jaspreetchahal.org/tag/html5-deprecated-elements-tags/" rel="tag" data-wpel-link="internal">HTML5 deprecated elements tags</a>, <a href="https://jaspreetchahal.org/tag/html5-details-tag-example/" rel="tag" data-wpel-link="internal">HTML5 details tag example</a>, <a href="https://jaspreetchahal.org/tag/html5-meter-tag-example/" rel="tag" data-wpel-link="internal">HTML5 meter tag example</a>, <a href="https://jaspreetchahal.org/tag/html5-progress-tag-example/" rel="tag" data-wpel-link="internal">HTML5 progress tag example</a>, <a href="https://jaspreetchahal.org/tag/html5-removed-elements/" rel="tag" data-wpel-link="internal">HTML5 removed elements</a></span></div></div> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html5-new-elements-details-time-address-mark-progressbar-and-meter/#respond" style="display:none;" data-wpel-link="internal">Cancel reply</a></small> </h3> <form id="commentform" class="comment-form"> <iframe title="Comment Form" src="https://jetpack.wordpress.com/jetpack-comment/?blogid=26731568&#038;postid=3904&#038;comment_registration=0&#038;require_name_email=1&#038;stc_enabled=1&#038;stb_enabled=1&#038;show_avatars=0&#038;avatar_default=monsterid&#038;greeting=Leave+a+Reply&#038;greeting_reply=Leave+a+Reply+to+%25s&#038;color_scheme=light&#038;lang=en_US&#038;jetpack_version=8.7.2&#038;show_cookie_consent=10&#038;has_cookie_consent=0&#038;token_key=%3Bnormal%3B&#038;sig=5ccfaa7cbe2873f195497c2fc7697ab07fadc484#parent=https%3A%2F%2Fjaspreetchahal.org%2Fhtml5-new-elements-details-time-address-mark-progressbar-and-meter%2F" style="width:100%; height: 430px; border:0;" name="jetpack_remote_comment" class="jetpack_remote_comment" id="jetpack_remote_comment" sandbox="allow-same-origin allow-top-navigation allow-scripts allow-forms allow-popups"></iframe> <!--[if !IE]><!--> <script> document.addEventListener('DOMContentLoaded', function () { var commentForms = document.getElementsByClassName('jetpack_remote_comment'); for (var i = 0; i < commentForms.length; i++) { commentForms[i].allowTransparency = false; commentForms[i].scrolling = 'no'; } }); </script> <!--<![endif]--> </form> </div> <input type="hidden" name="comment_parent" id="comment_parent" value="" /> <p class="akismet_comment_form_privacy_notice">This site uses Akismet to reduce spam. <a href="https://akismet.com/privacy/" target="_blank" rel="nofollow noopener external noreferrer" data-wpel-link="external">Learn how your comment data is processed</a>.</p></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 async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Jcorg homepage --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-1303602453159174" data-ad-slot="8150415659"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></div> <div id="text-22" class="widget widget_text"><div class="widget-wrap"><h4 class="widget-title widgettitle">Ads</h4> <div class="textwidget"><a href="https://onlinemathspractice.com" title="Effective adaptive maths skill builder for k-8" data-wpel-link="exclude">Free online maths skill builder</a> </div> </div></div> <div id="blog_subscription-3" class="widget widget_blog_subscription jetpack_subscription_widget"><div class="widget-wrap"><h4 class="widget-title widgettitle">Subscribe to my Blog via Email</h4> <form action="#" method="post" accept-charset="utf-8" id="subscribe-blog-blog_subscription-3"> <div id="subscribe-text"><p>Receive notifications of new posts by email.</p> </div> <div class="jetpack-subscribe-count"> <p> Join 267 other subscribers </p> </div> <p id="subscribe-email"> <label id="jetpack-subscribe-label" class="screen-reader-text" for="subscribe-field-blog_subscription-3"> Email Address </label> <input type="email" name="email" required="required" value="" id="subscribe-field-blog_subscription-3" placeholder="Email Address" /> </p> <p id="subscribe-submit"> <input type="hidden" name="action" value="subscribe"/> <input type="hidden" name="source" value="https://jaspreetchahal.org/html5-new-elements-details-time-address-mark-progressbar-and-meter/"/> <input type="hidden" name="sub-type" value="widget"/> <input type="hidden" name="redirect_fragment" value="blog_subscription-3"/> <button type="submit" name="jetpack_subscriptions_widget" > Subscribe </button> </p> </form> </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://twitter.com/jschahal" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer">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" target="_blank" rel="noopener nofollow external noreferrer" data-wpel-link="external"><img src="https://i1.wp.com/s.ytimg.com/yt/img/creators_corner/Subscribe_to_my_videos/YT_Subscribe_123x19_red.png" alt="Subscribe to me on YouTube" data-recalc-dims="1"/></a> </div> </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-553"><a href="https://jaspreetchahal.org/category/angularjs-and-ionic/" data-wpel-link="internal">AngularJS and Ionic</a> (1) </li> <li class="cat-item cat-item-115"><a href="https://jaspreetchahal.org/category/c/" data-wpel-link="internal">C#</a> (29) </li> <li class="cat-item cat-item-76"><a href="https://jaspreetchahal.org/category/css/" data-wpel-link="internal">CSS</a> (38) </li> <li class="cat-item cat-item-9"><a href="https://jaspreetchahal.org/category/databases/" data-wpel-link="internal">Databases</a> (13) </li> <li class="cat-item cat-item-23"><a href="https://jaspreetchahal.org/category/general-technical/" data-wpel-link="internal">General Technical</a> (146) </li> <li class="cat-item cat-item-97"><a href="https://jaspreetchahal.org/category/designing/" data-wpel-link="internal">Graphic Designing</a> (8) </li> <li class="cat-item cat-item-435"><a href="https://jaspreetchahal.org/category/html5/" data-wpel-link="internal">HTML5</a> (32) </li> <li class="cat-item cat-item-95"><a href="https://jaspreetchahal.org/category/javascript/" data-wpel-link="internal">Javascript</a> (104) </li> <li class="cat-item cat-item-78"><a href="https://jaspreetchahal.org/category/linux/" data-wpel-link="internal">Linux</a> (30) </li> <li class="cat-item cat-item-32"><a href="https://jaspreetchahal.org/category/media/" data-wpel-link="internal">Media, Promo codes, News and my Opinion</a> (36) </li> <li class="cat-item cat-item-4"><a href="https://jaspreetchahal.org/category/mobile/" data-wpel-link="internal">Mobile Computing</a> (28) </li> <li class="cat-item cat-item-1"><a href="https://jaspreetchahal.org/category/php/" data-wpel-link="internal">PHP</a> (75) </li> <li class="cat-item cat-item-146"><a href="https://jaspreetchahal.org/category/software-by-jc/" data-wpel-link="internal">Tools I wrote</a> (25) </li> <li class="cat-item cat-item-46"><a href="https://jaspreetchahal.org/category/wordpress/" data-wpel-link="internal">Wordpress</a> (42) </li> <li class="cat-item cat-item-340"><a href="https://jaspreetchahal.org/category/wordpress-plugins/" data-wpel-link="internal">Wordpress Plugins</a> (13) </li> </ul> </div></div> <div id="text-23" class="widget widget_text"><div class="widget-wrap"><h4 class="widget-title widgettitle">Ads</h4> <div class="textwidget"><p><a href="https://www.subjectcoach.com" title="Online Maths, Science and English skills for Grade 1 to Grade 8 students" style="color:#fefefe" data-wpel-link="exclude">Online Math, Science, and English Practice for Kids</a></p> </div> </div></div> </div></div></div></div><div id="footer-widgets" class="footer-widgets"><div class="wrap"><div class="widget-area footer-widgets-1 footer-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="https://jaspreetchahal.org/disclaimer/" class="alignnone" data-wpel-link="internal"><img width="287" height="120" src="https://jaspreetchahal.org/wp-content/uploads/2012/02/rules-287x120.jpg" class="entry-image attachment-page" alt="Disclaimer" loading="lazy" 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="https://jaspreetchahal.org/disclaimer/" class="more-link" data-wpel-link="internal">[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">Bo Jambo</span> on <a href="https://jaspreetchahal.org/australian-street-types-and-abbreviations-database/#comment-58107" data-wpel-link="internal">Australian Street Types and Abbreviations database</a></li><li class="recentcomments"><span class="comment-author-link">Marco Giuras</span> on <a href="https://jaspreetchahal.org/australian-street-types-and-abbreviations-database/#comment-55871" data-wpel-link="internal">Australian Street Types and Abbreviations database</a></li><li class="recentcomments"><span class="comment-author-link">Ricardo</span> on <a href="https://jaspreetchahal.org/australian-street-types-and-abbreviations-database/#comment-55823" data-wpel-link="internal">Australian Street Types and Abbreviations database</a></li><li class="recentcomments"><span class="comment-author-link">Ricardo</span> on <a href="https://jaspreetchahal.org/australian-street-types-and-abbreviations-database/#comment-55822" data-wpel-link="internal">Australian Street Types and Abbreviations database</a></li><li class="recentcomments"><span class="comment-author-link">Ricardo</span> on <a href="https://jaspreetchahal.org/australian-street-types-and-abbreviations-database/#comment-55821" data-wpel-link="internal">Australian Street Types and Abbreviations database</a></li></ul></div></div> </div><div class="widget-area footer-widgets-2 footer-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="https://jaspreetchahal.org/shop/" class="alignnone" data-wpel-link="internal"><img width="287" height="120" src="https://jaspreetchahal.org/wp-content/uploads/2012/02/cart-287x120.jpg" class="entry-image attachment-page" alt="" loading="lazy" 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="https://jaspreetchahal.org/shop/" class="more-link" data-wpel-link="internal">[Read More...]</a></p></div></div></div> </div><div class="widget-area footer-widgets-3 footer-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://ispeaktext.com" rel="me noopener nofollow external noreferrer" title="A simple speech to text editor (Experimental)" target="_blank" data-wpel-link="external">iSpeakText</a></li> </ul> </div></div> </div></div></div><div id="footer" class="footer"><div class="wrap"> <p>&#xa9; Copyright 2022 <a href="https://jaspreetchahal.org/" data-wpel-link="internal">jaspreetchahal.org</a> &#xb7; All Rights Reserved &#xb7; <a href="https://jaspreetchahal.org/privacy-policy/" data-wpel-link="internal">Privacy Policy</a></p> </div></div></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"> var c = document.body.className; c = c.replace(/woocommerce-no-js/, 'woocommerce-js'); document.body.className = c; </script> <script type="text/javascript"> window.WPCOM_sharing_counts = {"https:\/\/jaspreetchahal.org\/html5-new-elements-details-time-address-mark-progressbar-and-meter\/":3904}; </script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&appId=249643311490&version=v2.3'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <script> document.body.addEventListener( 'post-load', function() { if ( 'undefined' !== typeof FB ) { FB.XFBML.parse(); } } ); </script> <script type="text/javascript"> jQuery( document ).ready( function() { jQuery.getScript( 'https://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' id='jcwperrata_style-css' href='https://jaspreetchahal.org/wp-content/plugins/wp-errata/jcedit.css?ver=6.0' type='text/css' media='all' /> <link rel='stylesheet' id='jcorgytce_ppstyle-css' href='https://jaspreetchahal.org/wp-content/plugins/jcwp-youtube-channel-embed/css/prettyPhoto.css?ver=6.0' type='text/css' media='all' /> <link rel='stylesheet' id='jcorgytce_ytcestyle-css' href='https://jaspreetchahal.org/wp-content/plugins/jcwp-youtube-channel-embed/css/jcYoutubeChannelEmbedd.css?ver=6.0' type='text/css' media='all' /> <script type='text/javascript' src='https://jaspreetchahal.org/wp-content/plugins/jetpack/_inc/build/photon/photon.min.js?ver=20191001' id='jetpack-photon-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-includes/js/jquery/ui/menu.min.js?ver=1.13.1' id='jquery-ui-menu-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-includes/js/dist/vendor/regenerator-runtime.min.js?ver=0.13.9' id='regenerator-runtime-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0' id='wp-polyfill-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-includes/js/dist/dom-ready.min.js?ver=d996b53411d1533a84951212ab6ac4ff' id='wp-dom-ready-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-includes/js/dist/hooks.min.js?ver=c6d64f2cb8f5c6bb49caca37f8828ce3' id='wp-hooks-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-includes/js/dist/i18n.min.js?ver=ebee46757c6a411e38fd079a7ac71d94' id='wp-i18n-js'></script> <script type='text/javascript' id='wp-i18n-js-after'> wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); </script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-includes/js/dist/a11y.min.js?ver=a38319d7ba46c6e60f7f9d4c371222c5' id='wp-a11y-js'></script> <script type='text/javascript' id='jquery-ui-autocomplete-js-extra'> /* <![CDATA[ */ var uiAutocompleteL10n = {"noResults":"No results found.","oneResult":"1 result found. Use up and down arrow keys to navigate.","manyResults":"%d results found. Use up and down arrow keys to navigate.","itemSelected":"Item selected."}; /* ]]> */ </script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-includes/js/jquery/ui/autocomplete.min.js?ver=1.13.1' id='jquery-ui-autocomplete-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-content/plugins/datademos/ajax.js?ver=1.9.2' id='jquery-ui-autocompletedd-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-includes/js/jquery/jquery.form.min.js?ver=4.3.0' id='jquery-form-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-content/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js?ver=2.70' id='jquery-blockui-js'></script> <script type='text/javascript' id='wc-add-to-cart-js-extra'> /* <![CDATA[ */ var wc_add_to_cart_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","i18n_view_cart":"View cart","cart_url":"https:\/\/jaspreetchahal.org\/cart\/","is_cart":"","cart_redirect_after_add":"no"}; /* ]]> */ </script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js?ver=4.2.5' id='wc-add-to-cart-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-content/plugins/woocommerce/assets/js/js-cookie/js.cookie.min.js?ver=2.1.4' id='js-cookie-js'></script> <script type='text/javascript' id='woocommerce-js-extra'> /* <![CDATA[ */ var woocommerce_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%"}; /* ]]> */ </script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=4.2.5' id='woocommerce-js'></script> <script type='text/javascript' id='wc-cart-fragments-js-extra'> /* <![CDATA[ */ var wc_cart_fragments_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","cart_hash_key":"wc_cart_hash_7c1404c1555a497d552c55d9218aa70e","fragment_name":"wc_fragments_7c1404c1555a497d552c55d9218aa70e","request_timeout":"5000"}; /* ]]> */ </script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js?ver=4.2.5' id='wc-cart-fragments-js'></script> <script type='text/javascript' id='wc-cart-fragments-js-after'> jQuery( 'body' ).bind( 'wc_fragments_refreshed', function() { var jetpackLazyImagesLoadEvent; try { jetpackLazyImagesLoadEvent = new Event( 'jetpack-lazy-images-load', { bubbles: true, cancelable: true } ); } catch ( e ) { jetpackLazyImagesLoadEvent = document.createEvent( 'Event' ) jetpackLazyImagesLoadEvent.initEvent( 'jetpack-lazy-images-load', true, true ); } jQuery( 'body' ).get( 0 ).dispatchEvent( jetpackLazyImagesLoadEvent ); } ); </script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-includes/js/comment-reply.min.js?ver=6.0' id='comment-reply-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-includes/js/hoverIntent.min.js?ver=1.10.2' id='hoverIntent-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-content/themes/genesis/lib/js/menu/superfish.min.js?ver=1.7.10' id='superfish-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-content/themes/genesis/lib/js/menu/superfish.args.min.js?ver=2.10.1' id='superfish-args-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-content/themes/genesis/lib/js/menu/superfish.compat.min.js?ver=2.10.1' id='superfish-compat-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-content/plugins/genesis-slider/js/jflow.plus.js?ver=0.9.6' id='jflow-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-content/plugins/jcwp-like-to-unlock/application.js?ver=1.5' id='jcorgltu_script_fb-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-content/plugins/jcwp-like-to-unlock/html2canvas.js?ver=1.5' id='jcorgltu_script_gp-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-content/plugins/jcwp-scroll-to-top/jcScrollTop.min.js?ver=1.5' id='jcorgstp_script-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-content/plugins/wp-errata/jcedit.min.js?ver=1.0' id='jcwperrata_script-js'></script> <script type='text/javascript' id='jcedit-ajax-request-js-extra'> /* <![CDATA[ */ var JCEditAjax = {"ajaxurl":"https:\/\/jaspreetchahal.org\/wp-admin\/admin-ajax.php","postID":"3904"}; /* ]]> */ </script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-content/plugins/wp-errata/ajax.js?ver=6.0' id='jcedit-ajax-request-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-content/plugins/jcwp-youtube-channel-embed/jquery.prettyPhoto.js?ver=6.0' id='jcorgytce_pp-js'></script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-content/plugins/jcwp-youtube-channel-embed/jcorgYoutubeUserChannelEmbed.js?ver=6.0' id='jcorgytce_ytce-js'></script> <script async="async" type='text/javascript' src='https://jaspreetchahal.org/wp-content/plugins/akismet/_inc/form.js?ver=4.1.6' id='akismet-form-js'></script> <script type='text/javascript' id='sharing-js-js-extra'> /* <![CDATA[ */ var sharing_js_options = {"lang":"en","counts":"1","is_stats_active":"1"}; /* ]]> */ </script> <script type='text/javascript' src='https://jaspreetchahal.org/wp-content/plugins/jetpack/_inc/build/sharedaddy/sharing.min.js?ver=8.7.2' id='sharing-js-js'></script> <script type='text/javascript' id='sharing-js-js-after'> var windowOpen; jQuery( document.body ).on( 'click', 'a.share-facebook', function() { // If there's another sharing window open, close it. if ( 'undefined' !== typeof windowOpen ) { windowOpen.close(); } windowOpen = window.open( jQuery( this ).attr( 'href' ), 'wpcomfacebook', 'menubar=1,resizable=1,width=600,height=400' ); return false; }); </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","https://jaspreetchahal.org:443/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","https://jaspreetchahal.org:443/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> <!--[if IE]> <script type="text/javascript"> if ( 0 === window.location.hash.indexOf( '#comment-' ) ) { // window.location.reload() doesn't respect the Hash in IE window.location.hash = window.location.hash; } </script> <![endif]--> <script type="text/javascript"> (function () { var comm_par_el = document.getElementById( 'comment_parent' ), comm_par = ( comm_par_el && comm_par_el.value ) ? comm_par_el.value : '', frame = document.getElementById( 'jetpack_remote_comment' ), tellFrameNewParent; tellFrameNewParent = function () { if ( comm_par ) { frame.src = "https://jetpack.wordpress.com/jetpack-comment/?blogid=26731568&postid=3904&comment_registration=0&require_name_email=1&stc_enabled=1&stb_enabled=1&show_avatars=0&avatar_default=monsterid&greeting=Leave+a+Reply&greeting_reply=Leave+a+Reply+to+%25s&color_scheme=light&lang=en_US&jetpack_version=8.7.2&show_cookie_consent=10&has_cookie_consent=0&token_key=%3Bnormal%3B&sig=5ccfaa7cbe2873f195497c2fc7697ab07fadc484#parent=https%3A%2F%2Fjaspreetchahal.org%2Fhtml5-new-elements-details-time-address-mark-progressbar-and-meter%2F" + '&replytocom=' + parseInt( comm_par, 10 ).toString(); } else { frame.src = "https://jetpack.wordpress.com/jetpack-comment/?blogid=26731568&postid=3904&comment_registration=0&require_name_email=1&stc_enabled=1&stb_enabled=1&show_avatars=0&avatar_default=monsterid&greeting=Leave+a+Reply&greeting_reply=Leave+a+Reply+to+%25s&color_scheme=light&lang=en_US&jetpack_version=8.7.2&show_cookie_consent=10&has_cookie_consent=0&token_key=%3Bnormal%3B&sig=5ccfaa7cbe2873f195497c2fc7697ab07fadc484#parent=https%3A%2F%2Fjaspreetchahal.org%2Fhtml5-new-elements-details-time-address-mark-progressbar-and-meter%2F"; } }; if ( 'undefined' !== typeof addComment ) { addComment._Jetpack_moveForm = addComment.moveForm; addComment.moveForm = function ( commId, parentId, respondId, postId ) { var returnValue = addComment._Jetpack_moveForm( commId, parentId, respondId, postId ), cancelClick, cancel; if ( false === returnValue ) { cancel = document.getElementById( 'cancel-comment-reply-link' ); cancelClick = cancel.onclick; cancel.onclick = function () { var cancelReturn = cancelClick.call( this ); if ( false !== cancelReturn ) { return cancelReturn; } if ( ! comm_par ) { return cancelReturn; } comm_par = 0; tellFrameNewParent(); return cancelReturn; }; } if ( comm_par == parentId ) { return returnValue; } comm_par = parentId; tellFrameNewParent(); return returnValue; }; } // Do the post message bit after the dom has loaded. document.addEventListener( 'DOMContentLoaded', function () { var iframe_url = "https:\/\/jetpack.wordpress.com"; if ( window.postMessage ) { if ( document.addEventListener ) { window.addEventListener( 'message', function ( event ) { var origin = event.origin.replace( /^http:\/\//i, 'https://' ); if ( iframe_url.replace( /^http:\/\//i, 'https://' ) !== origin ) { return; } jQuery( frame ).height( event.data ); }); } else if ( document.attachEvent ) { window.attachEvent( 'message', function ( event ) { var origin = event.origin.replace( /^http:\/\//i, 'https://' ); if ( iframe_url.replace( /^http:\/\//i, 'https://' ) !== origin ) { return; } jQuery( frame ).height( event.data ); }); } } }) })(); </script> <script type='text/javascript' src='https://stats.wp.com/e-202226.js' async='async' defer='defer'></script> <script type='text/javascript'> _stq = window._stq || []; _stq.push([ 'view', {v:'ext',j:'1:8.7.2',blog:'26731568',post:'3904',tz:'10',srv:'jaspreetchahal.org'} ]); _stq.push([ 'clickTrackerInit', '26731568', '3904' ]); </script> </body></html>