Thursday , January 24 2019
Home / Web Technologies / HTML5 / Lesson 2:HTML5 New Elements

Lesson 2:HTML5 New Elements


In HTML5 Following Elements are addeed

1) Canvas:

  • It is a graphics container, in which you can draw 2D graphics.
  • To draw graphics like shapes, lines, ellipses etc.
  • We create a canvas element using HTML 5
  • We use pure java script to draw graphics on that HTML 5 canvas.

2) SVG:

  • Scalable Vector Graphics
  • It is an another way of drawing graphics.
  • SVG can be programmed using XML.
  • Here also, target is to draw graphics

3) HTML5 Drag/Drop:

  • We can drag and drop an element into another element such as div.
  • We can allow user to drag and drop images into a box.
  • For example, the user can drag and drop an img into div.

4) HTML5 Geolocation:

  • We can track the current location of the client, where our page is running.
  • Works good in mobiles

5) HTML5 Video:

  • Basically, we are currently depending on 3rd party video players such as
  • flash, yahoo player etc., to play videos
  • We show video players directly using html 5

6) HTML5 Audio:

  • Basically, we are currently depending on 3rd party audio players such as flash etc.
  • We show audio players directly using html 5

7) HTML5 Input Types:

  • <input type=”date” />
  • <input type=”email” />
  • <input type=”range” />
  • <input type=”color” />

8) HTML5 Form Attributes:

These are the new attributes are introduced in <form> and <input> tags.

Example 1:

  • <input type=”submit” formaction=”serverpage1.asp” />
  • <input type=”submit” formaction=”serverpage2.asp” />

Example 2:

  • <input type=”file” multiple=”multiple”>

9) HTML5 Web Storage:

  • We can store some data temporarily, while the page is running.
  • Data: simple values / objects / local databases
  • It is used to store temporary data only.
  • We can programmatically add data / erase data.
  • The data stored using one page, can be accessible using that page only.
  • This is like an enhancement for cookies.

10) HTML5 App Cache:

  • It is also known as offline applications.
  • Works like browser cache.
  • If you enable this feature for a page, even though net is disconnected,
  • That page can be loaded on the browser.
  • It internally stores the page output in the cache memory.

11) HTML5 Web Workers:

  • This is used to do background work, while the page is running, without
  • Disturbing the functionality of the page.
  • Examples: Count down, Time updates etc.

12) HTML5 SSE:

  • Server Side Events
  • Server itself can send some notification / data to the browser, while the
  • Page is running on the browser.


How Did HTML5 Get Started?

  • HTML5 is a co-operation between the World Wide Web Consortium
  • (W3C) and the Web Hypertext Application Technology Working Group
  • (WHATWG).
  • WHATWG was working with web forms and applications, and W3C was
  • working with XHTML 2.0. In 2006, they decided to cooperate and create
  • a new version of HTML.

Some rules for HTML5 were established:

  • New features should be based on HTML, CSS, DOM, and JavaScript
  • Reduce the need for external plug-ins (like Flash)
  • Better error handling
  • More markup to replace scripting
  • HTML5 should be device independent
  • The development process should be visible to the public


  • In HTML5 there is only one <!doctype> declaration, and it is very simple:

<!DOCTYPE html>

Minimum HTML5 Document

Below is a simple HTML5 document, with the minimum of required tags:


Print Friendly, PDF & Email

Give us your valuable feedback


About Murali

Hello everyone I am Software Developer having 3+ years of Experience in Microsoft Technologies and Others. My skills :-, C#,, SQL SERVER, web services, windows Service,Windows applications,HTML,CSS, JavaScript,JQuery,AnjularJs

Check Also

Lesson 14:HTML5 New Form Input Types Example-2

HTML5 New Form Inputs Example: [crayon-5c499d153ac6c800850936/]   Give us your valuable feedback comments