A group about Web Design & Development. Ask and Learn everything related to web design and development.

Report article RSS Feed Some of HTML 5 features in a nutshell

Almost all of new features of HTML 5 in a nutshell.

Posted by feillyne on Jun 11th, 2010
Basic Other.

HTML5 introduces new tags and new attributes, mainly simplifying the embedding process.

Also, declaring DOCTYPEs are much easier. Instead of specifying the exact doctype, you need only to insert this tag:

code:
<!DOCTYPE HTML>

at the beginning. (Still w/o any closing tags/characters.)

* * *


New tags

Two new important media tags are video and audio. Let's start from the practice first:

code:
<!DOCTYPE HTML>

<html>
<head>
<title>HTML5 page</title>
</head>
<body>
<!-- Video tag lets you insert your videos easily.
Controls attribute specifies if controls (play/stop, sound volume, etc.) are visible -->
<video src="movie.ogg" controls="controls"></video><br />

<!-- Autoplay: plays the video immediately after the page loaded -->
<video src="movie.ogg" autoplay="autoplay"></video><br />

<!-- loop: loops a video (plays again and again), warning: FF doesn't seem to implement this attribute yet, but e.g. Google Chrome supports it
witdth and height specify the size of the video frame -->
<video src="movie.ogg" autoplay="autoplay" loop="loop" width="120" height="60"></video><br />

<!-- preload attribute specifies if the vid must be loaded with the page and ready to play, ignored if the "autoplay" attribute is on -->
<video src="movie.ogg" preload="preload" width="120" height="60" controls="controls"></video><br />

<!-- video and source tags supporting different video file formats -->
<video preload="preload" width="256" height="128" controlos="controls"
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser doesn't support the VIDEO tag!
</video>

<audio src="song.ogg" preload="preload" controls="controls"></audio>

<audio src="song.ogg" controls="controls" autoplay="autoplay" loop="loop">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/ogg">
Your browser doesn't support the AUDIO tag!
</audio>

</body>
</html>

You can download these examples of media files from W3Schools:
movie.ogg
song.ogg

Video file formats:
IE 8 supports NOTHING. = ]
Firefox 3.5: Ogg
Opera 10.5: Ogg
Chrome 3.0: Ogg, MPEG 4
Safari 3.0: MPEG 4

The most often supported: Ogg
MPEG 4 can be used for Safari.

Audio file formats:
IE 8 supports... no suprise!... NOTHING!
Firefox 3.5: Ogg Vorbis, Wav
Opera 10.5 Ogg Vorbis, Wav
Chrome 3.0: Ogg Vorbis, MP3
Safari 3.0: MP3, Wav

The most often supported: Ogg Vorbis, Wav
MP3 should be avoided.

* * *

There are other new tags:
article, aside, command, datalist, details, embed, summary, figure, figcaption, footer, header, hgroup, keygen, mark, meter, nav, progress, ruby, rt, rp, section, source, time.

Also, INPUT tag received new TYPE attributes. The current ones:
button, checkbox, file, hidden, image, password, radio, reset, submit, text
The newly added ones:
tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color

Notice that only Opera 8.0 supports them all except search and color attribute values ATM. Chrome and Safari provide support for range attribute value only.

Current standard attributes (for all tags):
accesskey, class, dir, id, lang, style, tabindex, title
Newly added ones, attribute (possible values):
contenteditable (true/false), contextmenu (id name), data-YourValue (e.g. data-yourAttribute="yourAttribute"), draggable (true/false/auto), hidden (hidden), item (empty / url link), itemprop (url / group number), spellcheck (true / false), subject (id name).

* * *

New events

Window events, current:
onblur, onfocus
New:
onafterprint, onbeforeprint, onbeforeonload, onerror, onhaschange, onmessage, onoffline, ononline, onpagehide, onpageshow, onpopstate, onredo, onresize, onstorage, onundo, onunload

Form events, current:
onblur, onchange, onfocus, onselect, onsubmit (onreset is said to be not supported in HTML 5)
New:
oncontextmenu, onformchange, onforminput, oninput, oninvalid

Mouse events, current:
onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
New:
ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onmousewheel, onscroll

Media events, current:
onabort (only)
New:
oncanplay, oncanplaythrough, ondurationchange, onemptied, onended, onerror, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, onseeked, onseeking, onstalled, onsuspend, ontimeupdate, onvolumechange, onwaiting

* * *


That's not all, folks. Only a short list of new HTML 5 features.

Post comment Comments
Gen.Kenobi
Gen.Kenobi Jun 11 2010, 12:37pm says:

Amazing!

+3 votes     reply to comment
booman
booman Sep 15 2010, 1:02pm says:

I heard that some of HTML5 will have drawTo commands like in flash so you can create vector shapes right in HTML.
I'm glad they are planning to make media easier to embed and use without having 50 lines of code

+3 votes     reply to comment
Post a Comment
click to sign in

You are not logged in, your comment will be anonymous unless you join the community today (totally free - or sign in with your social account on the right) which we encourage all contributors to do.

2000 characters limit; HTML formatting and smileys are not supported - text only

Established
Nov 13, 2007
Privacy
Public
Subscription
Open to all members
Contact
Send Message
Email
Members Only
Membership
Join this group
Group Watch
Track this group
Tutorial
Browse
Tutorials
Report Abuse
Report article
Related Groups
Inside the Page
Inside the Page Hobbies & Interests group with 54 members
Web devs & web game devs
Web devs & web game devs Hobbies & Interests group with 35 members