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