HTML5 – New Features and Difference between HTML4 & HTML5
HTML5 – New Features
Some of the most interesting new features in HTML5:
The <canvas> element for 2D drawing
The <video> and <audio> elements for media playback
Support for local storage
New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
New form controls, like calendar, date, time, email, url, search
Difference between HTML and HTML5:
| HTML | HTML5 |
| DOCTYPE is much longer as HTML4 is based on SGML-based. | DOCTYPE is required to enable standards mode for HTML documents. |
| <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> | <!DOCTYPE html> |
| Audio and Video are not part of HTML4 specification. | Audio and Videos are integral part of HTML5 specifications e.g. <audio> and<video> tags. |
| Vector Graphics is possible with the help of technologies such as VML, Silverlight, Flash etc | Vector graphics is integral part of HTML5 e.g. SVG and canvas |
| It is almost impossible 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) |
| Browser cache can be used as temporary storage. | Application Cache, Web SQL database and Web storage is available as client side storage. |
| Accessible using JavaScript interface in HTML5 compliant browsers. | |
| Web Sockets are not available. Generally used mechanisms are long polling and streaming. | Full duplex communication channels can be established with Server using Web Sockets. |
| Accessible using JavaScript interface in HTML5 compliant browsers. | |
| Does not allow JavaScript to run in browser. JS runs in same thread as browser interface. | Allows JavaScript to run in background. This is possible due to JS Web worker API in HTML5 |
Difference in Tags:
<!DOCTYPE html> : In HTML 4.01, there are three different <!DOCTYPE> declarations but In HTML 5 there is only one <! DOCTYPE html>.
<a >: In HTML 4.01, the <a> tag could be either a hyperlink or an anchor. In HTML5, the <a> tag is always a hyperlink, but if it has no href attribute, it is only a placeholder for a hyperlink.
<acronym> : The <acronym> tag is not supported in HTML5. Use the <abbr> tag instead. The <acronym> tag was used to define acronyms in HTML 4.01.
<applet>: The <applet> tag is not supported in HTML5. Use the <object> tag instead.
<strong>: In HTML 4.01, the <strong> tag defines strong emphasized text, but in HTML5 it defines important text.
<body> : In HTML5, all <body> specific attributes are removed, while in HTML 4.01 they were deprecated.
<hr>: In HTML 4.01, the <hr> tag represented a horizontal rule. In HTML5, the <hr> tag defines a thematic break. The <hr> element is used to separate content (or define a change) in an HTML page.
<map> : In HTML5, if the id attribute of the <map> tag is also specified, it must have the same value as the name attribute.
<meta> : The scheme attribute is not supported in HTML5.
HTML5 has a new attribute, charset, which makes it easier to define charset:
HTML 4.01: <Meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
HTML5 : <meta charset=”UTF-8”>
<script> : The “type” attribute is required in HTML 4, but optional in HTML5.
<small > : In HTML 4.01 the small element is displayed as smaller text. In HTML5 the small element defines small text and other side comments, and is displayed as smaller text.
<table>: Only the “border” attribute is supported in HTML5, and it only allows the values ” ” or “1”.
New Semantic/Structural Elements
HTML5 offers new elements for better structure:
| Tag | Description |
| <article> | Defines an article |
| <aside> | Defines content aside from the page content |
| <bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it |
| <command> | Defines a command button that a user can invoke |
| <details> | Defines additional details that the user can view or hide |
| <summary> | Defines a visible heading for a <details> element |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <figcaption> | Defines a caption for a <figure> element |
| <footer> | Defines a footer for a document or section |
| <header> | Defines a header for a document or section |
| <hgroup> | Groups a set of <h1> to <h6> elements when a heading has multiple levels |
| <mark> | Defines marked/highlighted text |
| <meter> | Defines a scalar measurement within a known range (a gauge) |
| <nav> | Defines navigation links |
| <progress> | Represents the progress of a task |
| <ruby> | Defines a ruby annotation (for East Asian typography) |
| <rt> | Defines an explanation/pronunciation of characters (for East Asian typography) |
| <rp> | Defines what to show in browsers that do not support ruby annotations |
| <section> | Defines a section in a document |
| <time> | Defines a date/time |
| <wbr> | Defines a possible line-break |
New Media Elements
HTML5 offers new elements for media content:
| Tag | Description |
| <audio> | Defines sound content |
| <video> | Defines a video or movie |
| <source> | Defines multiple media resources for <video> and <audio> |
| <embed> | Defines a container for an external application or interactive content (a plug-in) |
| <track> | Defines text tracks for <video> and <audio> |
New Form Elements
HTML5 offers new form elements, for more functionality:
| Tag | Description |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <keygen> | Defines a key-pair generator field (for forms) |
| <output> | Defines the result of a calculation |
Removed Elements
The following HTML elements are removed from HTML5:
<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt>
Conclusion:
HTML5 is being proved as one of the powerful tool for webpage design. With HTML5, streaming of audio and video without need of third party plug-in such as flash is possible. Player controls can be created that are fully programmable with JavaScript. In HTML5 we have new structural elements instead of traditional div tags to create page template, the final result will be a cleaner and more organized code. HTML5 allows storing data locally from client side. The data can be accessed to support the web application and it can even be accessed when the client is disconnected for a short period of time. There are methodologies for storing data: session storage, local storage and database storage. HTML5 introduces new elements and features that allow developers to improve interoperability, handling elements in a precise way saving time and costs.
