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

Post tutorial Report content 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:


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:


<title>HTML5 page</title>
<!-- 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!

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


You can download these examples of media files from W3Schools:

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
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)
oncontextmenu, onformchange, onforminput, oninput, oninvalid

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

Media events, current:
onabort (only)
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 Jun 11 2010 says:


+3 votes     reply to comment
booman Sep 15 2010 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

You are not logged in, your comment will be anonymous unless you join the community. Or sign in with your social account:

Nov 13, 2007
Open to all members
Send Message
Join this group
Group watch
Start tracking
Related Groups
Inside the Page
Inside the Page Hobbies & Interests with 56 members
Web devs & web game devs
Web devs & web game devs Hobbies & Interests with 39 members