HTML5 Slideshow Maker

Knowledge: HTML5 Vs HTML4 / XHTML

HTML has had many incarnations over the years. All of these are similar, but successive refinements have been added over time to cope with our evolving understanding of the best way to make a website. HTML is a language for describing web pages.

HTML4 vs HTML5- HTML stands for Hyper Text Markup Language
- HTML is a markup language
- A markup language is a set of markup tags
- The tags describe document content
- HTML documents contain HTML tags and plain text
- HTML documents are also called web pages

HTML4 was first developed by Tim Berners-Lee in 1990 (ancient history in web-terms!). HTML4 is the oldest version of HTML still in use. XHTML is a separate language that began as a reformulation of HTML 4.01 using XML 1.0. HTML5 is the fifth revision of the HTML standard and, as of December 2012, is a W3C Candidate Recommendation, to subsume HTML 4, XHTML 1 and DOM Level 2 HTML.

1. DOCTYPE

The HTML syntax of HTML5 requires a doctype to be specified to ensure that the browser renders the page in standards mode. The DOCTYPE has no other purpose, and is required to enable standards mode for HTML documents. 

<!DOCTYPE html>

The DOCTYPE declaration for the HTML syntax is <!DOCTYPE html> and is case-insensitive. Doctypes from earlier versions of HTML were longer because the HTML language was SGML-based and therefore required a reference to a DTD.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

The strict doctypes for HTML 4.0, HTML 4.01, XHTML 1.0 as well as XHTML 1.1 are also allowed (but are discouraged) in the HTML syntax. In the XML syntax, any doctype declaration may be used, or it may be omitted altogether. Documents with an XML media type are always handled in standards mode.

2. Audio and Video 

Audio and Video are not part of HTML4 specification.

However, both Audio and Videos are integral part of HTML5 specifications e.g. <audio> and <video> tags. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. Source elements are used together with these elements if there are multiple streams available of different types. A comprehensive lists of new tags in HTML5

3. Vector Graphics

Vector graphics is integral part of HTML5 e.g. SVG and canvas. The HTML5 family of specifications provide two different models for vector graphics: canvas and SVG.

SVG is a retained-mode graphics model. To build a scene graph in SVG, you write declarative markup to create an in-memory tree structure that lives in the HTML DOM. You can manipulate the scene graph through code or through CSS. SVG markup can be generated from a variety of tools, including Adobe Illustrator and Microsoft Visio.

Canvas is the immediate-mode graphics model. Because it doesn’t store the graph in memory, it takes less memory overhead to use, and can be faster for intensive use. Unlike SVG, it is programmatic in nature – there is only one parent <canvas> element, and code is used to populate it. While you draw primitive objects on a canvas, the only thing that is stored is the generated bitmap surface. In general, canvas is a lower-level API than SVG because of these constraints.

For HTML4, Vector Graphics is possible with the help of technologies such as VML, Silverlight, Flash etc.

4. GeoLocation

It is almost impossible in HTML4 to get true GeoLocation of user browsing any website especially if it comes to mobile devices.

JS GeoLocation API in HTML5 helps identify location of user browsing any website(provided user allows it). Since this can compromise user privacy, the position is not available unless the user approves it.

5. Browser Cache

In HTML4, browser cache can be used as temporary storage.

HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection. In HTML5, Application Cache, Web SQL database and Web storage is available as client side storage. Accessible using JavaScript interface in HTML5 compliant browsers.

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

6. Supported Browsers

HTML4 works with all old browsers.

However, most of modern browser have started supporting HTML5 specification e.g. Firefox, Mozilla, Opera, Chrome, Safari, etc.

7. Others

For HTML4, Web Sockets are not available. Generally used mechanisms are long polling and streaming. While for HTML5, full duplex communication channels can be established with Server using Web Sockets. Accessible using JavaScript interface in HTML5 compliant browsers.

HTML4 does not allow JavaScript to run in browser. JS runs in same thread as browser interface. HTML5 allows JavaScript to run in background. This is possible due to JS Web worker API in HTML5.