What is New in HTML 5

  • New Elements
    • The <canvas> element for 2D drawing
    • The <video> and <audio> elements for media playback
    • New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
    • New form controls, like calendar, date, time, email, url, search
  • Video and Audio 
    • Until now, there has not been a standard for showing a video/movie on a web page.Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins.HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.
    • HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.
    • The HTML5 <video> element also has methods, properties, and events.
    • There are methods for playing, pausing, and loading, for example. There are properties (e.g. duration, volume, seeking) that you can read or set.
    • There are also DOM events that can notify you, for example, when the <video> element begins to play, is paused, is ended, etc.
  • 2D/3D Graphics
    • <canvas>
      • The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
      • The <canvas> element is only a container for graphics, you must use a script to actually draw the graphics.
      • A canvas is a drawable region defined in HTML code with height and width attributes.
      • Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.
    • SVG
      • SVG stands for Scalable Vector Graphics
      • SVG is used to define vector-based graphics for the Web
      • SVG defines the graphics in XML format
      • SVG graphics do NOT lose any quality if they are zoomed or resized
      • Every element and every attribute in SVG files can be animated
      • SVG is a W3C recommendation
      • SVG images can be created and edited with any text editor
      • SVG images can be searched, indexed, scripted, and compressed
      • SVG images are scalable
      • SVG images can be printed with high quality at any resolution
      • SVG images are zoomable (and the image can be zoomed without degradation)
    • Canvas and SVG
    • Canvas

      SVG

      • Resolution dependent
      • No support for event handlers
      • Poor text rendering capabilities
      • You can save the resulting image as .png or .jpg
      • Best suited for graphic-intensive games where many objects are redrawn frequently
      • Resolution independent
      • Support for event handlers
      • Best suited for applications with large rendering areas (Google Maps)
      • Slow rendering if complex (anything that uses the DOM a lot will be slow)
      • Not suited for game applications
  • Local Storage
    • With HTML5, web pages can store data locally within the user's browser.
    • Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for.
    • It is also possible to store large amounts of data, without affecting the website's performance
    • There are two new objects for storing data on the client:
      • localStorage - stores data with no expiration date
      • sessionStorage - stores data for one session The data is stored in key/value pairs, and a web page can only access data stored by itself.
  • Web Applications
    • Application Cache
      • With HTML5 it is easy to make an offline version of a web application, by creating a cache manifest file.
      • Application cache gives an application three advantages:
        • Offline browsing - users can use the application when they're offline
        • Speed - cached resources load faster
        • Reduced server load - the browser will only download updated/changed resources from the server
    • Web Worker (Async Support)
      • When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.
      • Web workers are supported in all major browsers, except Internet Explorer.
    • Server-Sent Events
      • A server-sent event is when a web page automatically gets updates from a server. This was also possible before, but the web page would have to ask if any updates were available.
      •  With server-sent events, the updates come automatically. Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.
  • Drag and Drop
    • In HTML5, drag and drop is part of the standard, and any element can be draggable.
  • Geo Location
    • The HTML5 Geolocation API is used to get the geographical position of a user.
    • Since this can compromise user privacy, the position is not available unless the user approves it.
    • Geolocation is much more accurate for devices with GPS, like iPhone.
  • Full CSS3 Support
    • Primary focuns of CSS3 is Graphics. Key features are below
      • New Selectors
      • New Properties
      • Animations
      • 2D/3D Transformations
      • Rounded Corners
      • Shadow Effects
      • Downloadable Fonts
  • Local SQL Database
    • An API for storing data in databases that can be queried using a variant of SQL.
  • Local file access
    • An API for representing file objects in web applications, as well as programmatically selecting them and accessing their data.
  • XHTMLHttpRequest 2
    • The XMLHttpRequest specification defines an API that provides scripted client functionality for transferring data between a client and a server.

References