Scribd
Upload
56 views

HTML 4 HTML 5

The document compares HTML 4 and HTML 5. Regarding HTML 4, it notes that the doctype declaration and character encoding are longer, multimedia requires third-party plugins, true user location is difficult, and cookies are used for client-side storage. HTML 5 simplifies these areas - the doctype is simply <!DOCTYPE html>, multimedia like audio and video are native elements, geolocation APIs enable user location detection, and local storage replaces cookies. Other improvements in HTML 5 include added elements, dropped elements, vector graphics support, and improved JavaScript threading.

Uploaded by

Abhi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
56 views

HTML 4 HTML 5

The document compares HTML 4 and HTML 5. Regarding HTML 4, it notes that the doctype declaration and character encoding are longer, multimedia requires third-party plugins, true user location is difficult, and cookies are used for client-side storage. HTML 5 simplifies these areas - the doctype is simply <!DOCTYPE html>, multimedia like audio and video are native elements, geolocation APIs enable user location detection, and local storage replaces cookies. Other improvements in HTML 5 include added elements, dropped elements, vector graphics support, and improved JavaScript threading.

Uploaded by

Abhi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

HTML

1. Doctype declaration in Html is too longer


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/stric...">
2. character encoding in Html is also longer
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
3. Audio and Video are not part of HTML4
4. Vector Graphics is possible with the help of technologies such as VML, Silverlight, Flash etc
5. It is almost impossible to get true GeoLocation of user browsing any website especially if it
comes to mobile devices.
6. Html5 use cookies
7. Not possible to draw shapes like circle, rectangle, triangle.
8. Does not allow JavaScript to run in browser. JS runs in same thread as browser interface.
9. Works with all old browsers

HTML5

1. DOCTYPE declaration in Html5 is very simple "<!DOCTYPE html>


2. character encoding (charset) declaration is also very simple <meta charset="UTF-8">
3. Audio and Videos are integral part of HTML5 e.g. <audio> and <video> tags.
4. Vector graphics is integral part of HTML5 e.g. SVG and canvas
5. JS GeoLocation API in HTML5 helps identify location of user browsing any website (provided
user allows it)
6. It provides local storage in place of cookies.
7. Using Html5 you can draw shapes like circle, rectangle, triangle.
8. Allows JavaScript to run in background. This is possible due to JS Web worker API in HTML5
9. Supported by all new browser.

HTML 4 HTML 5

Syntax: Syntax:
It's Syntax is little complex. It has Simplified and clear syntax.
For doctype used: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" For doctype use: <!DOCTYPE html>
"http://www.w3.org/TR/html4/strict.dtd">

Multimedia: Multimedia:
The multimedia content was integrated in web pages via third party plugins HTML5 contains built in support for integrated multimedia files into web page
such as Silverlight and flash. via video and audio tags.

Added more elements to HTML 5 which does not exist in HTML 4. HTML 5 has many new elements that are not present in HTML 4.

The elements exist in HTML 4 has been removed from HTML 5 and few HTML 5 has dropped certain elements.
deprecated tags.

Was developed by World Wide Web consortium and WHATWG (web hypertext Is being developed by web hypertext application technology working group
application technology working group). (WHATWG) and W3C HTML WG.

User Geographical location: User Geographical location:


In HTML4, it was an extremely cumbersome task to get the geographical On the other hand, in HTML5 is extremely easy to get the user location. HTML5’s
locations of the visitors visiting the site. It was even difficult when the website JS GeoLocation can be leveraged to identify the location of the user
was accessed through mobile devices. accessing the website.

Client Side storage: Client Side storage:


In HTML4, in order to store important data on client side, browser’s cache was In HTML5, this issue has been addressed via Web SQL database and
used. However, that cache is limited and doesn’t support relational storage application cache that can be access via HTML5’s JavaScript interface.
mechanism.
Client Server Communication: Client Server Communication:
In HTML4 the communication between the client and server was done through Other side, HTML5 contains web sockets that allow full duplex communication
streaming and long polling, since there are no web sockets available in HTML4. between clients and servers.

JavaScript Threading Mechanism: JavaScript Threading Mechanism:


In HTML4, JavaScript and the browser interface with which user interacts, run in HTML5 contains JS Web Worker API which allows JavaScript and Browser
the same thread which affects performance. interface to run in separate threads.

Browser Compatibility: Browser Compatibility:


HTML4 is an established standard for developing browser applications and has On the other hand, HTML5 is still in the process of evolution and the currently
been in use for more than 10 years. For this reason, HTML4 is compatible with available tags are being modified and also new tags are being added.
almost all web-browsers. Therefore, HTML5 lags behind HTML4 in terms of compatibility with the browsers.

New Semantic/Structural Elements-


HTML5 offers new elements for better document structure:

Tag Description

<dialog> Defines a dialog box or window

<footer> Defines a footer for a document or section

<header> Defines a header for a document or section

<main> Defines the main content of a document

<time> Defines a date/time

New Form Elements

Tag Description
<datalist> Specifies a list of pre-defined options for input controls

<output> Defines the result of a calculation

New Form Elements

Tag Description

<datalist> Specifies a list of pre-defined options for input controls

<output> Defines the result of a calculation

HTML5 Graphics

Tag Description

<canvas> Draw graphics, on the fly, via scripting (usually JavaScript)

<svg> Draw scalable vector graphics

Definition and Usage


The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).

The <canvas> tag is only a container for graphics, you must use a script to actually draw the graphics.

Note: Any text inside the <canvas> element will be displayed in browsers that does not support <canvas>.

Attributes

Attribute Value Description

height pixels Specifies the height of the canvas

width pixels Specifies the width of the canvas


Definition and Usage
The <svg> tag defines a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /

Definition and Usage


The <time> tag defines a human-readable date/time.

Attribute Value Description

datetime datetime Represent a machine-readable date/time of the <time> element

Media Elements
Definition and Usage
The <audio> tag defines sound, such as music or other audio streams.

Attributes

Attribute Value Description

autoplay autoplay Specifies that the audio will start playing as soon as it is ready

controls controls Specifies that audio controls should be displayed (such as a play/pause
button etc)

loop loop Specifies that the audio will start over again, every time it is finished

muted muted Specifies that the audio output should be muted

preload auto Specifies if and how the author thinks the audio should be loaded when
metadata the page loads
none

src URL Specifies the URL of the audio file

Definition and Usage


The <video> tag specifies video, such as a movie clip or other video streams.

• MP4 = MPEG 4 files with H264 video codec and AAC audio codec
• WebM = WebM files with VP8 video codec and Vorbis audio codec
• Ogg = Ogg files with Theora video codec and Vorbis audio codec

Attribute Value Description

autoplay Autoplay Specifies that the video will start playing as soon as it is ready

controls Controls Specifies that video controls should be displayed (such as a play/pause
button etc).

height Pixels Sets the height of the video player

loop Loop Specifies that the video will start over again, every time it is finished

muted Muted Specifies that the audio output of the video should be muted

poster URL Specifies an image to be shown while the video is downloading, or until
the user hits the play button

preload auto Specifies if and how the author thinks the video should be loaded when
metadata the page loads
none

src URL Specifies the URL of the video file

width Pixels Sets the width of the video player

You might also like