HTML4 vs HTML5

Introduction

HTML5 has a more simplified syntax compared to its predecessor where new element have been added and others were removed.

The following are the newly added elements unless mentioned otherwise:

<canvas> element is used for 2D drawings via scripting, mainly JavaScript. Here is an example of an HTML5 Canvas:

				<!DOCTTYPE html> 

				<!--Example: Canvas.html --> 

				<html> 

				<head> 

				<title> Canvas example </title> 

				</head> 

				<body bgcolor="#ffffee" aLink="#0000ff" link="#0000ff" text="#000000" vLink="#0000ff" > 

					<font face="times" size="+2" > 

					< canvas id="canvas1" width="400" height="250" style="border:3px solid #000000;"> </canvas > 

				</body> 

				</html>

The Canvas example mentioned above is shown on a browser as follows:

content-specific elements including <article>, <header>, <footer>, <nav>, <section>
<menu> and <figure>elements
Content-specific elememts are shown here:

Enables local web storage greater than 5MB within the user's browser

There are two objects for storing data on the client's machine:
localStorage: Stores data without any expiration date
sessionStorage: Stores data for one session only once the user closes the browser window

Application Cache: Allows to cache the a web application even without an internet connection. The advantages are:

Offline browsing, cached pages load faster, and reduces server load and allows the browser to download only updated pages from the server
The manifest attribute is used to specify offline browsing and the recommended file extension for manifest files is ".appcache"
example: <html manifest="example.appcache">
MANIFEST file is text file instructing the browser what to and not to cache. It has three sections

CACHE MANIFEST: All files that are listed under this header will be cached once they get downloaded for the first time
NETWORK: All files that are listed under this header will need a connection to the server and will never be cached
FALLBACK: All files that are listed under this header require fallback pages in case a page is not accessible

An example of MANIFEST file is shown below :

						CACHE MANIFEST 

						/Web/theme.css	

						/Web/logo.jpg	

						/Web/main.js 


						NETWORK:

						help.asp

						*

						FALLBACK

						/Web/Guide/Readonly.txt

Thi file instructs the browser to perform the following tasks:

Download three files from the Web folder of the website and will be always available even without internet connection
Never cache the file "help.asp" and the symbol * specifies that all other files need an internet connection
The FALLBACK section indicates that the file "Readonly.txt" will be accessed instead of all files in the Web/Guides folder in case of no internet connection

The following elements are removed in HTML5:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

Semantic and Structual Elements

<article>: Describes an article
<aside>: Describes a content area located aside from the main page
<bdi>: Segregate a section of a text which is formatted in a different direction
<command>: Command button
<details>: Additional details to hide/view including the tag <summary> specifying a visible heading for the details.
<dialog>: Defines a dialog box
<progress>: Describes the progess of a task
<ruby>: Defines a ruby annotation
<rt>: Describes an explanation or pronunciation of characters
<section>:Defines a section in a document
<time>: Defines a date/time
<wbr>: Defines a line-break

Form Elements

Controls including <calendar>, <date>, <time>, <email>, <url>, <search>, <color>, <range>, <tel>

<datalist>: Identifies a list of pre-defined options

<keygen>: Describes a key-pair generator field

<output>: Describes the result of a computation

Media Elements

<audio>: Defines sound content

<embedgt: Defines a container for an external applicatio or a plug-in

<video>: Defines movie/video

<track>: Defines text tracks for both <haudio> and <video>

Click here to see an audio.html example

Click here to see a video.html example

Inline Scalable Vector Graphics (SVG)

SVG allows to use vector-based graphics on the Web in XML format

SVG doesn't lose quality when zoomed/resized

Elements and attributes in SVG files can be animated

Unlike other images formats, SVG images can be created/edited with text editors

SVG images can be compressed, indexed, scripted, and searched

SVG images can be printed with high quality and resolution

Differences between Canvas and SVG are shown here