Canvas:
The <canvas> tag is supported in Internet Explorer 9, Firefox, Opera,
Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the
<canvas> tag.
The <canvas> tag is used to draw graphics, on the fly, via scripting
(usually JavaScript).
The <canvas> tag is only a container for graphics, you must use a
script to actually draw the graphics.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>
Result:
Datalist:
The <datalist> tag is currently only supported in Firefox and Opera.
The <datalist> tag specifies a list of pre-defined options for an <input> element.
The <datalist> tag is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.
Use the <input> element's list attribute to bind it together with a <datalist> element.
<html>
<body>
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser" />
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" />
</form>
</body>
</html>
Result:
Details:
The <details> tag is currently only supported in Chrome.
The <details> tag specifies additional details that the user can view
or hide on demand.
The <details> tag can used to create an interactive widget that the
user can open and close. Inside <details>, there can be put any sort of
content.
The content of a <details> element should not be visible unless the
open attribute is set.
<html>
<body>
<details open="open">
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
</body>
</html>
figure and Figcaption:
The <figcaption> and <figure> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <figcaption> and <figure> tag.
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.
The <figcaption> tag defines a caption for a <figure> element.
The <figcaption> element can be placed as the first or last child of the <figure> element.
Example:
Use a <figure> element to mark up a photo in a document. The <figure> element also contains a caption:
<!DOCTYPE html>
<html>
<body>
<figure>
<img src="http://www.picgifs.com/graphics/g/google/graphics-google-018918.jpg" alt="The Pulpit Rock" width="304" height="228" />
<figcaption>Fig.1 - Google Pc.</figcaption>
</figure>
</body>
</html>
Footer:
The <footer> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <footer> tag.
The <footer> tag defines a footer for a document or section.
A <footer> element should contain information about it’s containing element.
A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
You can have several <footer> elements in one document.
Example:
A footer section in a document:
<html>
<body>
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
</body>
</html>
Header:
The <header> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the
<header> tag.
The <header> tag specifies a header for a document or section.
The <header> element should be used as a container for introductory
content or set of navigational links.
You can have several <header> elements in one document.
Example:
A header for an <article>:
<html>
<body>
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
</body>
</html>
