LESSON 1

Essential HTML5
Welcome to HTML5, the new exciting version of HTML5 that pushes the
web-development envelope. Packed with features, HTML5 is winning
legions of fans as it goes beyond what HTML has been traditionally able
to do. In this lesson, well get an overview of what HTML5 can do and
start the process of creating HTML5 documents.
Welcome to HTML5
HTML5 breaks down the barrier between HTML and scripting. HTML5
turns out to be very script intensive. It has a bunch of new elements and
attributes, but the major push in HTML5 has to do with features that you
can access only through scripting.
Whether its dragging and dropping items, drawing in a canvas, storing
data in the browser between page accesses, browser history, or any of
more than a dozen other topics, HTML5 relies on scriptingand that
means JavaScript for most peoplemore than ever before. To make
HTML5 work, you have to use scripting.
Thats a good thing, because incorporating the new capabilities, which
demand scripting, into HTML itself means that browser manufacturers will
have to support those new capabilities. Often, whats possible in JavaScript
varies widely from browser to browser, and requiring a lot of scripting
support in HTML will make support for the new features uniform across
all browsers.
All versions of HTML, including HTML5, are products of the World Wide
Web Consortium, or W3C (www.w3c.org), which is composed of the peo-
ple responsible for putting together the various versions of the HTML
specifications. The version before HTML5, which is HTML 4.01, came
out in 1999.
6 LESSON 1: Essential HTML5
Each W3C specification, called a recommendation (W3C is careful not to
consider itself a standards-creating body, so they call their specifications
recommendations), goes through several steps.
First comes Note status, where some people at W3C start discussing some
issue. Then a Working Draft of a specification is created, and the W3C
invites comments. Next comes a Candidate Recommendation, and then the
final version of a W3C specification, the Recommendation.
All these steps are posted online for you to peruse. HTML5 is in Working
Draft format at the time this book was written, and you can see the specifi-
cation as it stands at W3C, http://www.w3.org/TR/html5/ (which is just a
long table of contents of links to other documents).
Well be working from the W3C HTML5 Working Draft in this book.
Because its still relatively early in HTML5s history, browser support is
spotty. All the features well take a look at in this book are supported in
one or more browsers, but not in all browsers (well be looking at Internet
Explorer, Chrome, Firefox, Opera, and Safari). For each feature, well list
which browsers support it.
Lets get an overview now of HTML5 capabilities.
Drawing With the Canvas Element
The Canvas element has been long awaited. As its name implies, you can
use this element to draw on, and that can mean drawing some complex fig-
ures. You can draw lines, circles, arcs, rectangles, curves, and more. You
can color figures as you like them and even insert images.
The Canvas control is a powerful one because it brings dynamic graphics
to Web pages, displaying graphics that you can change in response to the
users actions. This element relies extensively on JavaScript, as do most
HTML5 elements, so you do your drawing in JavaScript.
For most figures, you use a simple function call in JavaScript, such as
lineTo(), stroke(), or fill(). So youre drawing from JavaScript, as well see
in Lesson 2.
7 Getting Data With the New Web Form Controls
Dragging and Dropping
Another eagerly anticipated feature in HTML5 is drag and drop. Formerly,
dragging and dropping items in a web page relied on ad hoc JavaScript,
which had to be written differently for every browser. Now dragging and
dropping will be uniform across all browsers.
If youve ever written drag and drop code in JavaScript, you know what a
huge relief this will be. No longer will you have to test which browser
your code is executing in and decide what code to runthat for the
Internet Explorer, Firefox, and so on.
In HTML5, most visual elements have a draggable attribute, which, if set
to true, allows users to drag and drop the elementprovided they imple-
ment the dragging and dropping in JavaScript. Well see all about drag and
drop in Lesson 3.
Getting Data With the New Web
Form Controls
HTML5 comes stocked with a number of new controls, extending consid-
erably the controls already available in HTML (such as check boxes,
option buttons, and so on). For example, there is now a color picker, an
email field, a datetime control, and even a telephone number control.
These controls offer a lot of much-needed power to HTML. For example,
the color control usually displays a color picker where the user can select
colors just by clicking them. The datetime control usually displays a small
calendar that the user can select dates from. The actual implementation of
these controls is up to the individual browser manufacturers, but many of
these new controls are already being implemented, and well take a look at
them in Lesson 4.
8 LESSON 1: Essential HTML5
Edit Web Pages on the Fly
Web pages become more interactive with HTML5, and that includes let-
ting the user edit text in a web page.
Remembering With Browser
History
HTML5 also allows you to get a handle on the browsers historythat is,
what pages its been to.
In Lesson 6, were going to take a look at what browser history means in
HTML5. And its not just a trail of pages eitheryou can store data
between page accesses, so that data is available to you when you return to
a page.
Thats very powerful, because until now, browsers have always started off
with a clean slate whenever they come toor come back toa page. Now
you can start storing data that will persist even between page accesses.
Saying Hello With Interdocument
Messaging
HTML5 also lets you send messages between various parts of a document,
even when those parts actually come from different documents. That is,
you might display a web page in an <iframe> in another page. Now you
can send text messages to the contained document, which you couldnt do
before.
In fact, its now possible to send messages to pages displayed in elements
like <iframe> or <div> elements even if those pages come from a com-
pletely different domain, which was quite illegal until now.
9 Making Use of Web Storage
Awesome Audio and Video
A big part of HTML5 is the video and audio support. The new <video>
element displays videos, and the <audio> element plays soundtracksall
without the use of browser plug-ins like those for Flash or QuickTime.
These new elements are the subject of Lesson 8. In that lesson, well see
which browser supports what audio and video formats at this point. For
example, as of this writing, Firefox, Opera, and Chrome all support the
Theora video format for the <video> element, which plays videos with the
extension .ogg, as well as the VP8 video codec.
In Lesson 8, well not only get videos to play with the <video> element,
but well also see how to convert common video formats into formats that
will play using that element.
Making Use of Web Storage
One of the things that HTML/JavaScript authors have missed in the past is
somewhere to store data between page accesses. That is, when you reopen
a page that includes standard JavaScript, all the variables in your
JavaScript are reset to their original values.
Thats fixed in HTML5, where you have the option of saving data in the
browser, as well as in the browsers session with the server. The details are
coming up in Lesson 9.
In Lesson 9 well create an example where all you have to do to store text
locally in the browser is to enter that text in a text field and click the Store
button. Then you can navigate away from the page and come back to it
later. When you come back later, you can click the Get button, and the
data in the text field will be restored.
HTML/JavaScript authors now have the ability to store data between page
accesses. Very cool.
10 LESSON 1: Essential HTML5
Using the New Elements
What would a new version of HTML be without new HTML elements?
Here are the HTML elements that are new in HTML5and well take a
look at them in Lesson 10:
. <article>
. <aside>
. <audio>
. <canvas>
. <command>
. <datalist>
. <details>
. <embed>
. <figcaption>
. <figure>
. <footer>
. <header>
. <hgroup>
. <keygen>
. <mark>
. <meter>
. <nav>
. <output>
. <progress>
. <rp>
. <rt>
11 Using the New Elements
. <ruby>
. <section>
. <source>
. <summary>
. <time>
. <video>
And these are elements that are dropped in HTML5:
. <acronym>
. <applet>
. <basefont>
. <big>
. <center>
. <dir>
. <font>
. <frame>
. <frameset>
. <isindex>
. <noframes>
. <s>
. <strike>
. <tt>
. <u>