Remember, these new elements are different ways for you to group or target elements in order to apply styles you write in your CSS. The reason for all these elements helps us achieve cleaner coding practices. Also, WHATWG have also adding a nice new set of attributes we can use with select elements. Lets break down the list below.

The HTML time tag is used for declaring the date and/or time within an HTML document. The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset. Look at the different ways you can write it.

Example Markup:

<br /><%%KEEPWHITESPACE%%>     &lt;time datetime="2010-10-13"&gt;13 October 2010&lt;/time&gt;<br /><br /><%%KEEPWHITESPACE%%>     &lt;time datetime="2010-10-13"&gt;It really doesn't matter what you write in between here.&lt;/time&gt;<br /><br /><%%KEEPWHITESPACE%%>     &lt;time datetime="2010-10-13T12:00"&gt;This is when we last had class.&lt;/time&gt;<br /><br /><%%KEEPWHITESPACE%%>     &lt;time datetime="2010-10-13T20:00+06:00"&gt;12:00 when we last had class—in Netherlands.&lt;/time&gt;<br />

The HTML figure tag is used for annotating illustrations, diagrams, photos, code listings, etc. You can use the figcaption element to associate a caption together with some embedded content, such as a graphic or video.

Example Markup:

<br />&lt;figure id="fig2"&gt;<br /><br /><%%KEEPWHITESPACE%%>     &lt;img src="images/name.jpg" title="Title of Your Image" alt="..." /&gt;<br /><%%KEEPWHITESPACE%%>     &lt;figcaption&gt;<br /><%%KEEPWHITESPACE%%>          This would be a caption or description for your figure.<br /><%%KEEPWHITESPACE%%>     &lt;/figcaption&gt;<br /><br />&lt;/figure&gt;<br /><br />

The HTML dialog tag indicates a dialog between a number of people.

Examples of dialog could include a conversation, meeting minutes, a chat transcript, a dialog in a screenplay, an instant message log.

To present a dialog, this element must include a dt element to represent the speaker, and a dd to represent the quote from the speaker.

There is some argument whether or not you need the end tags for <dt> and <dd>. Most browsers will recognize it separately but seeing that HTML5 is still in its bay steps, please use the ending tag.

Example Markup:

<br />&lt;dialog&gt;<br /><br /><%%KEEPWHITESPACE%%>  &lt;dt&gt;Carina&lt;/dt&gt;<br /><%%KEEPWHITESPACE%%>  &lt;dd&gt;What word were you assigned for homework?&lt;/dd&gt;<br /><br /><%%KEEPWHITESPACE%%>  &lt;dt&gt;Rocco&lt;/dt&gt;<br /><%%KEEPWHITESPACE%%>  &lt;dd&gt;I got 'hyper'. As inspiration I'm going to eat packets of sugar.&lt;/dd&gt;<br /><br /><%%KEEPWHITESPACE%%>  &lt;dt&gt;Bryce&lt;/dt&gt;<br /><%%KEEPWHITESPACE%%>  &lt;dd&gt;Do YOU know what that will do to your body?! I have the word 'Fat.'&lt;/dd&gt;<br /><br /><%%KEEPWHITESPACE%%>  &lt;dt&gt;Osvaldo&lt;/dt&gt;<br /><%%KEEPWHITESPACE%%>  &lt;dd&gt;Thinkin' about what could happen to Rocco after eating all that sugar makes me sad. I'm depressed.&lt;/dd&gt;<br /><br /><%%KEEPWHITESPACE%%>  &lt;dt&gt;Seung&lt;/dt&gt;<br /><%%KEEPWHITESPACE%%>  &lt;dd&gt;Have no fear you guys! Jolly is here!&lt;/dd&gt;<br /><br />&lt;/dialog&gt;<br /><br />

Tweet