HTML5 Elements – Part1

, , Leave a comment

This post is part of  series of blogs I will be writting about HTML5. In this post, I will be talking about new elements available with HTML5

1. Article
Article, i guess is self explanatory.

Without article

This is without article tag

With Article

This is with article tag

<article>
<h1>This is with article tag</h1>
</article>

2. Aside
Nothing much with this visually. This tag will help you structurize Html content better

</pre>
<div>
Header Header Header
<aside>Special content </aside></div>

3. Audio

<audio width="300" height="32" controls="controls">
<source src="PathOftheFile" type="audio/mp3" />
</audio>

4. Bdi – Bi Directional Isolation

I think its self explanatory. In short its about isolation of different directional texts  in the content

<div> Hello <bdi>إيان</bdi> world</div>

5. Canvas
This is big one. Really important one. This is what bring HTML5 into visualisation game.

Example :


//add canvas element in the body //
<canvas id="visualiseMe"></canvas>
<script type="text/javascript">
//initialise canvas object to play around
var canvas=document.getElementById('visualiseMe');
//get the 2d context
var ctx=canvas.getContext('2d');
//do all fancy stuff with ctx now
ctx.fillStyle='black';
ctx.fillRect(10,10,100,100);
</script>

6. Datalist
Use this to have predefined options for input controls

 <input id='inputControl' />
<datalist id='inputControl'>
<option>option1</option>
</datalist>

7. Details
Use this tag to show more details of the content you can use open attribute to play around with visibility

Open Me
Why did you open me
<details> 
<summary>
Open Me
</summary>
<div> Why did you open me </div>
</details>

8. Embed

<embed src="http://www.youtube.com/embed/-I7WWYzEHEg" />