1

HTML5

CHAPTER 1

INTRODUCTION

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.

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 organisations
and individuals with many diverse interests and expertise.

Basically, it’s about extending HTML/XHTML with new more semantically rich
elements, deprecating attributes, introducing new attributes and altering how some
element and attributes are allowed to be used. Hand in hand with that is the possibility
to use attributes for WAI-ARIA to make a web page more accessible, such as with
landmark roles.It also introduces a number of APIs for making it easier to create web
applications:

• 2D drawing API with the canvas element.

• API for playing of video and audio with the video and audio elements.
• API that enables offline Web applications.
• 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.
• Drag & drop API in combination with a draggable attribute.
• API that exposes the history and allows pages to add to it to prevent breaking
the back button.
• Cross-document messaging with postMessage.

Other things that initially was in the specification, but broken out into separate
specifications are:

• API for Geolocation

• Web Storage.
• Web Workers.
• querySelectorAll.

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 2
HTML5

CHAPTER 2

HTML5 HISTORY
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 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).

A proof of concept to show that it was possible to extend HTML4's forms to provide
many of the features that XForms 1.0 introduced, without requiring browsers to
implement rendering engines that were incompatible with existing HTML Web pages,
was the first result of this renewed interest. At this early stage, while the draft was
already publicly available, and input was already being solicited from all sources, the
specification was only under Opera Software's copyright.

The idea that HTML's evolution should be reopened was tested at a W3C workshop in

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 3
HTML5

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.

The latter requirement in particular required that the scope of the HTML5
specification include what had previously been specified in three separate documents:
HTML4, XHTML1, and DOM2 HTML. It also meant including significantly more
detail than had previously been considered the norm.

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.

Since then, both groups have been working together

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 4
HTML5

CHAPTER 3

A quick introduction to HTML

A basic HTML document looks like this:

<!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>

HTML documents consist of a tree of elements and text. Each element is denoted in
the source by a start tag , such as "<body>", and an end tag , such as "</body>". Tags
have to be nested such that elements are all completely within each other, without
overlapping:

<p>This is <em>very <strong>wrong</em>!</strong></p>

<p>This <em>is <strong>correct</strong>.</em></p>

Elements can have attributes, which control how the elements work. In the example
below, there is a hyperlink, formed using the aelement and its href attribute:

<a href="demo.html">simple</a>

Attributes are placed inside the start tag, and consist of a name and a value , separated
by an "=" character. The attribute value can remain unquoted if it doesn't contain
spaces or any of " ' ` = < or >. Otherwise, it has to be quoted using either single or
double quotes. The value, along with the "=" character, can be omitted altogether if
the value is the empty string.

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 5
HTML5

<!-- empty attributes -->

<input name=address disabled>

<input name=address disabled="">

<!-- attributes with a value -->

<input name=address maxlength=200>

<input name=address maxlength='200'>

<input name=address maxlength="200">

HTML user agents (e.g. Web browsers) then parse this markup, turning it into a DOM
(Document Object Model) tree. A DOM tree is an in-memory representation of a
document. DOM trees contain several kinds of nodes, in particular a DOCTYPE
node, elements, text nodes, and comment nodes. The markup snippet at the top of this
section would be turned into the following DOM tree:

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 6
HTML5

The root element of this tree is the html element, which is the element always found at
the root of HTML documents. It contains two elements, head and body , as well as a
text node between them. There are many more text nodes in the DOM tree than one
would initially expect, because the source contains a number of spaces and line breaks
("⏎") that all end up as text nodes in the DOM. The head element contains a title
element, which itself contains a text node with the text "Sample page".Similarly, the
body element contains an h1 element, a p element, and a comment.

This DOM tree can be manipulated from scripts in the page. Scripts (typically in
JavaScript) are small programs that

can be embedded using the script element or using event handler content attributes .
For example, here is a form with a script that sets the value of the form's output
element to say "Hello World":

<form name="main">

Result: <output name="result"></output>

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 7
HTML5

<script>

