What is

HTML5?

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

HTML5 will be the new standard for HTML, XHTML, and

the HTML DOM.
The previous version of HTML came in 1999. The web
has changed a lot since then.
HTML5 is still a work in progress. However, most
modern browsers have some HTML5 support.
How Did HTML5 Get Started?
HTML5 is cooperation between the World Wide Web
Consortium (W3C) and the Web Hypertext Application
Technology Working Group (WHATWG).
WHATWG was working with web forms and applications,
and W3C was working with XHTML 2.0. In 2006, they
decided to cooperate and create a new version of HTML.
Some rules for HTML5 were established:
New features should be based on HTML, CSS, DOM,
and

JavaScript

Reduce the need for external plugins (like Flash)

Better error handling

More markup to replace scripting

HTML5 should be device independent

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

The development process should be visible to the

public

New Features
Some of the most interesting new features in HTML5:

The canvas element for drawing

The video and audio elements for media playback

Better support for local ofine storage

New content specific elements, like article, footer,

header, nav, section

New form controls, like calendar, date, time, email,

url, search

Browser Support
HTML5 is not yet an oficial standard, and no browsers
have full
HTML5 support.
But all major browsers (Safari, Chrome, Firefox, Opera,
and Internet
Explorer) continue to add new HTML5 features to their
latest versions.
HTML5 New Elements
New Elements in HTML5
The internet has changed a lot since HTML 4.01 became a
standard in

1999.

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

Today, some elements in HTML 4.01 are obsolete, never

used, or not used the way they were intended to. These
elements are deleted or re- written in HTML5.
To better handle today's internet use, HTML5 also
includes new
elements for better structure, drawing, media
content, and better form handling.
New Markup Elements
New elements for better structure:
Ta
g
<article>

Descripti
on
For external content, like text from a
news-article,
blog, forum, or any other content from an

<aside>

external source
For content aside from the content it is
placed in.
The aside content should be

related to the surrounding content

<command A button, or a radiobutton, or a checkbox
>
<details>
For describing details about a
document, or parts of a document
<summary
>
<figure>

A caption, or summary, inside the details

element
For grouping a section of stand-alone
content,
could be a video

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

<figcaption The caption of the figure section

>
<footer>
For a footer of a document or section,
could
include the name of the author, the
date of the document, contact
<header>

information, or copyright information

For an introduction of a document or
section, could

<hgroup>

include navigation
For a section of headings, using <h1> to
<h6>,
where the largest is the main

<mark>
<meter>

<nav>

heading of the section, and the

For text that should be highlighted
For a measurement, used only if the
maximum and
minimum values are known
For a section of navigation

<progress> The state of a work in progress

<ruby>
<rt>

For ruby annotation (Chinese notes or

characters)
For explanation of the ruby annotation

<rp>

What to show browsers that do not

support the ruby element

<section>

For a section in a document. Such as

chapters,
headers, footers, or any other
sections of the document

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

<time>

For defining a time or a date, or both

<wbr>

Word break. For defining a line-break

opportunity.

New Media Elements

HTML5 provides a new standard for media content:
Ta
g
<audio>

Descripti
on
For multimedia content, sounds, music or
other

<video>

audio streams
For video content, such as a movie clip or
other

<source>

video streams
For media resources for media elements,
defined

<embed>

inside video or audio elements

For embedded content, such as a plug-in

The Canvas Element

The canvas element uses JavaScript to make drawings on
a web page.
Ta
g
<canvas>

Descripti
on
For making graphics with a script

New Form Elements

HTML5 offers more form elements, with more
functionality:

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

Ta
Descripti
g
on
<datalist> A list of options for input values
<keygen> Generate keys to authenticate users
<output>

For diferent types of output, such as

output written
by a script

New Input Type Attribute Values

Also, the input element's type attribute has many
new values, for better input control before sending it
to the
server:
Type

search

Descripti
on
The input value is of type telephone
number
The input field is a search field

url

The input value is a URL

email
datetime

The input value is one or more email

addresses
The input value is a date and/or time

date

The input value is a date

month

The input value is a month

week

The input value is a week

time

The input value is of type time

datetim

The input value is a local date/time

tel

e- local
number

The input value is a number

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

range

The input value is a number in a given

range
The input value is a hexadecimal color, like
#FF8800

color

HTML5 Video

Video on the Web

Until now, there has never been a standard for showing
video on a web page.
Today, most videos are shown through a plugin (like
flash). However, not all browsers have the same
plugins.
HTML5 specifies a standard way to include video,
with the video element.
Video Formats
Currently, there are 3 supported video formats for the
video element:
Format

IE

Firefox Opera

Ogg

No

3.5+

10.5+

