ACKNOWLEDGEMENT Many people have contributed to the success of this. Although a single sentence hardly suffices, I would like to thank Almighty God for blessing us with His grace. I extend my sincere and heartfelt thanks to Dr. David Peter, Head of Division, Computer Science and Engineering, for providing us the right ambience for carrying out this work. I am profoundly indebted to my seminar guide, Mr. Sudheep Elayidom for innumerable acts of timely advice, encouragement and I sincerely express my gratitude to him. I express my immense pleasure and thankfulness to all the teachers and staff of the Department of Information Technology for their cooperation and support. Last but not the least, I thank all others, and especially my classmates who in one way or another helped me in the successful completion of this work. Anmol Kansal 1 | Page
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
ACKNOWLEDGEMENT Many people have contributed to the success of this. Although a single sentence hardly suffices,
I would like to thank Almighty God for blessing us with His grace. I extend my sincere and
heartfelt thanks to Dr. David Peter, Head of Division, Computer Science and Engineering, for
providing us the right ambience for carrying out this work. I am profoundly indebted to my
seminar guide, Mr. Sudheep Elayidom for innumerable acts of timely advice, encouragement and
I sincerely express my gratitude to him.
I express my immense pleasure and thankfulness to all the teachers and staff of the Department
of Information Technology for their cooperation and support.
Last but not the least, I thank all others, and especially my classmates who in one way or another
helped me in the successful completion of this work.
Anmol Kansal
1 | P a g e
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.
2 | P a g e
CONTENTS
Chapter Page no.
• Introduction 4
• History 5
• Aim of HTML5 6
• HTML5 Structure 7
o STRUCTURE
o HEADER
o FOOTER
o NAV
o ASIDE
o SECTION
o ARTICLE
• Current status of HTML5 14
• Presentational Markup Removed and Redefined 16
o REMOVED
o REDEFINED
o NEW ELEMNT
o NEW ATTRIBUTE
• HTML5’s Open Media Effort 21
• HTML5 V/S HTML4 29
• LIMITATIONS OF HTML5 32
• IMPLEMENTATION 34• CONCLUSION 36
• REFERENCE 37
3 | P a g e
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).
4 | P a g e
5 | P a g e
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).
6 | P a g e
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.
7 | P a g e
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 document structure
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.
8 | P a g e
Fig: HTML5 document structure
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>
9 | P a g e
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
10 | P a g e
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
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>
</header>
<p>That's another great article!</p>
</article>
14 | P a g e
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
15 | P a g e
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.
16 | P a g e
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.
Looking at Table, one might notice that some elements that apparently should be eliminated
somehow live on. For example, <small> continues to be allowed, but <big> is obsolete. The idea
here is to preserve elements but shift meaning. For example, <small> is no longer intended to
correspond to text that is just reduced in size, similar to <font size="-1"> or <span style="font-
size: smaller;">, but instead is intended to represent the use of small text, such as appears in
fine print or legal information. If you think this decision seems a bit preposterous, join the
crowd. Some of the other changes to element meaning seem even a bit more preposterous, such
as the claim that a <b> tag now represents inline text that is stylistically offset from standard
text, typically using a different type treatment. So apparently <b> tags are not necessarily bold,
but rather convey some sense that the text is “different” (which likely means bold). Unlikely to
be thought of in such a manner by mere markup mortals, we simply say <b> tags live on, as do a
number of other presentational elements.
Removed Element Reasoning / Alternatives( or CSS Equivalent)
<applet> Obsolete syntax for java applets/ Use the object element.
<frame>
<frameset>
<noframes>
Usability concerns/ Use fixed-positions elements with CSS or object
elements with sourced documents.
<base font>
<font>
Body{font-family: family; font-size: size}
<center> Text-align: center or margin: auto depending on context
17 | P a g e
<s>, <strike> Text-decoration: strike
<u> Text-decoration: underline
The 2nd Table presents the meaning-changed elements that stay put in HTML5 and their new meaning.
HTML Element New Meaning in HTML5
<b> Represents an inline run of text that is different stylistically from normal text, by being bold, but conveys no other meaning.
<hr> Represents a thematic break rather than a horizontal rule.
<small> Represents small print, as in comments or legal fine print
<strong> Represents importance rather than strong emphasis.
<dd> <dt> Used with HTML5’s new details and figures element to define or summarize the contained text
Like the strict variants of (X)HTML, HTML5 also removes numerous presentation focused attributes. This Table summarizes these values and presents CS\S alternatives.
18 | P a g e
19 | P a g e
In with the New Elements
For most Web page authors, the inclusion of new elements is the most interesting aspect of
HTML5. Some of these elements are not yet supported, but already many browsers are
implementing a few of the more interesting ones, such as audio and video, and others can easily
be simulated even if they are not directly understood yet, as you will see later in the chapter. This
table summarizes the elements added by HTML5.
20 | P a g e
New Attributes
One quite important aspect of HTML5 is the introduction of new attributes. There are quite a few
attributes that are global and thus found on all elements. This Table provides a brief overview of
these attributes.
21 | P a g e
HTML5s Open Media Effort
An interesting aspect of HTML5 that is reminiscent of the previous efforts of Netscape and
Microsoft is the support for tag-based multimedia in HTML documents. Traditionally,
multimedia has been inserted with the embed and object elements, particularly when inserting
Adobe Flash, Apple QuickTime, Windows Media, and other formats. However, there was a time
when tags specifically to insert media were supported; interestingly, some of those features, such
as the dynsrc attribute for <img> tags, lived on until just recently. HTML5 brings this concept of
tag-based multimedia back.
<video>
To insert video, use a <video> tag and set its src attribute to a local or remote URL containing a
playable movie. You should also display playblack controls by including the controls attribute,
as well as set the dimensions of the movie to its natural size. This simple demo shows the use of
Unfortunately, Internet Explorer up to version 8 will not be able to render the example without a
compatibility library:
:
29 | P a g e
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. o In HTML4, the media type was text/html, but in HTML5 it is text/html-
sandboxed.
o 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,
o section - section represents a generic document or application section. It
can be used with header tags.
oarticle-We can represent a blog entry or article using this tag
oaside-represents a piece of content that is only slightly related to the rest
of the page.
ohggroup- represents the header of a section.
oHeader-represents a group of introductory or navigational aids.
oFooter-represents a footer for a section and can contain information
about the author, copyright information.
onav- represents the section for navigation.
oFigure-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,details, datalist etc.
o Video and audio-for multimedia content o embed-for plug in content o mark-represents marked text o progress-when completing a task it gives the progress like progress of file
downloading o time-represents date/time
30 | P a g e
o meter-represents a measurement o canvas- for rendering the dynamic bit map images o datalist:-Together with the a new list attribute for input can be used to make
combo boxes o
New attributes are identified to various elements. There are several new global attributes.
They are,
o Contentedittable
o Contextmenu
o Draggable
o Hidden
o Spell check etc
Some elements are missing for HTML5. They are,
o big, center, font, u, s, strike etc. These effects can be better handled by CSS.
o frames, frameset, noframes etc. Their usage affects usability and accessibility for
the end user in a negative way.
o acronym, applet, isindex, dir. Their usage creates confusion and so they are
avoided
o
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.
o align attribute on caption, iframe, img, input, object, legend, table, hr,