document.forms.main.elements.result.value = 'Hello World';

</script>

</form>

Each element in the DOM tree is represented by an object, and these objects have
APIs so that they can be manipulated. For instance, a link (e.g. the a element in the
tree above) can have its "href " attribute changed in several ways:

var a = document.links[0]; // obtain the first link in the document

a.href = 'sample.html'; // change the destination URL of the link

a.protocol = 'https'; // change just the scheme part of the URL

a.setAttribute('href', 'http://example.com/'); // change the content attribute directly

Since DOM trees are used as the way to represent HTML documents when they are
processed and presented by implementations (especially interactive implementations
like Web browsers), this specification is mostly phrased in terms of DOM trees,
instead of the markup described above.

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 8
HTML5

CHATER 4

New features in HTML5

There are a lot of new features that HTML5 has to offer. first lets see the new
semantic elements that aim to give meaning to the various parts of a modern Web
page: headers, footers, navigation bars, side bars, and so forth. Next, you will learn
about the important new <canvas> element and the 2D drawing JavaScript APIs that
you can use to create shapes, text,animations, transitions, and more. Following this,
you will see how the new <audio> and <video> elements intend on replacing the
Web's current dependency on Flash as a multimedia delivery platform. Next comes
the local storage APIs and offline applications support that will further bring Web
applications in line with their desktop counterparts in terms of functionality, even
when not connected to a network or the Internet. This section is wrapped up with a
brief overview of the other new elements, attributes, and APIs that are proposed in the
current HTML5 specification.

4.1 Semantic elements

The HTML5 specification includes a series of new semantic elements that is used to
give some meaning to the various sections or parts of a Web page, such as a header,
footer, navigation, and so on. In previous versions of HTML, you would typically use
<div> elements to create these parts, using ID or class attributes to differentiate them
from each other. The problem with this is that this has no semantic meaning, as there
are no strict rules defined that specify what class names or IDs are to be used, making
it extremely difficult for software to determine what the particular area is doing.
HTML5 should help alleviate these issues, making it easier for Web browsers to parse
the semantic structure of a document.The main semantic elements that HTML5
introduces are:

<header>

This element is used to define a header for some part of a Web page, be it the entire
page, an <article> element, or a <section> element.

<footer>

Like the <header> element, this new element defines a footer for some part of a page.
A footer does not have to be included at the end of a page, article, or section, but it
typically does.

<nav>

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 9
HTML5

This is a container for the primary navigation links on a Web page. This element is
not intended for use with all groups of links and should be used for major navigation
blocks only. If you have a <footer> element that contains navigation links, you do not
need to wrap these links in a <nav> element, since the <footer> element will suffice
on its own.

<article>

The <article> element is used to define an independent item on the page that can be
distributed on its own, such as a news item, blog post, or comment.

<section>

This element represents a section of a document or application, such as a chapter or a

section of an article or tutorial. For example, the section you are reading now could be
surrounded by a <section> element in HTML5. <section>

<aside>

This new element can be used to mark up a sidebar or some other content that is
considered somewhat separate to the content around it. An example of this might be
advertising blocks.

<hgroup>

In some cases, a page, article, or section may require more than one heading,such as
where you have a title and a subtitle. This tutorial, for example, has the title "Create
modern Web sites using HTML5 and CSS3" and the subtitle"Implementing the
canvas and video elements in HTML5." You could wrapthese in an <hgroup>
element, using an <h1> element for the main title and an <h2> element for the
subtitle.

The <canvas> element

The <canvas> element was originally developed by Apple® for use in Mac OS X
Dashboard widgets and in Safari, but was later adopted by Mozilla® and Opera® in
their Web browsers. The element has been standardized and included in the HTML5
specification,

along with a series of 2D drawing APIs that can be used to create shapes, text,
transitions, and animations inside the element.Many believe that the <canvas>
element is one of the most important aspects of HTML5 as it facilitates the production
of graphs, interactive games, paint applications, and other graphics on the fly without

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 10
HTML5

