Differences between Html4 and Html5

-

HTML5 has several goals which differentiate it from HTML4.

The primary one is consistent, defined error handling. As you know, HTML purposely supports 'tag soup', or the ability to write malformed code and have it corrected into a valid document. The problem is that the rules for doing this aren't written down anywhere. When a new browser vendor wants to enter the market, they just have to test malformed documents in various browsers (especially IE) and reverse-engineer their error handling. If they don't, then many pages won't display correctly (estimates place roughly 90% of pages on the net as being at least somewhat malformed).

So, HTML5 is attempting to discover and codify this error handling, so that browser developers can all standardize and greatly reduce the time and money required to display things consistently. As well, long in the future after HTML has died as a document format, historians may still want to read our documents, and having a completely defined parsing algorithm will greatly aid this.

The secondary goal of HTML5 is to develop the ability of the browser to be an application platform, via HTML, CSS, and Javascript. Many elements have been added directly to the language that are currently (in HTML4) Flash or JS-based hacks, such as <canvas>, <video>, and <audio>. Useful things such as Local Storage (a js-accessible browser-builtin sql database, for storing information beyond what cookies can hold), new input types such as date for which the browser can expose easy user interface (so that we don't have to use our js-based calendar date-pickers), and browser-supported form validation will make developing web applications much simpler for the developers, and make them much faster for the users (since many things will be supported natively, rather than hacked in via javascript).

There are many other smaller efforts taking place in HTML5, such as better-defined semantic roles for existing elements (<strong> and <em> now actually mean something different, and even <b> and <i> have vague semantics that should work well when parsing legacy documents) and adding new elements with useful semantics - <article>, <section>, <header>, <aside>, and <nav> should replace the majority of <div>s used on a web page, making your pages a bit more semantic, but more importantly, easier to read. No more painful scanning to see just what that random </div> is closing - instead you'll have an obvious </header>, or </article>, making the structure of your document much more intuitive.


Differences :
                    HTML                                                                                 HTML5

HTML
HTML5

DOCTYPE is much longer as HTML4 is based on SGML-based.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
DOCTYPE is required to enable standards mode for HTML documents. 
<!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 usingJavaScript 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.

Works with all old browsers
Most of modern browser have started supporting HTML5 specification e.g. Firefox, Mozilla, Opera, Chrome, Safari  etc.

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



Tags : Html5, Html4, Difference between Html4 and Html5

Comments

  1. Admiral AdneyJuly 11, 2012 at 1:10 AM

    I was searching for symfony web development and landed up on your post and i must say thanks for sharing such useful information.

    ReplyDelete

Post a Comment

Popular posts from this blog

Create Desktop Application with PHP

-
Image
Here we will show you how you can create a web-based desktop application using PHP, CSS, HTML, and JavaScript with the help of PHP Desktop. In fact, PHP Desktop is an easy and simple solution we can use to create very powerful and complex desktop application. What Is PHP Desktop? PHP Desktop is an open source project founded by Czarek Tomczak in 2012 to provide a way for developing native desktop GUI applications using web technologies such as PHP, HTML5, JavaScript and SQLite. Mind you, the development workflow you are used to while creating web applications remains the same. The step of turning an existing website into a desktop application is basically a matter of copy and paste. PHPDesktop is an all-made container that will just swallow your project. With that, you can easily transform an existing website into a desktop application without any modification. When you download PHP Desktop , you will have some set of files and folders; among them you will have a ...
Read more

Insert pandas dataframe into Mongodb

-
Image
Insert pandas dataframe into Mongodb Pandas is most commonly used open-source Python Library for data manipulation, it provides high-performance data manipulation and analysis using its powerful data structures. Here we use pandas library to insert dataframe into Mongodb. I am taking Yahoo finance library to get dataset for a ticker and save that data into Mongo. First, we import all the necessary libraries from pandas_datareader import data as pdr import pandas as pd from pymongo import MongoClient import yfinance as yf yf.pdr_override() We get data from yahoo finance  # download dataframe data1 = pdr.get_data_yahoo("SPY", start="2017-01-01", end="2017-01-15") Now, we make a connection to Mongodb. Here I am connecting to local MongoDb Server on port 27018 and then creating a database with the name `finance`. MongoDB has a collection(table) and I name it as `mycollection`. #Step 1: Connec...
Read more

Add and delete columns dynamically in an HTML table

-
To add new rows to a table (or table section) you can use insertRow, but there isn't an equivalent insertColumn in the  DOM table methods . So what you can do is iterate the rows in the table (or table section), and call insertCell for each row. Javascript:   tableaddcolumn.js // 2006-08-21 - Created // 2006-11-05 - Modified - head and body function addColumn(tblId) { var tblHeadObj = document.getElementById(tblId).tHead; for (var h=0; h<tblHeadObj.rows.length; h++) { var newTH = document.createElement('th'); tblHeadObj.rows[h].appendChild(newTH); newTH.innerHTML = '[th] row:' + h + ', cell: ' + (tblHeadObj.rows[h].cells.length - 1) } var tblBodyObj = document.getElementById(tblId).tBodies[0]; for (var i=0; i<tblBodyObj.rows.length; i++) { var newCell = tblBodyObj.rows[i].insertCell(-1); newCell.innerHTML = '[td] row:' + i + ', cell: ' + (tblBodyObj.rows[i].cells.length - 1) } } function deleteColumn(tblId) { v...
Read more