Difference between HTML4 & HTML5

Hey guys,

Lets see briefly what is the difference between HTML4 & HTML5 today…

Before get into deep of html5 lets look into some basics.. ūüėČ

Do u know what is doctype and why its used??

The HTML syntax of HTML5 requires a doctype to be specified to ensure that the browser renders the page in standards mode. The doctype has no other purpose.

In order to deal both with content written according to Web standards and with content written according to legacy practices that were prevalent in the late 1990s, today’s Web browsers implement various engine modes.

Names of Browser Engines

Browser Engine ECMAScript Engine
Firefox, Mozilla Gecko SpiderMonkey
Internet Explorer 4…7 Trident jscript
Mac IE 5 Tasman jscript
Opera 7…9.2 Presto linear_b
Opera 9.5 Presto Core 2 futhark
Konqueror KHTML KJS
Safari WebKit JavaScriptCore

Chrome РWebKit, V8 JavaScript engine

  • The script engine of Mac IE 5 is a port of the engine that is used in Windows IE although the layout engines are different.
  • WebKit and JavaScriptCore are forks of KHTML and KJS.

For more..Clickhere

What is HTML5?

HTML5 is the latest version of HTML and XHTML. It comes up with a number of features like drag and drop, multimedia, video playback, APIs, form control etc.

What are the benefits of HTML5?

  • HTML5 brings in new elements to structure the web pages as compared to HTML4 which uses common structures such as: ‚Äď header, columns etc.
  • These new elements are: header, nav, section, article, aside, ¬†footer etc.

New Elements

The following elements have been introduced for better structure:

  • section¬†represents a generic document or application section. It can be¬†used together¬†with the¬†h1,¬†h2,¬†h3,¬†h4,¬†h5, and¬†h6¬†elements to indicate the document structure.
  • article¬†represents an independent piece of content of a document, such as a blog entry or newspaper article.
  • aside¬†represents a piece of content that is only slightly related to the rest of the page.
  • hgroup¬†represents the header of a section.
  • header¬†represents a group of introductory or navigational aids.
  • footer¬†represents a footer for a section and can contain information about the author, copyright information, etc.
  • nav¬†represents a section of the document intended for navigation.
  • figure¬†represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.
    <figure>
     <video src="example.webm" controls></video>
     <figcaption>Example</figcaption>
    </figure>

    figcaption can be used as caption (it is optional).

Then there are several other new elements:

  • video¬†and¬†audio¬†for multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent.¬†source¬†elements are used together with these elements if there are multiple streams available of different types.
  • track¬†provides text tracks for the¬†video¬†element.
  • embed¬†is used for plugin content.
  • mark¬†represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
  • progress¬†represents a completion of a task, such as downloading or when performing a series of expensive operations.
  • meter¬†represents a measurement, such as disk usage.
  • time¬†represents a date and/or time.
  • WHATWG HTML has¬†data¬†which allows content to be annotated with a machine-readable value.
  • WHATWG HTML has¬†dialog¬†for showing a dialog.
  • ruby,¬†rt, and¬†rp¬†allow for marking up ruby annotations.
  • bdi¬†represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting.
  • wbr¬†represents a line break opportunity.
  • canvas¬†is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
  • command¬†represents a command the user can invoke.
  • details¬†represents additional information or controls which the user can obtain on demand. The¬†summary¬†element provides its summary, legend, or caption.
  • datalist¬†together with the a new¬†list¬†attribute for¬†input¬†can be used to make comboboxes:
    <input list="browsers">
    <datalist id="browsers">
     <option value="Safari">
     <option value="Internet Explorer">
     <option value="Opera">
     <option value="Firefox">
    </datalist>
  • keygen¬†represents control for key pair generation.
  • output¬†represents some type of output, such as from a calculation done through scripting.

The¬†input¬†element’s¬†type¬†attribute now has the following new values:

The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user’s address book, and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.

For more clickhere