requiring external plug-ins such as Adobe Flash. The <canvas> element itself is quite
basic, defining the width, height, and unique ID for the object. The developer must
then use a series of JavaScript APIs to actually draw objects on the canvas, typically
when the Web page has finished rendering. These APIs allow the developer to draw
shapes and lines; apply color, opacity, and gradients; create text; transform canvas
objects; and perform animation. The

APIs also allow the <canvas> to be interactive and respond to user input such as
mouse events and key events, facilitating the production of games and Web
applications onthe canvas.

Playing <audio> and <video>

In recent years, the popularity of video sharing sites such as YouTube and content
delivery platforms like

Hulu has seen a huge explosion in the use of the Web for multimedia streaming.
Unfortunately, the Web was not built with such content in mind, and as a result, the
provision of video and audio has by and large been facilitated by the Flash Video
(.flv) file format and the Adobe Flash platform.HTML5, however, includes support
for two new elements, <audio> and <video>,which allow Web developers to include
multimedia content without relying on the user to have additional browser plug-ins
installed.In addition, a set of standard JavaScript APIs has been provided to allow
developers to create their own playback controls, should they wish to do so. There are
many decisions to be made about HTML5 <video> and <audio> in the near future,
and it will be interesting to see what codecs and formats are facilitated in the final
recommendation.

4.2 Local storage and offline applications

Web developers have traditionally used cookies to store information on a visitor's

local machine, allowing a Web page to read this information back at a later point.
While cookies are very useful for storing basic data, they are limited by the fact that
Web browsers are not required to keep more than 20 cookies per Web server or more
than 4KB of data per cookie (including both name and value). In addition, they are
sent to the Web server with every HTTP request, which is a waste of
resources.HTML5 provides a solution for these problems with the Local Storage
APIs, which are covered in a separate specification to the main HTML5 document.
This set of APIs allows developers to store information on the visitor's computer
while remaining

reasonably confident that they will still be there at a later date. In addition, the

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 11
HTML5

information is accessible at any point (even after the page has rendered) and is not
loaded automatically with each HTTP request. The specification includes same-origin
restrictions, which prevent Web sites from reading or changing data stored by other
Web sites.Most browsers store Web pages in local cache, allowing them to be viewed
even if the user is offline. This works fine for static pages, but it is not available for
dynamic content that is typically database-driven, such as Gmail, Facebook, or
Twitter.HTML5 provides support for offline applications, where the browser
downloads all the files necessary to use the application offline, and when the user uses
the application offline, the browser can allow any changes made in the process to be
uploaded to the server when they reconnect to the Internet.

4.3 Web form enhancements

If you have created Web applications before, you are more than likely familiar with
HTML's set of form controls, some of which are implemented using the
<input>element. In HTML 4, the following input types were supported:

• button

• checkbox

• file

• hidden

• image

• password

• reset

• radio

• submit

• text

In addition, there are some other elements that are used in forms such as <select>and
<textarea>. These form controls provide plenty of function for basic form fields such
as name, phone number, and address—like you might find on a contact form.But, the
Web as a platform has grown far beyond the stage where HTML forms are used to
submit contact forms—now they are used to submit application data for server-side
processing. As a result, Web application developers find themselves continually in

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 12
HTML5

need of some more sophisticated form controls, such as spinners,sliders, date/time

pickers, color pickers, and so on.HTML5 aims to fill some of the gaps left by its
predecessor in this space by providing a whole range of new form input types:

• color

• date

• datetime

• datetime-local

• email

• month

• number

• range

• search

• tel

• time

• url

• week

In addition to these new input types, HTML5 also supports two major new features
for form fields. The first of these is autofocus, which tells a browser to automatically
give focus to a particular form field when the page has rendered. The second
enhancement is the placeholder attribute,which allows the developer to define the text
that will appear in a textbox-based control when its contents are empty. A The
placeholder attribute allows the developer to specify text that will show when the
value of the control is empty and the control does not have focus.

4.4 Other new features

HTML5 includes so many new features; This section provides a brief overview of
some of the other enhancements in the specification.

