{"id":397,"date":"2015-06-16T09:20:45","date_gmt":"2015-06-16T09:20:45","guid":{"rendered":"http:\/\/aurelio.audero.it\/blog\/?p=397"},"modified":"2016-06-04T00:23:44","modified_gmt":"2016-06-04T00:23:44","slug":"trick-of-the-day-the-time-element","status":"publish","type":"post","link":"https:\/\/www.audero.it\/blog\/2015\/06\/16\/trick-of-the-day-the-time-element\/","title":{"rendered":"Trick of the day: The time element"},"content":{"rendered":"<p>HTML5 introduced several new elements to address many common use cases that developers have faced over the years. As an example you can think to the new <code>audio<\/code> and <code>video<\/code> elements that allow you to avoid the use of third-party software like Flash and Silverlight to play audios and videos. While media streams play an important role on the web, the <a href=\"http:\/\/www.w3.org\/\" target=\"_blank\">W3C<\/a> and the <a href=\"https:\/\/whatwg.org\/\" target=\"_blank\">WHATWG<\/a> have also tried to enhance the semantic of web pages. One of these new elements is the <code>time<\/code> element.<br \/>\n<!--more--><br \/>\nThe <code>time<\/code> element represents a date and\/or a time in the Gregorian calendar. It&#8217;s an inline element (like <code>span<\/code> and <code>a<\/code>) and must have a closing tag (like <code>div<\/code> and <code>span<\/code>). When used in its simplest form, the content of the element must be a valid date and\/or time string:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;!-- 1st June 2015 --&gt;\r\n&lt;time&gt;2015-06-01&lt;\/time&gt;\r\n<\/pre>\n<p>There are many variations to describe a date and a time that you can use with <code>time<\/code>, so I&#8217;ll let you read this very complete article (of mine):<\/p>\n<p><a href=\"http:\/\/www.sitepoint.com\/html5-time-element-guide\/\" target=\"_blank\">http:\/\/www.sitepoint.com\/html5-time-element-guide\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML5 introduced several new elements to address many common use cases that developers have faced over the years. As an example you can think to the new <code>audio<\/code> and <code>video<\/code> elements that allow you to avoid the use of third-party software like Flash and Silverlight to play audios and videos. While media streams play an important role on the web, the <a href=\"http:\/\/www.w3.org\/\" target=\"_blank\">W3C<\/a> and the <a href=\"https:\/\/whatwg.org\/\" target=\"_blank\">WHATWG<\/a> have also tried to enhance the semantic of web pages. One of these new elements is the <code>time<\/code> element.<\/p>\n","protected":false},"author":1,"featured_media":409,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[33],"tags":[49,14,45,42,43,44],"class_list":["post-397","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-trick-of-the-day","tag-html","tag-html5","tag-standard","tag-time","tag-w3c","tag-whatwg"],"jetpack_featured_media_url":"https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2015\/06\/calendar.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9Or4e-6p","jetpack-related-posts":[{"id":524,"url":"https:\/\/www.audero.it\/blog\/2018\/05\/16\/event-delegation-in-javascript\/","url_meta":{"origin":397,"position":0},"title":"Event delegation in JavaScript","author":"Aurelio De Rosa","date":"May 16, 2018","format":false,"excerpt":"One of the most common tasks a web developer deals with is to add event listeners to the elements of a page. Event listeners are employed to perform one or more actions when a given event occurs on one or more elements. For example, by using an event listener we\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/www.audero.it\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/08\/event-delegation.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/08\/event-delegation.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/08\/event-delegation.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/08\/event-delegation.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":404,"url":"https:\/\/www.audero.it\/blog\/2015\/07\/14\/trick-of-the-day-css-scroll-snap-points\/","url_meta":{"origin":397,"position":1},"title":"Trick of the day: CSS Scroll Snap Points","author":"Aurelio De Rosa","date":"July 14, 2015","format":false,"excerpt":"When you create a gallery, you usually want to implement a feature where every time the user clicks (or press the ENTER key) on an arrow, you move straight to the next (or previous) image. This effect can also be used to create a website that has several sections, each\u2026","rel":"","context":"In &quot;Trick of the day&quot;","block_context":{"text":"Trick of the day","link":"https:\/\/www.audero.it\/blog\/category\/trick-of-the-day\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/07\/css-scroll-snap-points.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/07\/css-scroll-snap-points.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/07\/css-scroll-snap-points.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/07\/css-scroll-snap-points.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/07\/css-scroll-snap-points.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":148,"url":"https:\/\/www.audero.it\/blog\/2013\/09\/05\/how-to-create-custom-filters-in-jquery\/","url_meta":{"origin":397,"position":2},"title":"How to Create Custom Filters in jQuery","author":"Aurelio De Rosa","date":"September 5, 2013","format":false,"excerpt":"In some cases you may need a shortcut to collect elements for which jQuery doesn't provide a specific filter. This is exactly where custom filters come into play. In this article, extracted from my book Instant jQuery Selectors, you'll learn how to build a custom filter in jQuery. Please note\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/www.audero.it\/blog\/category\/javascript\/"},"img":{"alt_text":"jquery logo","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":539,"url":"https:\/\/www.audero.it\/blog\/2018\/04\/18\/in-depth-guide-event-listeners\/","url_meta":{"origin":397,"position":3},"title":"An in-depth guide to event listeners","author":"Aurelio De Rosa","date":"April 18, 2018","format":false,"excerpt":"When creating interactive web pages, developers often need to execute some actions when a given event occurs. Changing the image of a carousel when a user clicks on one of its arrows, showing a tooltip when a word is hovered, or validating a field when a user moves the focus\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/www.audero.it\/blog\/category\/javascript\/"},"img":{"alt_text":"Removing an event listener","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2018\/04\/event-listeners-removing-event-listener.gif?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2018\/04\/event-listeners-removing-event-listener.gif?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2018\/04\/event-listeners-removing-event-listener.gif?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2018\/04\/event-listeners-removing-event-listener.gif?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":197,"url":"https:\/\/www.audero.it\/blog\/2013\/12\/23\/enhancing-the-abbr-element-on-mobile\/","url_meta":{"origin":397,"position":4},"title":"Enhancing the abbr Element on Mobile","author":"Aurelio De Rosa","date":"December 23, 2013","format":false,"excerpt":"Today's world runs fast, really fast. When writing, a lot of people use abbreviations and acronyms to save time that we can find spread all over the web. They are so used that an HTML tag, <abbr>, was created to identify them and help the semantic of web pages. In\u2026","rel":"","context":"In &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/www.audero.it\/blog\/category\/css\/"},"img":{"alt_text":"The abbr tag unstyled","src":"https:\/\/i0.wp.com\/aurelio.audero.it\/blog\/wp-content\/uploads\/2013\/12\/abbr-unstyled.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":339,"url":"https:\/\/www.audero.it\/blog\/2014\/10\/18\/state-web-notifications-api\/","url_meta":{"origin":397,"position":5},"title":"The State of the Web Notifications API","author":"Aurelio De Rosa","date":"October 18, 2014","format":false,"excerpt":"Today I was reviewing my HTML5 API demos repository to keep its information updated and relevant. In the last two weeks Google has released\u00a0Chrome 38, Opera has released Opera 25, and Mozilla has released Firefox 33.\u00a0Every time a new version of a browser is available, it may\u00a0introduce support for new\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/www.audero.it\/blog\/category\/javascript\/"},"img":{"alt_text":"push notifications","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/10\/push-notifications.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/10\/push-notifications.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/10\/push-notifications.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/comments?post=397"}],"version-history":[{"count":7,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/397\/revisions"}],"predecessor-version":[{"id":474,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/397\/revisions\/474"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/media\/409"}],"wp:attachment":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/media?parent=397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/categories?post=397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/tags?post=397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}