HTML5 is the latest standard for HTML.
It was specially designed to deliver rich content without the need for additional plugins. The current version delivers everything from animation to graphics, music to movies, and can also be used to build complicated web applications.
HTML5 is also cross-platform. It is designed to work whether you are using a PC, or a Tablet, a Smartphone, or a Smart TV.
In HTML5 there is only one DOCTYPE declaration, and it is very simple:
Below is a simple HTML5 document, with the minimum of required tags:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><em>Title of the document</em></title> </head> <body> <em> Content of the document......</em> </body> </html>
What is New in HTML 5?
1) New Elements
2) New Attributes
3) New Types
4) Full CSS3 Support
5) Video and Audio
6) 2D/3D Graphics
New Elements :- Below is a list of the new main HTML elements, introduced by HTML5. <canvas>, <audio>, <video>, <datalist>, <footer>, <header>, nav, etc… ()
New Attributes :- HTML5 has several new attributes for <form> and <input>.
New attributes for <form>: autocomplete and novalidate
New attributes for <input>: autocomplete, autofocus, required, pattern, placeholder etc…
New Types :- HTML5 has several new input types for forms. These new features allow better input control and validation.
color , date, datetime, datetime-local, email, month, number , url etc…
Geolocation :- HTML5 Geolocation is used to locate a user’s geographical position.
Drag/Drop:- Drag and drop is a very common feature. It is when you “grab” an object and drag it to a different location. In HTML5, drag and drop is part of the standard,and any element can be draggable.
Web Storage:- With HTML5, web pages can store data locally within the user’s browser. Earlier, this was done with cookies.
However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website’s performance.
The data is stored in name/value pairs, and a web page can only access data stored by itself.
HTML5 Web Storage provides two new objects for storing data on the client:-
window.localStorage – stores data with no expiration date
window.sessionStorage – stores data for one session (data is lost when the tab is closed)
HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
Offline browsing – users can use the application when they’re offline
Speed – cached resources load faster
Reduced server load – the browser will only download updated/changed resources from the server
To enable application cache, include the manifest attribute in the document’s <html> tag:
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
Every page with the manifest attribute specified will be cached when the user visits it. If the manifest attribute is not specified, the page will not be cached (unless the page is specified directly in the manifest file).
The Manifest File:-
The manifest file is a simple text file, which tells the browser what to cache (and what to never cache). The manifest file has three sections:
CACHE MANIFEST – Files listed under this header will be cached after they are downloaded for the first time
NETWORK – Files listed under this header require a connection to the server, and will never be cached
FALLBACK – Files listed under this header specifies fallback pages if a page is inaccessible
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html/ /offline.html
Server-Sent Events :-
HTML5 Server-Sent Events allow a web page to get updates from a server.
Programming is Easy…