Web worker

This allows JavaScript code to be set to run in a background process facilitating the

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 13
HTML5

development of multi-threaded applications. The chief benefit that Web workers offer
developers is that intensive calculations can be processed in the background without
adversely affecting the speed of the user interface.

Geolocation

HTML5 includes a geolocation API that allows a Web application to determine your
current geographical location, assuming the device you are targeting provides features
for finding such information (for example, GPS on acellphone). If you do not have a
device that supports this feature (such as an iPhone or an Android 2.0-based
smartphone), you can use Firefox and download a plug-in that allows you to set your
location manually.

Drag and Drop

Another interesting feature is the inclusion of a drag and drop API. Up until now,
implementation of drag and drop without plug-ins was dependent on

some very complex JavaScript or the use of a JavaScript library such as

script.aculo.us.

Cross-document messaging

This allows documents in different windows (and iframes, for that matter) to send and
receive messages to one another. This feature could prove very useful for the
development of widgets and applications that are hosted on servers other than the
primary Web page's server (similar to Facebook applications).

And more other new features introduced by HTML5 include MIME types and
protocol handler registration, so Web applications can be registered as the default
application for a particular file type or protocol; browser history management,which
until now needed to be implemented manually or using an external JavaScript
framework; and a host of other new elements and attributes that make Web
developers' lives easier.

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 14
HTML5

CHAPTER 5

HTML5 PAGE 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.

Figure:5.1: Div Tag Usage

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.

Figure:5.2 Html5 page elements

The div elements can be replaced with the new elements: header, nav, section, article,
aside, and footer.

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 15
HTML5

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>

Note that 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 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.

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 16
HTML5

<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>

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.

<footer>© 2007 Example Inc.</footer>

The nav element represents a section of navigation links. It is suitable for either site
navigation or a table of contents.

<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>

The aside element is for content that is tangentially related to the content around it,
and is typically useful for marking up sidebars.

<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>

The section element represents a generic section of a document or application, such

as a chapter, 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>

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 17
HTML5

The article element represents an independent section of a document, page or site.

It is suitable for content like news or blog articles, forum posts or individual
comments.

<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>
</header>
<p>That's another great article!</p>
</article>

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 18
HTML5

CHAPTER 6
The <video> element: inherent difficulties
Now we will add a video to the index.html page along with a set of browser-supplied
playback controls.
Adding a video to the page
<section>
<header>
<h1>This is a video section</h1>
</header>
<p>
<video src="http://www.double.co.nz/video_test/transformers480.ogg"
controls autoplay>
<div class="no-html5-video">
<p>This video will work in Mozilla Firefox or Google
Chrome only.</p>
</div>
</video>
</p>
</section>
we first create a new section where the video will be shown on the page. This has a
header followed by the video itself. The controls attribute tells the browser to display
the browser's standard controls for video playback. And the autoplay attribute, well,
tells the browser to start playing the video automatically. Between the opening and
closing <video> tags we have created a <div> element with the class no-html5-video,
which will display a message to users who try to view the video in a browser that does
not support the <video> element or does not support the Theora video codec.

Figure: 6.1: Video element example

Now try opening it in a browser like Internet Explorer or Opera. You should see an
error like the one shown below in Figure 4. Note that if you try to view it in Safari it
may show the browser video player, but it will not play the video.

The message displayed is

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 19
HTML5

CHAPTER 7
Web form enhancements

One of the more underrated aspects of HTML5 is the introduction of several new
form controls that will make developers' lives much easier when creating forms-based
Web applications. At present, support for these new controls in terms of browser
widgets and functionality is fairly sparse, but they degrade gracefully as regular text
boxes so you can safely use them in your code now, and when browser support
improves, the features will automatically enable.

Adding a Web form

