web development to the next level
Vineeth N K
What is HTML5 ?
HTML5 is a specification that describes some new tags and markup, as well
HTML5 includes the fifth revision of the HTML markup language, CSS3, and
complex applications that previously could be created only for desktop
HTML5 does not belong to a company or a specific browser. It has been
forged by a community of people interested in evolving the web and a
consortium of technological leaders that includes Google, Microsoft, Apple,
Mozilla, Facebook, IBM, HP, Adobe, and many others.
What is HTML5 ?
Evolution of HTML 4.0 and DOM level-2.
Removal or redefinition of presentational markup
Formalized foundation-level APIs
The evolution of browser into a programming platform.
Formalized the syntax and many
of the rules that were already
Legally ignored by browser
Manufactures who began to
implement their own tags.
Web Standard Project
Pushed for std. adoption added
weight to the W3C
recommendations & promoted
standard based browsers
Stabilized syntax and structure
of HTML becomes the standard for
Designed to move HTML towards
XML DTDs often caused it to
render as HTML.
More Structured XML based
The Growth of the Web
High bandwidth connections
increase, as does the demand for
multimedia & applications driven
by technologies such as Flash,
Work on XHTML 2.0 begins.
Focusing on strictly structural
Rise of HTML5
2004 : The Rise of HTML5.
2004 : WHATWG (Web Hypertext Application
Technology Working Group) begins what
will become HTML5.
2007 : W3C charters new working group adopts
WHATWG’s work, renamed HTML5
2009 : W3C does not renew the XHTML 2.0
2010 : Driven in large part by Apple, Google &
public interest in HTML5
WHY DO WE NEED HTML5?
New Structure And Syntax.
Multimedia with less reliance on Plug-ins
Any user agent that support HTML5 also support
documents written in previous versions of HTML.
One of the best reasons for you to embrace
HTML5 today is that it works in most existing
Previous specifications left error handling up to the
XHTML 2.0 featured draconian error handling.
Pages would stop rendering if an error was found.
HTML5 features detailed algorithms for parsing errors.
New Structure And Syntax
DOCTYPE has been simplified.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<!DOCTYPE html >
HTML5 has introduced a lot of new elements,
but the specification also deprecates quite a
few common elements
Aside from the presentational elements, support
for frames has been removed.
Despite the widespread use, frames caused so
many usability and accessibility issues
A few other elements are gone because there are
better options are available.
acronym gets replaced by abbr.
applet gets replaced by object.
dir gets replaced by ul.
In addition to deprecated elements, there are many
attributes that are no longer valid.
link, vlink, alink, and text attributes on the body tag
height and width
scrolling on the iframe element
hspace and vspace
cellpadding, cellspacing, and border on table
New Structural tags and attributes.
developers to wrap elements with extra div tags
with IDs such as banner, sidebar, article, and
As nesting depth of the div tag
increases, more will be the confusion.
HTML5 specification introduces new tags specifically
designed to divide a page into logical regions.
Defines a header region of a page or section.
Defines a footer region of a page or section.
Defines a navigation region of a page or section.
Defines a logical region of a page or a grouping of
Defines an article or complete piece of content.
Defines secondary or related content.
Custom data attributes
Allows addition of custom attributes to any
elements using the data- pattern. [All browsers
Describes an amount within a range. [C5, F3.5, S4, O10]
Control that shows real-time progress toward
goal. [Unsupported at publication time.]
NEW FORM ELEMENTS
Email field [<input type="email">]
Displays a form field for email addresses.
URL field [<input type="url">]
Displays a form field for URLs.
Telephone field [<input type="tel">]
Displays a form field for telephone numbers.
Search field [<input type="search">]
Displays a form field for search keywords.
Slider (range) [<input type="range">]
Displays a slider control.
Number [<input type="number">]
Displays a form field for numbers, often as a
Date fields [<input type="date">]
Displays a form field for dates. Supports date,
month, or week.
Dates with Times [<input type="datetime">]
Displays a form field for dates with times.
Supports datetime, datetime-local, or time.
Color [<input type="color">]
Displays a field for specifying colors.
Autofocus support [<input type="text" autofocus>]
Support for placing the focus on a specific
Placeholder support [<input type="email"
Support for displaying placeholder text inside of a form field.
In-place editing support [<p contenteditable></p>]
Support for in-place editing of content via the browser.
You don’t need Flash or Silverlight for video, audio,
and vector graphics anymore.
<video src=” controls>
Your browser does not support the video element.
Multiple Files & Scripting
<source src="foo.ogg" type="video/ogg">
Your browser does not support the video element.
The canvas element lets us create vector images
<canvas id="myCanvas" width="150" height="150">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
Canvas can be used to create simple or complex
shapes or even create graphs and charts without
resorting to server-side libraries, Flash, or other
Video and audio API
This provides multimedia plug-in within the browser.
Inline editing API
Editing of contents in a web documents directly through the
Offline Application API
• Allows Applications to run without internet
• Content renewed when connection restored.
• Can store 5MB of data.
• Application cache stores the offline details.
• Options in HTML5 to store data.
i. Web SQL Database or IndexedDB.
ii. Web storage (localStorage, sessionStorage)
Enables Applications to access to the browser
Web Protocol API
Allows Applications to register themselves to the handlers of url
Eg: Mail Applications could register themselves to handle mail
protocols. File upload applications to FTP and so on.
Drag & Drop API
Allows Application to enable, control and
respond to the dragging and dropping of page
Geolocation determines a person’s whereabouts
by looking at their computer’s IP address, MAC
address, Wi-Fi hotspot location, or even GPS
coordinates if available.
var lat = position.coords.latitude;
var lon = position.coords.longitude;
2D Canvas Drawing API
Local Storage API
Web Workers API
Allows you to do things like fire up long-running scripts to handle
computationally intensive tasks, but without blocking the UI or other
scripts to handle user interactions.
Web Socket API
Creates a stateful connection between a browser and a server.
Sends messages between windows with content loaded on
What is CSS3?
Cascading Style Sheets (CSS) is a style sheet
language used to describe the presentation semantics
(the look and formatting) of a document written in
Visual enhancement like
Your design can be as simple as a text transformation
to something as rich as full-blown animations with 3D
EXPLORING PRIOR VERSIONS
CSS LEVEL 1.
Published in December 1996.
Font properties such as typeface and emphasis
Color of text, backgrounds, and other elements
Text attributes such as spacing between words, letters, and
lines of text
Alignment of text, images, tables and other elements
Margin, border, padding, and positioning for most elements
CSS level 2 specification was developed by the W3C
and published as a Recommendation in May 1998.
Absolute, relative, and fixed positioning of
New font properties such as shadows.
The W3C no longer maintains the CSS2 recommendation.
First Become a Candidate recommendation on 2004,
Later reverted to Working draft on 2005
Returned to Candidate recommendation in 2007 and
updated twice in 2009
Fixes errors in CSS2, removes poorly-supported or
not fully interoperable features and adds alreadyimplemented browser extensions to the specification.
finally published as a W3C Recommendation on 2011
Selectors : For selecting specific elements from
documents for formating.
General Sibling Selector : This selector matches
and targets all the siblings of a given element. It
is not necessary however that the elements be
h1 ~ pre represents a pre element following an h1.
Children Selector : This Selector shows the relationship between two
elements and targets those elements which are children of a particular
body > p
This selector represents a p element that is child of body:
Attribute Selector : Unlike CSS 2.1 where one has to
make match on a complete string of an attribute, CSS
offers the flexibility to make matches anywhere within
an attribute, be it beginning or end.
[attr^=val] –- matches a Document object model element (DOM) with
the attribute attr and a value starting with val
[attr$=val] –- matches a DOM element with the attribute attr
and a value ending with the suffix val
[attr*=val] –- matches a DOM element with the attribute attr and
a value containing the substring val
Border Radius :
Used to create round corner for
boxes without hard code.
Border Image :
It allows using an image as a border
for an element. One can set values for Border Image
-webkit-border-image: url(border-image.jpg) 45 20 45 30
-moz-border-image: url(border-image.jpg) 45 20 45 30
border-image: url(border-image.jpg) 45 20 45 30 repeat;
border-image: url(bg-border.jpg) 45 20 45 20 repeat;
border-image: url(bg-border.jpg) 45 20 repeat;
Multiple Background :
This has been made possible and one may
use multiple background images for one element.
background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg) top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;
} Colors and Opacity:
CSS 3 comes with an ability to add
transparency to an element and its color schemes have been
enhanced to add this factor as well.
This paragraph has opacity 1.0.
Multi Column layout:
This property allows creating the desired
number of columns by making the required specifications regarding
column width, separator, column gap width, etc.
-moz-column-rule: 1px solid black;
-webkit-column-rule: 1px solid black;
image but now with BOX Shadow feature, one can add shadow
to any element on the website.
box-shadow:10px 10px 5px #888;
However it is currently supported by Firefox 3.1+, Safari and