HTML5 (Web Development to the next level)

1. LITERATURE SURVEY

1.1 INTRODUCTION

HTML5 is the next major revision of the HTML standard, currently under development.

Like its immediate predecessors, HTML 4.01 and XHTML 1.1, HTML5 is a standard for
structuring and presenting content on the World Wide Web. The Web Hypertext
Application Technology Working Group (WHATWG) began work on the new standard in
2004, when the World Wide Web Consortium (W3C) was focusing future developments
on XHTML 2.0, and HTML 4.01 had not been updated since 2000[1]. In 2009, the W3C
allowed the XHTML 2.0 Working Group's charter to expire, and decided not to renew it.
W3C and WHATWG are currently working together on the development of HTML5 [2].

HTML5 is a response to the observation that the HTML and XHTML in common use on
the World Wide Web is a mixture of features introduced by various specifications, along
with those introduced by software products such as web browsers, those established by
common practice, together with many syntax errors in existing web documents. It is also
an attempt to define a single markup language that can be written in either HTML or
XHTML syntax. It includes detailed processing models to encourage more interoperable
implementations; it extends, improves and rationalizes the markup available for
documents, and introduces markup and APIs for complex web applications [3].

In particular, HTML5 adds many new syntax features. These

include <video>, <audio> and <canvas> elements as well as integration of SVG content,
which are designed to improve the inclusion and handling
of multimedia and graphic content on the web without recourse to proprietary plug-ins and
their APIs. Other new elements such as <section>, <article>, <header> and <nav> are
designed to improve the semantic richness of documents. Other elements have been
removed. New attributes have also been introduced, and others removed, to improve and
simplify semantic expression. Some elements, such as <a>, <cite> and <menu> have been
changed, redefined or standardized. The APIs and DOM are no longer afterthoughts, but
are fundamental parts of the HTML5 specification. It also defines in some detail the

1
HTML5 (Web Development to the next level)

required processing for invalid documents, so that syntax errors will be treated uniformly
by all conforming browsers and other user agents.

1.2 HISTORY [1]

For its first five years (1990-1995), HTML went through a number of revisions and
experienced a number of extensions, primarily hosted first at CERN, and then at the IETF.

With the creation of the W3C, HTML's development changed venue again. A first
abortive attempt at extending HTML in 1995 known as HTML 3.0 then made way to a
more pragmatic approach known as HTML 3.2, which was completed in 1997. HTML4
followed, reaching completion in 1998.

At this time, the W3C membership decided to stop evolving HTML and instead begin
work on an XML-based equivalent, called XHTML. This effort started with a
reformulation of HTML4 in XML, known as XHTML 1.0, which added no new features
except the new serialization, and which was completed in 2000. After XHTML 1.0, the
W3C's focus turned to making it easier for other working groups to extend XHTML, under
the banner of XHTML Modularization. In parallel with this, the W3C also worked on a
new language that was not compatible with the earlier HTML and XHTML languages,
calling it XHTML2.

Around the time that HTML's evolution was stopped in 1998, parts of the API for HTML
developed by browser vendors were specified and published under the name DOM Level
1 (in 1998) and DOM Level 2 Core and DOM Level 2 HTML (starting in 2000 and
culminating in 2003). These efforts then petered out, with some DOM Level 3
specifications published in 2004 but the working group being closed before all the Level 3
drafts were completed.

In 2003, the publication of XForms, a technology which was positioned as the next
generation of Web forms, sparked a renewed interest in evolving HTML itself, rather than
finding replacements for it. This interest was borne from the realization that XML's

2
HTML5 (Web Development to the next level)

deployment as a Web technology was limited to entirely new technologies (like RSS and
later Atom), rather than as a replacement for existing deployed technologies (like HTML).

The idea that HTML's evolution should be reopened was tested at a W3C workshop in
2004, where some of the principles that underlie the HTML5 work (described below), as
well as the aforementioned early draft proposal covering just forms-related features, were
presented to the W3C jointly by Mozilla and Opera. The proposal was rejected on the
grounds that the proposal conflicted with the previously chosen direction for the Web's
evolution; the W3C staff and membership voted to continue developing XML-based
replacements instead.

Shortly thereafter, Apple, Mozilla, and Opera jointly announced their intent to continue
working on the effort under the umbrella of a new venue called the WHATWG. A public
mailing list was created, and the draft was moved to the WHATWG site. The copyright
was subsequently amended to be jointly owned by all three vendors, and to allow reuse of
the specification.

The WHATWG was based on several core principles, in particular that technologies need
to be backwards compatible that specifications and implementations need to match even if
this means changing the specification rather than the implementations, and that
specifications need to be detailed enough that implementations can achieve complete
interoperability without reverse-engineering each other.

In 2006, the W3C indicated an interest to participate in the development of HTML5 after
all, and in 2007 formed a working group chartered to work with the WHATWG on the
development of the HTML5 specification. Apple, Mozilla, and Opera allowed the W3C to
publish the specification under the W3C copyright, while keeping a version with the less
restrictive license on the WHATWG site.

A separate document has been published by the W3C HTML working group to document
the differences between this specification and the language described in the HTML4
specification. 

3
HTML5 (Web Development to the next level)

1.3 HTML4 vs HTML5

The following is a cursory list of differences and some specific examples.

 New parsing rules: oriented towards flexible parsing and compatibility; not based

on SGML
 New elements: article, aside, audio, bdi, canvas, command, datalist, details, embed, f
igcaption, figure, footer, header, hgroup, keygen, mark, meter,nav, output, progress, r
p, rt, ruby, section, source, summary, time, video, wbr
 New types of form controls: dates and times, email, url, search, color
 New attributes: charset (on meta), async (on script)
 Global attributes (that can be applied for every element): 
id, tabindex, hidden, data-* (custom data attributes)
 Deprecated elements will be dropped altogether: 
acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s
trike, tt, u

4
HTML5 (Web Development to the next level)

2. New APIs

In addition to specifying markup, HTML5 specifies scripting application programming

interfaces (APIs). Existing document object model (DOM) interfaces are extended and de
facto features documented. There are also new APIs, such as:

 The canvas element for immediate mode 2D drawing. See Canvas 2D API

Specification 1.0 specification
 Timed media playback
 Offline storage database (offline web applications)
 Document editing
 Drag-and-drop
 Cross-document messaging
 Browser history management
 MIME type and protocol handler registration.
 Microdata
Not all of the above technologies are included in the W3C HTML5 specification, though they
are in the WHATWG HTML specification [9]. Some related technologies, which are not part
of either the W3C HTML5 or the WHATWG HTML specification, are

 Geolocation
 Web SQL Database, a local SQL Database.
 The Indexed Database API, an indexed hierarchical key-value store (formerly
WebSimpleDB).
The W3C publishes specifications for these separately.

5
HTML5 (Web Development to the next level)

3. A basic HTML5 syntax

<!DOCTYPE html>

<html>
<head>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample</p>
<!-- this is a comment -->
</body>
</html>
Unlike HTML4, HTML5 comes with only one Document type definition (DTD),  <!
doctype html>.

6
HTML5 (Web Development to the next level)

4. New elements & Features

4.1 <canvas> element [3]

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of

2D shapes and bitmap images. Canvas was initially introduced by Apple for use inside

their own Safari browser. Canvas consists of a drawable region defined in HTML code

with height and width attributes.

The following code creates a Canvas element in an HTML page:

<canvas id="example" width="200" height="200">

This text is displayed if your browser does not support HTML5

Canvas.

</canvas>

Some anticipated uses of canvas include building graphs, animations, games, and image

composition.

The CANVAS element is supported by the current versions of  MozillaFirefox

3.5, Google Chrome 3.0, Safari, and Opera 10

7
HTML5 (Web Development to the next level)

Following screenshot is an example of HTML5 page which built using <canvas>

element:

Fig: website developed using <canvas> element for graffiti

4.2 <video> element [5]

HTML5 video is an element introduced in the HTML5 draft specification for the purpose

of playing videos or movies, partially replacing the object element. Embedding video

used to be impossible without third-party plug-ins such as Apple QuickTime or Adobe

Flash.

Video formats: ogg, MPEG-4, h.264and etc..

8
HTML5 (Web Development to the next level)

The following HTML5 code fragment will embed a WebM video into a web page:

<video src="movie.webm" poster="movie.jpg" controls>

This is fallback text to display if the browser does not support

the video element.

</video>

The VIDEO element is supported by the current versions of Internet Explorer 9.0,

MozillaFirefox 3.5, Google Chrome 3.0, Safari, I-Pad, Android 2.0and Opera 10. 

Following screenshot is an example of HTML5 pages in Mozilla firefox & Safari

browser which uses <video> element:

Fig: videos embedded into firefox & safari browsers using <video> element.

9
HTML5 (Web Development to the next level)

4.3 Local Storage [5]

HTML5 storage provides a way for web sites to store information on your computer and

retrieve it later. The concept is similar to cookies, but it’s designed for larger quantities of

information. Cookies are limited in size, and your browser sends them back to the web

server every time it requests a new page (which takes extra time and precious

bandwidth). HTML5 storage stays on your computer, and web sites can access it with

JavaScript after the page is loaded.

Checking for HTML5 storage support uses detection technique. If your browser

supports HTML5 storage, there will be a localStorage property on the

global window object. If your browser doesn’t support HTML5 storage,

the localStorageproperty will be undefined. Due to an unfortunate bug in older versions of

Firefox, this test will raise an exception if cookies are disabled, so the entire test is wrapped

in a try..catch statement.

function supports_local_storage()
{
try
{
return 'localStorage' in window && window['localStorage'] !==
null;
}
catch(e)
{
return false;
}
}

10
HTML5 (Web Development to the next level)

4.4 Offline Web Applications [4]

Reading static web pages offline is easy: connect to the Internet, load a web page,

disconnect from the Internet, drive to a secluded cabin, and read the web page at your

leisure. (To save time, you may wish to skip the step about the cabin.) But what about web

applications like Gmail or Google Docs? Thanks to HTML5, anyone (not just Google!) can

build a web application that works offline.

Offline web applications start out as online web applications. The first time you visit an

offline-enabled web site, the web server tells your browser which files it needs in order to

work offline. These files can be anything — HTML, JavaScript, images, even videos. Once

your browser downloads all the necessary files, you can revisit the web site even if you’re

not connected to the Internet. Your browser will notice that you’re offline and use the files

it has already downloaded. When you get back online, any changes you’ve made can be

uploaded to the remote web server.

Checking for offline support uses detection technique. If your browser supports offline web

applications, there will be anapplicationCache property on the global window object. If

your browser doesn’t support offline web applications, theapplicationCache property

will be undefined. You can check for offline support with the following function:

function supports_offline()
{
return !!window.applicationCache;
}

11
HTML5 (Web Development to the next level)

4.5 GEOLOCATION[10]

Geolocation is the art of figuring out where you are in the world and (optionally) sharing

that information with people you trust. There is more than one way to figure out where you

are — your IP address, your wireless network connection, which cell tower your phone is

talking to, or dedicated GPS hardware that calculates latitude and longitude from

information sent by satellites in the sky.

Checking for geolocation support uses following detection technique. If your browser

supports the geolocation API, there will be ageolocation property on the

global navigator object. If your browser doesn’t support the geolocation API,

the geolocationproperty will be undefined. Here’s how to check for geolocation support:

function supports_geolocation()
{
return !!navigator.geolocation;
}

12
HTML5 (Web Development to the next level)

5. HTML5 compatibility

Feature Internet Firefox 3.5 Google Safari 3.0 Opera 10

Explorer 8 Chrome 3.4

Canvas Yes(IE9) Yes Yes Yes Yes

Video(ogg No Yes (4 Beta) Yes No Yes

Format))
Video(H.264 Yes(IE9) No No Yes No
)
Audio(MP3) No No Yes Yes No

Audio(wav) No Yes(4 Beat) No Yes Yes

Local No Yes Yes No No

Storage
Offline No Yes Yes Yes No
Browsing
New Form Yes (IE9) Yes Yes Yes Yes
Elements
Table: Comparison table for browsers compatibility of HTML5 features

13
HTML5 (Web Development to the next level)

6 Conclusion

The report presented the evaluation of HTML5, various differences of HTML4 &

HTML5 and main features of HTML5. From this report we can conclude that HTML5 is

going to play a major role in building multimedia based websites and web applications.

We don’t need to install third-party add-ons (ex: Adobe Flash Player, Quick Time Player)

to insert any multimedia date like video, audio which directly consumes main memory

space & slows down the system performance. And, HTML5 can’t be termed as Killer of

FLASH. And it also removed mostly unused & annoying elements that were present in

previous versions. And offline browsing is also an essential feature for those people who

suffer problems with interrupted network connections. As research is going on HTML5,

we can’t term it as perfect markup language for web applications & websites.

14
HTML5 (Web Development to the next level)

Abbreviations

HTML – HyperText Markup Language

W3C – World Wide Web consortium

WHATWG – Web Hypertext Application Technology Working Group 

API – Application Programming Interface

DOM – Document Object Model

DTD – Document Type Definition

IETF – Internet Engineering Task Force

XHTML – eXtensible HyperText Markup Language

XML – eXtensible Markup Language

SGML – Standard Generalized Markup Language

15
HTML5 (Web Development to the next level)

References

1. Web Programming, building internet applications, Chris Bates 2nd Edition.

2. HTML5: Designing Rich Internet Applications by Matthew David.
3.  Alexander V. Korostov and Dmitry J. Paramzin, “The arrival of HTML5” in Dr.Dobb’s
on August, 2010.
4. "HTML 4 Errata"(http://www.w3.org/MarkUp/html4-updates/errata).
5. "Frequently Asked Questions (FAQ) about the future of XHTML”(
http://www.w3.org/2009/06/xhtml-faq.html).
6.  “HTML Canvas 2D Context” (http://dev.w3.org/html5/2dcontext/).
7. “Web Storage Specification” (http://dev.w3.org/html5/webstorage/).
8. ““Dive into HTML5”(http://diveintohtml5.org/detect.html)

16