<section>
<header>
<h1>This is a feedback form</h1>
</header>
<p><form>
<label for="contact_name">Name:</label>
<input id="contact_name" placeholder="Enter your name"
autofocus><br />
<label for="contact_email">E-mail:</label>
<input type="email" id="contact_email" placeholder="Enter
your email address"><br />
<label for="contact_phone">Phone:</label>
<input type="tel" id="contact_phone" placeholder="Enter your
phone number"><br />
<label for="contact_callback">Callback on:</label>
<input type="datetime" id="contact_callback"><br />
<label for="contact_priority">Priority:</label>
<input type="range" min="1" max="5" value="1"
id="contact_priority"><br /><br />
<input type="submit" value="Request Call">
</form></p>
</section>

The first form element does not have any type attribute, and as a result it will default
to a text control. You'll notice that this has the placeholder text "Enter your name" and
is set to autofocus. Supporting browsers will automatically switch focus to this
element when the page has been rendered. The next element is of type "email" and
again contains a placeholder text value. The only browser that recognizes this type of
input element as anything special is Opera, which displays a mail icon in the field to
signify that it's an email field. The next field of interest is the datetime field with the
label "Callback on:". In supporting browsers, this will display a date and time picker.
In Opera, this displays as two controls, a textbox with a datepicker and a spinner for
the time.

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 20
HTML5

CHAPTER8

PUTTING IT ALL TOGETHER

Let’s get down to some actual code and see what an HTML5-coded web page could
look like. This is the complete source code of a html5 demo web page:

01.<!DOCTYPE html>
02.<html>
03.<head>
04. <meta charset="utf-8">
05. <title>HTML5 example with new elements and WAI-ARIA landmark
roles</title>
06. <link rel="stylesheet" href="css/base.css" type="text/css"
media="screen">
07. <!--[if lte IE 8]>
08. <script src="js/html5.js"></script>
09. <![endif]-->
10.</head>
11.
12.<body id="index-page">
13.
14. <div id="container">
15. <header role="banner">
16. <h1>HTML5 example with new elements and WAI-ARIA
landmark roles</h1>
17. <p>This page has valid simple HTML5 markup
complemented with WAI-ARIA landmark roles for accessibility</p>
18. </header>
19.
20. <nav id="demo-top-nav">
21. <ul>
22. <li><a href="http://W3C.com/html5">HTML5 demos and
samples' start page</a></li>
23. <li><a href="http://W3C.com/specification">html5
specification document</a></li>
24. <li><a href="http://w3c.com/javascript/">JavaScript
compatibility tests</a></li>
25. </ul>
26. </nav>
27.
28. <div id="demo-main" role="main">
29. <section id="demo-main-content">
30. <header>
31. <hgroup>
32. <h2>A title</h2>
33. <h3>Subtitle to the above title</h3>
34. </hgroup>
35. </header>
36.

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 21
HTML5

37. <article>
38. <p>Some content, created <time datetime="2010-
10-14">October 14th 2010</time></p>
39. </article>
40. <article>
41. <p>Some more content - i guess you get the
drift by now</p>
42. </article>
43.
44. <article>
45. <header>
46. <h2>The HTML code for this page</h2>
47. </header>
48.
49. </article>
50. </section>
51.
52. <aside id="demo-aside-content" role="complementary">
53. This is just a demo page to see HTML5 markup and
WAI-ARIA landmark roles in action in a simple context
54. </aside>
55. </div>
56.
57. <footer id="page-footer" role="contentinfo">
58. </footer>
59. </div>
60.
61.</body>
62.</html>

As you can see, it looks more or less than every other HTML web page you have ever
seen, but with just a few new HTML elements being used and the role attribute with
landmark roles for WAI-ARIA to make it more accessible.

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 22
HTML5

CHAPTER 9

PROS & CONS

Pros
Major players using it

To begin with, a lot of major players have already started implementing it.
Google.com already have the HTML5, the new hyped Google Wave is revolving a lot
around HTML5 and related and there is also a YouTube HTML5 demo page.

Strict rendering

The HTML5 doctype will trigger the strictest rendering in all web browsers. No
Almost Standards Mode, no quirks; strict all the way, which is the way we want, and
the way it should be.

Progressive enhancement

