Lesson 4: HTML5 New Elements

HTML5 New Elements for Capabilities

This tutorial is based on the capabilities element which has been introduced in HTML5.

HTML5 has some very useful tag for media, 2D/3D draing and form interaction to modify your webpage dynamically, it also make your webpage interactive. By using these you can modify a part of webpage dynamically.

audiovideo

For Media Content

  • <audio>

In HTML5 the <audio> tag defines sound content. <audio> tag is going to end audio plug-in such as Microsoft Windows Media Player, Apple QuickTime. On the other side, it supports both Mp3 and Ogg side to side available.

  • <video>

In HTML5 the <video> tag is used to video or movie<video> tag consists of three attributes which are as follows and these tag are only applicable to <video> tag.

VIdeo-embed

above is the example of a video embedded.

some site which has video embedded into there site : www.kashiannapurnaannakshetratrust.in (only an example site)

  • Width
  • Height
  • Poster

POSTER is used to project still image which is displayed before the movie is played.

  • <source>

In HTML5 the <source> tag is used to define multiple media resources for <video> and <audio>. In this we can specify alternative audio and video files. And it also depends on browser that regarding choosing of files based on codec support and its media type.

  • <embed>

In HTML5 the <embed> tag defines a container for an external application or interactive content (a plug-in) and <embed> is an empty element(tag works without closing).

  • <track>

Use the new HTML5 <stack> tag to define text tracks for <video> and <audio>. It includes metadata, descriptions, chapters, subtitles, captions etc. it was introduced in late 2010 into HTML5.

For Drawing graphics

canvas-of-html5

  • <canvas>

In HTML5 you can use <canvas> to draw graphics, via scripting (usually JavaScript). It is mainly used for artist as painting zone, which is duly attached on a wooden frame. Apart from that we can draw/create a animation design or other gaming surfaces in an interactive manner. We can publish a book on “CANVAS” as it is such a big subject.

New Form Elements

  • <datalist> : offers a list of pre-defined options for input controls
  • <keygen> : offers a key-pair generator field for forms
  • <output> : used to get the result of a calculation

You can read more tags in html5 in our previous tutorial about structural elements

You Might Also Like

Comments are closed.