<article> Element
The <article> element specifies independent, self-contained content.
<article> element use to post stories,articals.
Example :-
<article>
<h1>HTML5</h1>
<p> It was specially designed to deliver rich content without the need for additional plugins.</p>
</article>
<aside> Element
The <aside> element defines some content aside from the content it is placed in (like a sidebar).
Example :-
<p> His family were Sikhs, some of whom had been active in Indian independence movements </p>
<aside>
<h4> Bhagat Singh </h4>
<p> Bhagat Singh was born on 27 September 1907 to Kishan Singh and Vidyavati </p>
</aside>
HTML5 <audio> Element :
<audio> tag is used to play audio in webpage
Example:-
<audio controls="controls" preload="auto">
<source src="01 - Theme Song.mp3"></source>
</audio>
<canvas> element :
The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
Note: By default, the <canvas> element has no border and no content.
Example:-
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
<details> and <summary> Elements:
<details> tag defines additional details that the user can view or hide
<summary> tag defines a visible heading for a <details> element
Example:-
<details>
<summary> HTML5 </summary>
<p>It was specially designed to deliver rich content without the need for additional plugins.</p>
</details>
HTML5 <datalist> Element
The <datalist> element specifies a list of pre-defined options for an <input> element.
Example
An <input> element with pre-defined values in a <datalist>:
Select course :<input list="tech">
<datalist id="tech">
<option value="HTML5">
<option value="Java">
<option value="CSS3">
<option value="HTML">
<option value="CSS">
<option value="CSS Tricks">
</datalist>
<footer> Element
The <footer> element specifies footer for a document or section.
A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
Example
<footer>
<p>copy rights © 2012</p>
<p>All rights are reserved. Design and developed by narendar</p>
</footer>
<figure> and <figcaption> Elements
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
<figure>
<img src=" lions.jpg" alt=" lions" width="304" height="228">
<figcaption>Fig1. – lions taking rest</figcaption>
</figure>
<header> Element
The <header> element specifies a header for a document or section.
You can have several <header> elements in one document.
Example
<article>
<header>
<h4> Bhagat Singh </h4>
<p> Bhagat Singh was born on 27 September 1907 to Kishan Singh and Vidyavati </p>
</header>
<p> Singh was involved in the murder of British police officer John Saunders.</p>
</article>
HTML5 <keygen> Element
The purpose of the <keygen> element is to provide a secure way to authenticate users.
The <keygen> tag specifies a key-pair generator field in a form.
When the form is submitted, two keys are generated, one private and one public.
The private key is stored locally, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future.
Example
A form with a keygen field:
<form action="index.jsp" method="get">
Username: <input type="text" name=" name">
Encryption: <keygen name="security">
<input type="submit"value="submit"/>
</form>
<mark> Element :
It is highlighted the text
Example:
<p><mark>HTML :</mark> Hyper Text Markup Language</p>
<meter> Element :
It shows the range
Example:
<meter value="5" min="0" max="10">5 out of 10</meter><br>
<meter value="0.7">70%</meter>
<nav> Element
The <nav> element defines a set of navigation links.
Example
<nav>
<a href="#">HOME</a> |
<a href="#">TECHNOLOGY</a> |
<a href="#">ABOUT</a> |
<a href="#">CONTACT</a>
</nav>
HTML5 <output> Element
The <output> element represents the result of a calculation
Example
Perform a calculation and show the result in an <output> element:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
<progress> Element :
It shows the progress of a task
Example:
File downloading progress:
<progress value="60" max="100"></progress>
<section> Element
The <section> element defines a section in a document.
<section>
<h1>HTML</h1>
<p>Hyper Text Markup Language is useful develop webpages</p>
</section>
<track> Element :
It is used to display the text or subtitles for video and audio
Example:
<video width="500" height="375" controls="controls">
<source src=" sample_video.mp4" type="video/mp4" />
<source src="your ogg media file name" type="video/ogg" />
<track src=" subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src=" subtitles_hi.vtt" kind="subtitles" srclang="hi" label="Hindi">
</video>
HTML5 <video> Element :
<video> tag is used to play video in webpage
Example
<video width="320" height="240" controls="controls" preload="auto">
<source src="kushi.mp4" type="video/mp4"></source>
</video>