You can start today just by changing the doctype. Then gradually move onto
exchanging some structure elements, sprinkle it with some WAI-ARIA etc and before
you know it, you have a fantastic HTML5 page!

Validation available

Now even the W3C Validator supports HTML5. Just use the Firefox Web
Developer Extension to validate your HTML against it. The HTML Validator
extension unfortunately doesn’t support it yet, but I know there are at least plans to
include this – if you have any ides or input, please help him out.

SEO

It probably doesn’t matter much right now, but in the future, I think that web sites
that are marked up in a much more rich fashion with new HTML5 elements to give
them the multitude they need, will benefit a lot from this.

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 23
HTML5

Cons
Internet Explorer

It probably doesn’t come as a shock to you, but Internet Explorer, all current versions
(yes, including IE8 as well) has a little issue: it won’t apply any CSS to an unknown
element (e.g. nav, section etc).

However it was found out that with an HTML5 Shiv, sort of an electrical shock for IE
to start rendering things at least a little bit more properly, you can address that
problem.

The gist of it is that you need to call document.createElement with the name of each
new HTML5 element you use in the page. You don’t need to use it to append or place
those element, just call it to make IE aware of them. Remy Sharp has written a little
HTML5 enabling script for Internet Explorer, version 6 to 8 which works in all
possible cases.

People eager for HTML5 has argued that we will need script dependency for IE to
render styling for those elements, otherwise it will render unstyled, but with the
content still fully accessible. While I agree in theory, I think it is, at times, an
unnecessary requirement for using HTML5.

Another option is the content negotiation approach, where we on the server exchange

the new elements for old ones just for Internet Explorer. It’s simple: just have a
regular expression to replace all block elements (header, footer, section etc) with div
elements, and the inline ones (time, mark etc) with span elements.

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 24
HTML5

CHAPTER 10

SUMMARY & CONCLUSION

HTML5 is very much at an early stage of development, and it will be interesting to
see how the new features it proposes are adopted by the different browser vendors.At
present, of the major browsers, Opera, Safari, Firefox, and Chrome are providing
support for more enhancements with each release, and one would hope to see the bulk
of HTML5 features supported by the end of 2010. Several issues may stop HTML5
from becoming widespread in the near future, however. The first real issue is the lack
of support of it from Microsoft's Internet Explorer, the most widely used Web
browser on the market. It is unlikely that developers will be able to test any HTML5
features on IE until the first beta version of IE9 is released. At least for now, sites
developed for HTML5 degrade quite gracefully on IE8, and with a bit of extra work,
fallbacks can be put in place to provide workarounds for IE users. Another major
issue is the one surrounding video codecs and containers. The way things stand, the
<video> element will not replace Flash video as the video standard for the Web. With
different browsers backing different codecs, it's still much easier to use Flash than it is
to encode your videos for Theora and H.264. Here's hoping that some kind of
breakthrough is made this year on HTML5 video. In summary, HTML5 is an exciting
standard, and you can start future-proofing your Web sites to be compliant with these
new specifications right now.Together with that, always style you elements through
their id attribute or class value, and you are good to go! All modern web browsers +
screen readers + search engines will get rich HTML5 markup; IE will get plain old
HTML.The drawback of the first option is script dependency to get correct styling for
the new HTML5 elements; the drawback with the other approach could be duplicating
CSS and JavaScript code. Therefore, consider the options and choose the approach
you deem most suitable.

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 25
HTML5

CHAPTER 11

REFERENCES

1 Create Modern Website using HTML 5

Tutorial by Joe Lennon

2 http://www.w3.org/TR/2010/WD-html5-20100624/

3 HTML:The Complete Reference, Thomas A.Powell, Publisher:Tata McGraw

Hill.Second edition c1999

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 26
HTML5

CHAPTER 12
APPENDIX

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 27
HTML5

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 28
HTML5

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 29
HTML5

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 30
HTML5

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 31
HTML5

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL

 32
HTML5

DEPT OF COMPUTER SCIENCE LMCST KUTTICHAL