Post tutorial RSS Some of HTML 5 features in a nutshell

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

Posted by on - 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.



Reply Good karma Bad karma+3 votes

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

Reply Good karma Bad karma+3 votes
Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.