HTML4 Vs HTML5 Comparison
HTML4 has been a standard web development for more than 10 years. HTML4 is approved and ratified as a standard language for browsers by the World Wide Web Consortium (W3C), an organization which specifies and approves standards for web technologies.
However, with the advent of smart-phones era, things have totally changed and that change has effected or rather revolutionized the way websites are developed. Now apart from targeting desktop PCs and laptops, web-developers have to keep in mind that their website would be accessed by mobile-user; and with the growing number of mobile users, this concern is growing proportionally.
Though, HTML4 is still a W3C standard for browser applications, it doesn’t fully cater to the changing trends of the computing industry. Therefore, HTML5 has been developed with intent to cop-up with these new challenges in web industry. HTML5 is more flexible, robust and advanced as compare to its older counterpart.
This article presents an overview of the comparison between HTML5 and HTML4. In the first section, some of the major differences between the HTML4 and HTML5 have been presented and then new tags that have been added to HTML5 have been explained in detail with the help of examples.
Following are some of the major characteristics that distinguish HTML5 from HTML4.
1. Simplified and Clear Syntax
The syntax in HTML5 is extremely clear and simple as compared to HTML4. One example of this is the DOCTYPE element. In HTML4 the DOCTYPE declaration was too messy and lengthy and used to refer an external source. However in HTML5 DOCTYPE element has been made extremely simple. For instance a mere <!DOCTYPE html> is enough to specify the document type.
2. Multimedia Elements
HTML5 contains built in support for integrated multimedia files into web page via video and audio tags. Previously, in HTML4, the multimedia content was integrated in web pages via third party plugins such as Silverlight and flash.
3. Accessing User Geographical location
Previously in HTML4, it was an extremely cumbersome task to get the geographical locations of the visitors visiting the site. It was even difficult when the website was accessed through mobile devices. On the other hand, in HTML5 is extremely easy to get the user location. HTML5’s JS GeoLocation can be leveraged to identify the location of the user accessing the website.
4. Client Side storage
5. Client Server Communication
In HTML4 the communication between the client and server was done through streaming and long polling, since there are no web sockets available in HTML4. On the contrary, HTML5 contains web sockets that allow full duplex communication between clients and servers.
7. Browser Compatibility
As aforementioned, HTML4 is an established standard for developing browser applications and has been in use for more than 10 years. For this reason, HTML4 is compatible with almost all web-browsers. On the other hand, HTML5 is still in the process of evolution and the currently available tags are being modified and also new tags are being added. Therefore, HTML5 lags behind HTML4 in terms of compatibility with the browsers.
Several tags in HTML4 have been removed from HTML5 or their functionality has been modified. Following are some of the tags that are removed from HTML5 or have different functionality in HTML5 as compared to HTML4.
1. <Applet> removed <Object> Added in HTML5
HTML4 contained an <applet> tag that was used for displaying applets in a web browser. However, in HTML5, this applet tag has been removed. In order to display applet type items, a new <object> tag has been introduced in HTML5.
2. <Acronym> removed <Abbr> Added in HTML5
HTML4 contained an <acronym> tag that was used for displaying abbreviation’s in a web browser. However, in HTML5, this tag has been removed. A new <abbr> tag has been introduced in HTML5.
3. Difference in usage of <hr> tag
The <hr> tag was used to draw a line in HTML4 and all the previous versions of HTML, however in HTML5, the functionality of this tag has been changed and it is used for defining a thematic break in the web page.
4. Difference in usage of <a> tag
In HTML4 and previous versions, the <a> tag was used as anchor as well as for referring to a link. In the HTML5, the <a> tag is used only as a hyperlink. But if the href tag is removed from the <a> tag, the <a> tag can be used as a place holder for other hyperlinks.
5. Schema attribute removed from <meta> tag in HTML5
The <meta> tag is defined in the header section of the HTML document and contains information about the data. In the previous versions of HTML, including the HTML4, this tag used to contain an attribute called schema that defined the schema of the document. However, in HTML5, this tag has been removed.
Following are some of the attributes that have been modified in HTML5.
1. <canvas> Tag:
The markup looks like this:
<canvas id="canvas1" width =”400” height= “300”>Update your browser</canvas>
The id attribute is used to refer the canvas in the script and width and height are used to define the size of the canvas.
You can have multiple canvases on one html page. The first example of this tutorial demonstrates the usage of canvas element.
Browser Support for canvas tag
Browser - Version
2. New Media Elements in HTML5:
HTML 5 has included several new media elements for displaying media content. Following are some of the most important media elements included in HTML5.
2a. <video> Tag:
HTML5 defines a new element which specifies a standard way to embed a video file on a web page. The file formats supported for the <video> element are:
Width and height attribute defines the size. It is also a good idea to always include width and height attributes.If height and width are set, the space required for the video is reserved when the page is loaded.However, without these attributes, the browser does not know the size of the video, and cannot reserve the appropriate space to it.The effect will be that the page layout will change while the video loads. The output of the code in Example2 is as follows:
Browser Support for <video element>:
Browser - Version
HTML5 defines a new element which specifies a standard way to embed an audio file on a web page. The file formats supported for the <audio> element are:
Browser Support for <audio element>:
Browser - Version
The <article> element shows the portion of a web page that contains a complete and independent material.
4. <main> Tag
The <main> tag is also a new addition in HTML5. The <main> tag describes the material which is specific to only that document. The material which is used again and again in the documents should not be included in the <main> tag.The <main> tag can be used only one time in a page. There should be no other <main> on the same page.Another rule to be followed is that <main> tag cannot be used as descendant of an <article>, < aside >, < header >, <footer>, or <nav> element. Example8 demonstrates the usage of <main> tag. The fifth example of this tutorial demonstrates the usage of the <main> tag.
Browser Support for main tag:
Browser - Version
The <mark> element allows you to highlight text in a webpage. The tag has also been introduced in HTML5 and did not exist previously. The following example demonstrates the usage of <mark> tag.
Video Sample by TechSlide
Audio Sample by archive.org
|All times are GMT +5.5. The time now is 14:00.|