Difference between HTML4 and HTML5

This blog include maximum details about html4 and html5 so that we can recall all the features / difference between HTML4 and HTML5. I am trying to keep things simple so that once can understand, presuming that you have little knowledge about html4 and html5.

1. HTML5 DocType and Charset.
UP HTML4 there are multiple type of document type declarations where exists (Strict, Transitional, Frameset) and was used as per the need. Which was very difficult to understand and remember as well. HTML5 has made it easy, no need to specify dtd urls. Similarly Meta tag definition is optimized, please see the syntax bellow.

 1. < !doctype html>
 2. 

2. video and audio embed tags in HTML 5.
Audio and video tag syntax are very simple one, please refer the bellow.



HTML5 has strong support for media tags. Other than audio and video tags, it also supports following tags:
tag acts as a container for external application.defines text track for media (audio/ video).is helpful for multiple media sources for audio / video.

3. canvas Element in HTML 5
Canvas element can use to draw graphics with the help of scripting language JavaScript. Canvas is used as a container for graphics / images and all other operations are done via scripting languages e.g. Recently i have used html5 canvas for twitter twibbon functionality like show user photo inside canvas, they can resize, rotate, crop and apply twibbon image over user photo and publish it to facebook and twitter. We can draw images, graphs and a bit of animations etc. using element.

4. different types of storage in HTML5
HTML5 has capability to store data locally. Previously, it was done via cookies. The exciting thing about this storage is that it’s fast and secure.

There are two different objects which can be used to store data locally
– localStorage: Object stores data for a longer period of time even if the browser is closed. It helps to optimize the performance, reuse the data for analysis e.g.Shopping cart website can do this

– sessionStorage: session storage object stores data for a specific session. e.g. Products added by user in shopping cart.

5. What are the new Form Elements introduced in HTML 5?
HTML5 has number of new form elements few of them are follows
datalist
datetime
output
keygen
date
month
week
time
number
range
email
url

6. What are the deprecated Elements in HTML5 from HTML4?
Deprecated elements from HTML 4 to HTML 5 are as follow
frame
frameset
noframe
applet
big
center
basefront

7. What are the new APIs provided by HTML 5 standard?
HTML5 comes with number of new APIs. Few of them are as follows
Media API
Text Track API
Application Cache API
User Interaction
Data Transfer API
Command API
Constraint Validation API
History API and many more….

8. difference between HTML 5 Application Cache and regular HTML Browser Cache?
HTML 5 “Application Cache” is key feature that enables us to make an offline version of a web application. It allows to fetch few / all of website contents e.g. HTML files, CSS, images, JavaScript, etc locally. This feature will give the best speeds and the site performance. This is achieved with the help of a manifest file as follows:

< !doctype html>

.....

Share this nice post:

Leave a Reply

Your email address will not be published. Required fields are marked *