Examples of New Elements in HTML5

HTML5 brought with itself lots of new things that needed lots of tweaking, JavaScript and Flash usage and hacks to implement in prior versions of HTML. Here are some of these goodies with good examples.

CANVAS Tag
Painting on your webpage was never so easy and straightforward before. Now, such drawings can be made using Canvas tag -
<canvas id=”testCanvas”></canvas>
<script>
  var canvas = document.getElementById(“testCanvas”);
  var cContext = canvas.getContext(“2d”);
  cContext.fillStyle = “#CECECE”;
  cContext.fillRect(0, 0, 100, 100);
</script>

AUDIO Tag
Common audio formats like MP3 and OGG can easily be played using the audio tag. It shows a small audio player box with all the controls to conveniently start, stop, pause what’s playing.
<audio controls=”controls”>
  <source src=”sample1.mp3” type=”audio/mpeg” />
  <source src=”music/sample2.ogg” type=”audio/ogg”>

Sorry, your browser does not support AUDIO tag!
</audio>

DATALIST Tag
Now you can have a text field and a drop-down combo together by using DATALIST element. It looks like a simple text field at first but also shows an auto-complete list for whatever you’re typing.
<datalist id=”birds”>
  <option value=”sparrow”>
  <option value=”hawk”>
  <option value=”parrot”>
  <option value=”ostrich”>
  <option value=”hen”>
</datalist>

VIDEO Tag
Videos are generally played on web pages using flash containers that require flash extension to be installed. But with the VIDEO tag the browser itself can play high-quality video.
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
 
PROGRESS Tag
Not very frequently used but a progress-bar is something that has always been made using JavaScript and images. Now PROGRESS element takes it’s place because it’s just a one-liner to do the same.
<progress value=”43” max=”100”>
</progress>

As you can already guess, it’s value can be easily modified using JavaScript and it can be animated to show something being downloaded using AJAX, etc., a great addition to web-developer’s toolbox!