Chrome Safar
i
5.0+
No

MPEG 4

No

No

No

5.0+

3.0+

WebM

No

No

10.6+

6.0+

No

Ogg = Ogg files with Theora video codec and Vorbis

audio

codec

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

MPEG4 = MPEG 4 files with H.264 video codec and

AAC audio codec

WebM = WebM files with VP8 video codec and

Vorbis audio

codec
How It Works
To show a video in HTML5, this is all you need:
<video src="movie.ogg" controls="controls">
</video>

All <video> Attributes

Attribute

Value

Description

audio

muted

Defining the default state of

the
the audio. Currently, only

autoplay

autoplay

"muted" is allowed
If present, then the video will
start

controls

controls

playing as soon as it is ready

If present, controls will be

height

pixels

loop

loop

displayed, such as a play

button
Sets the height of the video
player
If present, the video will start
over
again, every time it is finished

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

poster

url

Specifies the URL of an image

representing the video

preload

preload

If present, the video will be

loaded
at page load, and ready

src

url

width

pixels

to run. Ignored if
The URL of the video to play
Sets the width of the video
player

HTML5 Audio

Audio on the Web

Until now, there has never been a standard for playing
audio on a web page.
Today, most audio are played through a plugin (like flash).
However,
not all browsers have the same plugins.
HTML5 specifies a standard way to include audio,
with the audio element.
The audio element can play sound files, or an audio
stream.
Audio Formats
Currently, there are 3 supported formats for the audio
element:

Format

IE 8

Firefox Opera

Chrome Safari

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

3.5

10.5

3.0

3.0

Ogg Vorbis No

Yes

Yes

Yes

No

MP3

No

No

No

Yes

Yes

Wav

No

Yes

Yes

No

Yes

How It Works
To play an audio file in HTML5, this is all you need:
<audio src="song.ogg" controls="controls">
</audio>

All <audio> Attributes

Attribute

Value

Description

autoplay

autoplay

Specifies that the audio

will start playing as soon

controls

loop

controls

as
it is ready.
Specifies
that controls will be

loop

displayed, such as a play

button.
Specifies that the audio will
start
playing again (looping)

preload

preload

when it reaches the end

Specifies that the audio will be
loaded
at page load, and ready
to run. Ignored if

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

src
to play

url

Specifies the URL of the audio

HTML5 Canvas
The canvas element is used to draw graphics on a web
page.

What is Canvas?
The HTML5 canvas element uses JavaScript to draw
graphics on a web page.
A canvas is a rectangular area, and you control every
pixel of it.
The canvas element has several methods for drawing
paths, boxes, circles, characters, and adding images.
Create a Canvas Element
Add a canvas element to the HTML5
page. Specify the id, width, and height
of the element:
<canvas id="myCanvas" width="200"
height="100"></canvas>

Draw With JavaScript

The canvas element has no drawing abilities of its
own. All drawing must be done inside a JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

var

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

cxt=c.getContext("2d"
);
cxt.fillStyle="#FF0000
";
cxt.fillRect(0,0,150,75
);
</script>

JavaScript uses the id to find the canvas element:

var c=document.getElementById("myCanvas");

Then, create a context object:

var cxt=c.getContext("2d");

The getContext("2d") object is a built-in HTML5 object,

with many methods to draw paths, boxes, circles,
characters, images and more. The next two lines draws
a red rectangle:
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
The fillStyle method makes it red, and the fillRect
method specifies the shape, position, and size.

Understanding Coordinates
The fillRect method above had the parameters
(0,0,150,75).
ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

This means: Draw a 150x75 rectangle on the canvas,

starting at the top left corner (0,0).
The canvas' X and Y coordinates are used to position
drawings on the
canvas.
HTML5 Input Types

HTML5 New Input Types

HTML5 has several new input types for forms. These
new features allow for better input control and
validation.
This chapter covers the new input types:

email

url

number

range

Date pickers (date, month, week, time,

datetime, datetime- local)

search

color

Browser
Support

Input type

IE

Firefo
x

Opera Chrom
e

Safari

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

email

No

No

9.0

No

No

url

No

No

9.0

No

No

number

No

No

9.0

7.0

No

range

No

No

9.0

4.0

4.0

Date pickers

No

No

9.0

No

No

search

No

No

11.0

No

No

color

No

No

11.0

No

No

Note: Opera has the best support for the new input
types. However, you can already start using them in all
major browsers. If they are not supported, they will
behave as regular text fields.
Input Type - email
The email type is used for input fields that should
contain an e-mail address.
The value of the email field is automatically validated when
the form is
submitted.
Example
E-mail: <input type="email" name="user_email" />

Tip: Safari on the iPhone recognizes the email input type,

