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:
|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.|
|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.|
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:
|<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:
|<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:
|<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|
The following HTML elements are removed from HTML5:
<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt>