ABSTRACT

HTML5 is currently under development as the next major revision of the HTML
standard. 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
new standard incorporates features like video playback and drag-and-drop that
have been previously dependent on third-party browser plug-ins such as Adobe
Flash, Microsoft Silverlight, and Google Gears.
The HTML5 specification was adopted as the starting point of the work of the new
HTML working group of the World Wide Web Consortium (W3C) in 2007.
According to the W3C timetable, it is estimated that HTML5 will reach W3C
Recommendation by late 2010.
The HTML5 syntax is no longer based on SGML despite the similarity of its
markup. HTML5 also incorporates Web Forms 2.0, another WHATWG
specification.
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
canvas element for immediate mode 2D drawing, timed media playback, offline
storage database, document editing, drag-and-drop, cross-document messaging,
browser history management, MIME type and protocol handler registration,
Microdata, Geolocation etc.

Keywords: Markup Language, Forms, Website, Web Page.

 INTRODUCTION
HTML or Hypertext Markup Language is a formatting or scripting language that
programmers and developers use to create documents on the Web.
You view a Web page written in HTML in a Web browser such as Internet
Explorer, Mozilla Firefox or Google Chrome. The HTML language has specific
rules that allow placement and format of text, graphics, video and audio on a Web
page.
The web is constantly evolving. New and innovative websites are being created
every day, pushing the boundaries of HTML in every direction. HTML 4 has been
around for nearly a decade now, and publishers seeking new techniques to provide
enhanced functionality are being held back by the constraints of the language and
browsers. To give authors more flexibility and interoperability, and enable more
interactive and exciting websites and applications, HTML 5 introduces and
enhances a wide range of features including form controls, APIs, multimedia,
structure, and semantics.
HTML5 is the fifth revision of the HTML standard and as of April 2012 is still
under development. The latest edition HTML5 has enhanced features for
programmers such as <video>, <audio> and <canvas> elements.
Work on HTML 5, which commenced in 2004, is currently being carried out in a
joint effort between the W3C HTML WG and the WHATWG. Many key players
are participating in the W3C effort including representatives from the four major
browser vendors: Apple, Mozilla, Opera, and Microsoft; and a range of other
organizations and individuals with many diverse interests and expertise. HTML5 is
a specification for how the web's core language, HTML, should be formatted and
utilized to deliver text, images, multimedia, web apps, search forms, and anything
else you see in your browser. In some ways, it's mostly a core set of standards that
only web developers really need to know. In other ways, it's a major revision to
how the web is put together. Not every web site will use it, but those that do will
have better support across modern desktop and mobile browsers (that is,
everything except Internet Explorer).

History
History of HTML till now:
 HTML 3.0 was developed in 1995

 HTML 3.2 was completed by 1997

 HTML 4 was developed in the year 1998

 In this year 1998 W3C stopped working on HTML and started working on
XML based HTML that is XHTML. And it is known as XHTML 1.0.It has
completed in the year 2000.

 In parallel with XHTML W3C worked on different language that is not

compatible to HTML and XHTML 1.0, known as XHTML2.

 Introduction of Xforms, a new technology which is meant to be the next

generation of web forms renewed interest in renovating HTML, rather than
developing a brand new language for web.

 HTML5 was first started by Mozilla, Apple, and Opera under a group called
the WHATWG (Web Hypertext Application Technology Working Group).
In 2006 W3C showed an interest in HTML5 and in 2007 they created a
working group to work in HTML5 project.

 First Public Working Draft was released on 22 January 2008, (i.e. officially
released) by World Wide Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group (WHATWG).
 AIM OF HTML5
HTML5’s goals are grand. The specification is sprawling and often misunderstood.
As stated by W3C, HTML5 specifically aims at:
 It tries to bring order to chaos by codifying common practices, embracing
what has already been implemented by various diverse browsers.

 It tries really hard to omit the space found between (x) html and its versions
as in HTML4 or XHTML1.

 It continues the effort of W3C to make html more of a logical markup

language, rather than just being a physical one.
 HTML5 Structure
STRUCTURE
HTML 5 introduces a whole set of new elements that make it much easier to
structure pages. Most HTML 4 pages include a variety of common structures, such
as headers, footers and columns and today, it is fairly common to mark them up
using div elements, giving each a descriptive id or class.
Fig: HTML4

Diagram illustrates a typical two-column layout marked up using divs with id and
class attributes. It contains a header, footer, and horizontal navigation bar below
the header. The main content contains an article and sidebar on the right. The use
of div elements is largely because current versions of HTML 4 lack the necessary
semantics for describing these parts more specifically. HTML 5 addresses this
issue by introducing new elements for representing each of these different sections.

The div elements can be replaced with the new elements: header, nav, section,
article, aside, and footer. The markup for that document could look like the
following:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>

There are several advantages to using these elements. When used in conjunction
with the heading elements (h1 to h6), all of these provide a way to mark up nested
sections with heading levels, beyond the six levels possible with previous versions
of HTML. The specification includes a detailed algorithm for generating an outline
that takes the structure of these elements into account and remains backwards
compatible with previous versions. This can be used by both authoring tools and
browsers to generate tables of contents to assist users with navigating the
document.
For example, the following markup structure marked up with nested section and h1
elements:
<section>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>
</section>
For better compatibility with current browsers, it is also possible to make use of the
other heading elements (h2 to h6) appropriately in place of the h1 elements.
By identifying the purpose of sections in the page using specific sectioning
elements, assistive technology can help the user to more easily navigate the page.
For example, they can easily skip over the navigation section or quickly jump from
one article to the next without the need for authors to provide skip links. Authors
also benefit because replacing many of the divs in the document with one of
several distinct elements can help make the source code clearer and easier to
author.
The following are the new structural elements introduced in HTML5:
Header
The header element represents the header of a section. Headers may contain more
than just the section’s heading—for example it would be reasonable for the header
to include sub headings, version history information or bylines. The header
element contains introductory information to a section or page. This can involve
anything from our normal documents headers (branding information) to an entire
table of contents.
<header>
<h1>A Preview of HTML 5</h1>
<p class="byline">By Lachlan Hunt</p>
</header>
<header>
<h1>Example Blog</h1>
<h2>Insert tag line here.</h2>
</header>
Footer
The footer element represents the footer for the section it applies to. A footer
typically contains information about its section such as who wrote it, links to
related documents, copyright data, and the like. The footer element is for marking
up the footer of, not only the current page, but each section contained in the page.
So, it’s very likely that you’ll be using the <footer> element multiple times within
one page.
<footer>© 2007 Example Inc.</footer>

Nav
The nav element represents a section of navigation links. It is suitable for either
site navigation or a table of contents. The nav element is reserved for a section of a
document that contains links to other pages or links to sections of the same page.
Not all link groups need to be contained within the <nav> element, just primary
navigation.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
ASIDE
The aside element is for content that is tangentially related to the content around it.
Aside, represents content related to the main area of the document. This is usually
expressed in sidebars that contain elements like related posts, tag clouds, etc. They
can also be used for pull quotes.
<aside>
<h1>Archives</h1>
<ul>
<li><a href="/2007/09/">September 2007</a></li>
<li><a href="/2007/08/">August 2007</a></li>

<li><a href="/2007/07/">July 2007</a></li>

</ul>
</aside>
SECTION
The section element represents a generic section of a document or application, such
as a chapter. It acts much the same way a <div> does by separating off a portion of
the document. For example,
<section>
<h1>Chapter 1: The Period</h1>
<p>It was the best of times, it was the worst of times,
it was the age of wisdom,
it was the age of foolishness,
it was the epoch of belief,
it was the epoch of incredulity,
it was the season of Light,
it was the season of Darkness,
...</p>
</section>

Article
The article element represents an independent section of a document, page or site,
which can stand alone. It is suitable for content like news or blog articles, forum
posts or individual comments or any independent item of content.
<article id="comment-2">
<header> <h4>
<a href="#comment-2" rel="bookmark">Comment #2</a>
by <a href="http://example.com/">Jack O'Niell</a></h4>
<p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>
 CURRENT STATUS OF HTML5
Given the looseness HTML5 supports and its de-emphasis of the XML approach to
markup, you might assume that HTML5 is a retreat from doing things in the right
way and an acceptance of ―tag soup‖ as legitimate markup. The harsh reality is
that, indeed, valid markup is more the exception than the rule online. Numerous
surveys have shown that in the grand scheme of things, few Web sites validate. For
example, in a study of the Alexa Global Top 500 in January 2008, only 6.57
percent of the sites surveyed validated. When sample sizes are increased and we
begin to look at sites that are not as professional, things actually get worse.
Interestingly, Google has even larger studies, and while they don’t focus
specifically on validation, what they indicate on tag usage indicates clearly that no
matter the sample size, clean markup is more the exception than the rule. Yet
despite the markup madness, the Web continues to work. In fact, some might say
the permissive nature of browsers that parse junk HTML actually helps the Web
grow because it lowers the barrier to entry for new Web page authors. Certainly a
shaky foundation to build upon, but the stark reality is that we must deal with
malformed markup. To this end, HTML5 makes one very major contribution: it
defines what to do in the presence of markup syntax problems.
The permissive nature of browsers is required for browsers to fix markup mistakes.
HTML5 directly acknowledges this situation and aims to define how browsers
should parse both well-formed and malformed markup, as indicated by this brief
excerpt from the specification: This specification defines the parsing rules for
HTML documents, whether they are syntactically correct or not. Certain points in
the parsing algorithm are said to be parse errors. The error handling for parse
errors is well-defined: user agents must either act as described below when
encountering such problems, or must abort processing at the first error that they
encounter for which they do not wish to apply the rules described below.
While a complete discussion of the implementation of an HTML5–compliant
browser parser is of little interest to Web document authors, browser implementers
now have a common specification to consult to determine what to do when tags are
not nested, simply left open, or mangled in a variety of ways. This is the part of the
HTML5 specification that will likely produce the most good, because obtaining
consensus among browser vendors to handle markup problems in a consistent
manner is a more likely path to an improved Web than defining some strict syntax
and then attempting to educate document authors around the world en masse to
write good markup.
HTML5’s aim to bring order to the chaos of sloppy markup is but one of the grand
aims of the specification. It also aims to replace traditional HTML, XHTML, and
DOM specifications, and to do so in a backward-compatible fashion. In its attempt
to do this, the specification is sprawling, addressing not just what elements exist
but how they are used and scripted. HTML5 embraces the fact that the Web not
only is composed of documents but also supports applications, thus markup must
acknowledge and facilitate the building of such applications. More of the
philosophy of HTML5 will be discussed later in the chapter when addressing some
strong opinions, myths, and misconceptions surrounding the specification; for now,
take a look at what markup features HTML5 actually changes.

Presentational Markup Removed and Redefined

HTML5 removes a number of elements and attributes. Many of the elements are
removed because they are more presentational than semantic. Table below presents
the elements currently scheduled for removal from HTML5.
NOTE: Although these elements are removed from the specification and should be
avoided in favor of CSS, they likely will continue to be supported by browsers for
some time to come. The specification even acknowledges this fact.
 HTML5 V/S HTML4
HTML5 DIFFERENCES WITH HTML4
HTML5 introduces new elements and its attributes like <audio> and <video>.
Video elements are used to for video files. The attributes for <audio> tag are src,
preload, autoplay, loop and controls.
 HTML5 defines a syntax that is backward compatible to HTML and
XHTML.
 In HTML4, the media type was text/html, but in HTML5 it is text/html-
sandboxed.

 For XML the media type is application/xhtml+XML or application/XML.

 HTML 5 allows MathML and SVG elements to be inside a document.

 New elements are introduced for a better structure. They are,

 section - section represents a generic document or application section.
It can be used with header tags.

 article-We can represent a blog entry or article using this tag

 aside-represents a piece of content that is only slightly related to the

rest of the page.

 hggroup- 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.

 nav- represents the section for navigation.

  Figure-used to give caption for video or audio.

 Other new elements in HTML5 are

video,audio,embed,mark,progress,meter,time,ruby,rt,rp,canvas,command,det
ails, datalist etc.
 Video and audio-for multimedia content
 embed-for plug in content
 mark-represents marked text
 progress-when completing a task it gives the progress like progress of file
downloading
 time-represents date/time

 meter-represents a measurement
 canvas- for rendering the dynamic bit map images
 datalist:-Together with the a new list attribute for input can be used to make
combo boxes
 New attributes are identified to various elements. There are several new
global attributes. They are,
 Contentedittable
 Contextmenu
 Draggable
 Hidden
 Spell check etc

 Some elements are missing for HTML5. They are,

 big, center, font, u, s, strike etc. These effects can be better handled by CSS.
  frames, frameset, noframes etc. Their usage affects usability and
accessibility for the end user in a negative way.
 acronym, applet, isindex, dir. Their usage creates confusion and so they are
avoided

 Some attributes are not allowed in HTML5. Most of the styling attributes are
removed from the HTML5. User can use CSS for that purpose. Examples of
removed attributes are given below.
 align attribute on caption, iframe, img, input, object, legend, table, hr,
div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and
tr
 background attribute on body.
 Bgcolor attribute on table, tr, td, th and body.
 Border attribute on table and object.
 Cellpadding and cellspacing attributes on table.

New API's in HTML5

 API's for multimedia by using video and audio tags:- Using audio and
video tags the user can embed different audio/video formats in to the web
page

 API that allow offline web applications:- HTML5 allows several features
in which the web applications can work locally, that is without an internet
connection. So that the web applications can store their data locally.

 Drag and drop API: - HTML5 allows drag and drop feature with the help
of the draggtable attribute
  API that exposes the history and allows pages to add to it to prevent
breaking the back button

 An API that allows a Web application to register itself for certain

protocols or media types

 Editing API in combination with a new global contenteditable attribute:

- Can edit the contents at client side browser with the help of contenteditable
attribute

 HTML Microdata: In HTML microdata the user can embed machine

readable data in to HTML documents. It is built in such a way that it is easy
to write and it has unambiguous parsing model. HTML micro data is
compatible with RDF and JSON. So that it is compatible to Web3.0

 HTML canvas 2D context- This API is used for rendering the 2D graphics,
bitmaps and shapes. This technology introduced by Apple.

 Example code <canvas id=‖rect‖ width=‖100‖ height=‖50‖> your browser

does not support this feature </canvas>

 HTML5 web messaging: Through this mechanism user can communicate

between browsing contexts in HTML documents
LIMITATIONS OF HTML5
New open standards created in the mobile era( HTML5), will win on mobile
devices (and PCs too). Clearly, Apple is backing HTML 5, CSS 3 and JavaScript
for developing future web applications.HTML5 still has some real constraints and
it may not replace Flash for eLearning/ mLearning development in the near future
because of the following reasons:
 BROWSERS DO NOT PROVIDE FULL SUPPORT FOR HTML5
None of the web browsers for mobile or desktop have full HTML 5
implementations at present. Internet Explorer (IE 6, 7 and 8), the most widely used
web browser, has no support for HTML5. The new version (IE 9) which is
expected to be released sometime in 2011 will support HTML5. Internet Explorer
(IE 6, 7 and 8), the most widely used web browser, has no support for HTML5.
Even Apple iPad Safari browser doesn’t have full HTML5 support.

CROSS PLATFORM / BROWSER COMPATIBILITY

Every browser has its own rendering mechanism so an application developed for
iPad Safari is not guaranteed to work well in other browsers like IE, Firefox or
Chrome. Developers will have to make modifications in the code to make it work
in different browsers. This is not the case with plug-ins like Flash or Silverlight
where the applications once developed can run on all the browsers without any
modifications.
AUDIO/VIDEO SUPPORT
HTML5 has added new video and audio tags that can play video/audio in a
browser without a plug-in but it doesn’t officially support any video or audio
format.Content developers will have to spend more time in encoding the videos to
Ogg Theora and to H.264 formats so that all major browsers are supported. But
this is not sufficient as IE doesn’t support the video tag and would not be able to
play the video or audio file without a plug-in. Flash supports FLV/FV4 formats
and those are not browser dependent. Also, Flash or Silverlight video/audio
supports secure media streaming; there is no clear counterpart for this in HTML5.

CONCLUSION
HTML5 is the future. Working with the messed-up markup that dominates the
Web and providing a definition of how user agents should parse the mess is a
tremendous improvement in Web development. Yet HTML5 doesn’t simply
embrace the past; it extends the language with many more elements and continues
the move to more semantic markup. While some markup purists may bemoan the
resurgence of HTML traditions, the XML future is not destroyed by HTML5. If
you want to use lowercase, quote all attributes, and self-close empty elements, go
right ahead—that conforms to HTML5 as well. However, HTML5 isn’t just about
markup; it is also about metadata, media, Web applications, APIs, and more. It’s a
sprawling specification that will continue to evolve, but much of it is here today, so
get busy and embrace the future of markup now.