and changes
the on-screen keyboard to match it (adds @ and .com
options).

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

Input Type
- url

The url type is used for input fields that should contain a
URL address. The value of the url field is automatically
validated when the form is submitted.
Example
Homepage: <input type="url" name="user_url" />

Tip: Safari on the iPhone recognizes the url input type,

and changes the on-screen keyboard to match it
(adds .com option).
Input Type - number
The number type is used for input fields that should
contain a numeric value.
You can also set restrictions on what numbers are
accepted:
Example
Points: <input type="number" name="points" min="1"
max="10" />
Use the following attributes to specify restrictions for the
number
type:
Attribute
max

Value
number

Descripti
on
Specifies the maximum value
allowed

min

number

Specifies the minimum value

allowed

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

step

value

number

number

Specifies legal number intervals

(if
step="3", legal numbers could
be Specifies the default value

Tip: Safari on the iPhone recognizes the number

input type, and changes the on-screen keyboard to
match it (shows numbers).
Input Type - range
The range type is used for input fields that should
contain a value from a range of numbers.
The range type is displayed as a slider bar.
You can also set restrictions on what numbers are
accepted:
Example
<input type="range" name="points" min="1" max="10"
/>

Use the following attributes to specify restrictions for the

range type:
Attribute

Value

max

number

min

number

Descripti
on
Specifies the maximum value
allowed
Specifies the minimum value
allowed

step

number

Specifies legal number

intervals (if step="3", legal
numbers could be -

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

3,0,3,6, etc)
value

number

Specifies the default value

Input Type - Date Pickers

The following example allows you to select a date from a
calendar:
Example
Date: <input type="date" name="user_date" />

Input Type color

The color type is used for input fields that should
contain a color. This input type will allow you to
select a color from a color picker: Example
Color:
<input
name="user_color" />

type="color"

HTML5 Form Elements

HTML5 New Form Elements
HTML5 has several new elements and
attributes for forms. This chapter covers the
new form elements:

datalist

keygen

output

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

Browser
Support
Attribute

IE

datalist

No

Firefo Opera Chrom Safari

x
e
No
9.5
No
No

keygen

No

No

10.5

3.0

No

output

No

No

9.5

No

No

datalist Element
The datalist element specifies a list of options for
an input field. The list is created with option
elements inside the datalist.
To bind a datalist to an input field, let the list
attribute of the input field refer to the id of the
datalist:
Example
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools"
value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com"
/>
<option label="Microsoft"
value="http://www.microsoft.com" />
</datalist>

Tip: The option elements should always have a value

attribute.

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

keygen
Element

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

The purpose of the keygen element is to provide a

secure way to authenticate users.
The keygen element is a key-pair generator. When
a form is submitted, two keys are generated, one
private and one public.
The private key is stored on the client, and the public
key is sent to the server. The public key could be used to
generate a client certificate to authenticate the user in
the future.
Currently, the browser support for this element is not
good enough to
be a useful security standard.
Example
<form action="demo_form.asp"
method="get"> Username: <input
type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

output Element
The output element is used for different types of
output, like calculations or script output:

Example
ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

<output id="result" onforminput="resCalc()"></output>

HTML5 Form Attributes

HTML5 New Form Attributes

This chapter covers some of the new attributes for
<form> and
<input>.
New form attributes:

autocomplete

novalidate

New input attributes:

autocomplete

autofocus

form

form overrides (formaction, formenctype,

formmethod, formnovalidate, formtarget)

height and width

list

min, max and step

multiple

pattern (regexp)

placeholder

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

required
Browser
Support
Attribute

IE

autocomplete 8.0

Firefo Opera Chrom Safari

x
e
3.5
9.5
3.0
4.0

autofocus

No

No

10.0

3.0

4.0

form

No

No

9.5

No

No

form
overrides
height and

No

No

10.5

No

No

8.0

3.5

9.5

3.0

4.0

No

No

9.5

No

No

min, max and No

No

9.5

3.0

No

width
list

step
multiple

No

3.5

11.0

3.0

4.0

novalidate

No

No

11.0

No

No

pattern

No

No

9.5

3.0

No

placeholder

No

No

11.0

3.0

3.0

required

No

No

9.5

3.0

No

autocomplete Attribute

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

The autocomplete attribute specifies that the form

or input field should have an autocomplete function.
Note: The autocomplete attribute works with <form>,
and the
following <input> types: text, search, url, telephone,
email, password, datepickers, range, and color.
When the user starts to type in an autocomplete field,
the browser should display options to fill in the field:
Example
<form action="demo_form.asp" method="get"
autocomplete="on"> First name: <input type="text"
name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email"
autocomplete="of" /><br
/>
<input type="submit" />
</form>
Note: In some browsers you may need to activate the
autocomplete function for this to work.
autofocus Attribute
The autofocus attribute specifies that a field should
automatically get focus when a page is loaded.
Note: The autofocus attribute works with all <input>

types.
ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

Example

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

User name: <input

type="text"
name="user_name" autofocus="autofocus" />

form Attribute
The form attribute specifies one or more forms the input
field belongs to.
Note: The form attribute works with all <input> types.
The form attribute must refer to the id of the form it
belongs to:
Example
<form action="demo_form.asp" method="get"
id="user_form"> First name:<input type="text"
name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname"
form="user_form" />

Note: To refer to more than one form, use a spaceseparated list.

Form Override Attributes
The form override attributes allow you to override
some of the attributes set for the form element.

The form override attributes are:

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

formaction - Overrides the form action attribute

formenctype - Overrides the form enctype attribute

formmethod - Overrides the form method attribute

formnovalidate - Overrides the form novalidate

attribute

formtarget - Overrides the form target attribute

Note: The form override attributes works with the

following <input>
types: submit and image.
Example
<form action="demo_form.asp" method="get"
id="user_form"> E-mail: <input type="email"
name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp"
value="Submit as admin" />
<br />
<input type="submit"
formnovalidate="true"
value="Submit without validation"
/>
<br />
</form>

Note: These attributes are helpful for creating different

submit
buttons.
ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

height and width Attributes

The height and width attributes specifies the height and
width of the image used for the input type image.
Note: The height and width attributes only works with
<input> type:
image.
Example
<input type="image" src="img_submit.gif" width="24"
height="24" />
list
Attribute
The list attribute specifies a datalist for an input field. A
datalist is a list of options for an input field.
Note: The list attribute works with the following
<input> types: text, search, url, telephone, email, date
pickers, number, range, and color. Example
Webpage: <input
name="link" />

type="url"

list="url_list"

<datalist
id="url_list">
<option
label="W3Schools"
value="http://www.w3schools.com" />
<option
label="Google"
value="http://www.google.com" />
<option

label="Microsoft"

value="http://www.microsoft.com" />
</datalis
t>

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

min, max and step

Attributes

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

The min, max and step attributes are used to specify

restrictions for input types containing numbers or
dates.
The max attribute specifies the maximum value allowed
for the input field.
The min attribute specifies the minimum value allowed
for the input field.
The step attribute specifies the legal number intervals for
the input
field (if step="3", legal numbers could be -3,0,3,6, etc).
Note: The min, max, and step attributes works with the
following
<input> types: date pickers, number, and range.
The example below shows a numeric field that accepts
values between
0 and 10, with a step of 3 (legal numbers are 0, 3, 6 and
9):
Example
Points: <input type="number" name="points"
min="0" max="10" step="3" />
multiple Attribute
The multiple attribute specifies that multiple values can
be selected for an input field.
Note: The multiple attribute works with the following

<input> types:
email, and file.
ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

Examp
le

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

Select images: <input type="file" name="img"

multiple="multiple" />

novalidate Attribute
The novalidate attribute specifies that the form or
input field should not be validated when submitted.
If this attribute is present the form will not validate form
input.
Note: The novalidate attribute works with: <form> and
the following
<input> types: text, search, url, telephone, email,
password, date pickers, range, and color.
Example
<form action="demo_form.asp"
novalidate="novalidate"> E-mail: <input
type="email" name="user_email" />
<input type="submit" />
</form>

pattern Attribute
The pattern attribute specifies a pattern used to validate
an input field. The pattern is a regular expression.
Note: The pattern attribute works with the following
<input> types:

text, search, url, telephone, email, and password

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

The example below shows a text field that can only

contain three letters (no numbers or special
characters):
Example
Country code: <input type="text"
name="country_code" pattern="[A-z]{3}"
title="Three letter country code" />
placeholder Attribute
The placeholder attribute provides a hint that describes
the expected
value of an input field.
Note: The placeholder attribute works with the following
<input>
types: text, search, url, telephone, email, and password
The hint is displayed in the input field when it is empty,
and disappears when the field gets focus:
Example
<input type="search" name="user_search"
placeholder="Search
W3Schools" />
required Attribute
The required attribute specifies that an input field must
be filled out before submitting.
Note: The required attribute works with the following
<input> types:

text, search, url, telephone, email, password, date

pickers, number, checkbox, radio, and file.
ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT

Examp
le

HTML 5 TUTORIAL BY
deGAHHAx.com//aa

Name: <input type="text" name="usr_name"

required="required" />

ATTENTION : YOU ARE TOLD TO CHANGE THE CONTENT