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

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

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

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

3. Audio

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

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

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

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

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
Open Me
<div> Why did you open me </div>

8. Embed

<embed src="" />