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

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

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

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

Comments
Gen.Kenobi
Gen.Kenobi

Amazing!

Reply Good karma Bad karma+3 votes
booman
booman

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.

Established
Privacy
Public
Subscription
Open to all members
Contact
Send Message
Membership
Join group
Group watch
Follow
Tutorial
Browse
Tutorials
Report
Report
Share
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 42 members