Scribd
Upload
48 views

HTML 5

HTML5 is the latest evolution of the standard for HTML that adds new semantic elements, canvas for drawing, video and audio elements, and forms. It is developed jointly by the W3C and WHATWG to be more compatible with modern web applications and reduce reliance on plugins. The <video> element allows embedding video in web pages in a standard way across browsers using different supported formats like MP4, WebM, and Ogg. HTML5 introduces many new features but also removes obsolete elements and provides new semantic elements for common structures like <header>, <footer>, <nav>, and <article>.

Uploaded by

olteanu nicoleta
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
48 views

HTML 5

HTML5 is the latest evolution of the standard for HTML that adds new semantic elements, canvas for drawing, video and audio elements, and forms. It is developed jointly by the W3C and WHATWG to be more compatible with modern web applications and reduce reliance on plugins. The <video> element allows embedding video in web pages in a standard way across browsers using different supported formats like MP4, WebM, and Ogg. HTML5 introduces many new features but also removes obsolete elements and provides new semantic elements for common structures like <header>, <footer>, <nav>, and <article>.

Uploaded by

olteanu nicoleta
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

HTML 5

Example
<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls="controls">


<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

</body>
</html>

What is HTML5?
HTML5 will be the new standard for HTML.

The previous version of HTML, HTML 4.01, came in 1999. The web has changed a lot since
then.

HTML5 is still a work in progress. However, the major browsers support many of the new
HTML5 elements and APIs.

How Did HTML5 Get Started?


HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web
Hypertext Application Technology Working Group (WHATWG).

WHATWG was working with web forms and applications, and W3C was working with
XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.

Some rules for HTML5 were established:

 New features should be based on HTML, CSS, DOM, and JavaScript


 Reduce the need for external plugins (like Flash)
 Better error handling
 More markup to replace scripting
 HTML5 should be device independent
 The development process should be visible to the public
The HTML5 <!DOCTYPE>
In HTML5 there is only one <!doctype> declaration, and it is very simple:

<!DOCTYPE html>

Minimum HTML5 Document


Below is a simple HTML5 document, with the minimum of required tags:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

HTML5 - New Features


Some of the most interesting new features in HTML5:

 The <canvas> element for 2D drawing


 The <video> and <audio> elements for media playback
 Support for local storage
 New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
 New form controls, like calendar, date, time, email, url, search

Browser Support for HTML5


HTML5 is not yet an official standard, and no browsers have full HTML5 support.

But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add
new HTML5 features to their latest versions.

New Elements in HTML5


The internet has changed a lot since HTML 4.01 became a standard in 1999.

Today, some elements in HTML 4.01 are obsolete, never used, or not used the way they were
intended to. These elements are removed or re-written in HTML5.

To better handle today's internet use, HTML5 includes new elements for better structure,
better form handling, drawing, and for media content.

New Semantic/Structural Elements


HTML5 offers new elements for better structure:

Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
Isolates a part of text that might be formatted in a different direction from
<bdi>
other text outside it
<command> Defines a command button that a user can invoke
<details> Defines additional details that the user can view or hide
<summary> Defines a visible heading for a <details> element
Specifies self-contained content, like illustrations, diagrams, photos, code
<figure>
listings, etc.
<figcaption> Defines a caption for a <figure> element
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<ruby> Defines a ruby annotation (for East Asian typography)
Defines an explanation/pronunciation of characters (for East Asian
<rt>
typography)
<rp> Defines what to show in browsers that do not support ruby annotations
<section> Defines a section in a document
<time> Defines a date/time
<wbr> Defines a possible line-break

New Media Elements


HTML5 offers new elements for media content:

Tag Description
<audio> Defines sound content
<video> Defines a video or movie
<source> Defines multiple media resources for <video> and <audio>
Defines a container for an external application or interactive content (a plug-
<embed>
in)
<track> Defines text tracks for <video> and <audio>

The new <canvas> Element


Tag Description
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

New Form Elements


HTML5 offers new form elements, for more functionality:

Tag Description
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

Removed Elements
The following HTML 4.01 elements are removed from HTML5:

 <acronym>
 <applet>
 <basefont>
 <big>
 <center>
 <dir>
 <font>
 <frame>
 <frameset>
 <noframes>
 <strike>
 <tt>
 <u>

Video on the Web


Until now, there has not been a standard for showing a video/movie on a web page.

Today, most videos are shown through a plug-in (like flash). However, different browsers
may have different plug-ins.

HTML5 defines a new element which specifies a standard way to embed a video/movie on a
web page: the <video> element.

HTML5 Video - How It Works


To show a video in HTML5, this is all you need:

Example
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>

Try it yourself »

The control attribute adds video controls, like play, pause, and volume.

It is also a good idea to always include width and height attributes. If height and width are set,
the space required for the video is reserved when the page is loaded. However, without these
attributes, the browser does not know the size of the video, and cannot reserve the appropriate
space to it. The effect will be that the page layout will change during loading (while the video
loads).

You should also insert text content between the <video> and </video> tags for browsers that
do not support the <video> element.

The <video> element allows multiple <source> elements. <source> elements can link to
different video files. The browser will use the first recognized format.

Video Formats and Browser Support


Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and
Ogg:

Browser MP4 WebM Ogg


Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES NO NO
Opera 10.6 NO YES YES

 MP4 = MPEG 4 files with H264 video codec and AAC audio codec
 WebM = WebM files with VP8 video codec and Vorbis audio codec
 Ogg = Ogg files with Theora video codec and Vorbis audio codec

HTML5 Video Tags


Tag Description
<video> Defines a video or movie
Defines multiple media resources for media elements, such as <video>
<source>
and <audio>
<track> Defines text tracks in mediaplayers

HTML5 <video> - Take Control Using the DOM


The HTML5 <video> element also has methods, properties, and events.

There are methods for playing, pausing, and loading, for example. There are properties (e.g.
duration, volume, seeking) that you can read or set. There are also DOM events that can
notify you, for example, when the <video> element begins to play, is paused, is ended, etc.

The examples below illustrate, in a simple way, how to address a <video> element, read and
set properties, and call methods.

<!DOCTYPE html>
<html>
<body>

<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br />
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4" />
<source src="mov_bbb.ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
</div>

<script type="text/javascript">
var myVideo=document.getElementById("video1");

function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}

function makeBig()
{
myVideo.width=560;
}

function makeSmall()
{
myVideo.width=320;
}

function makeNormal()
{
myVideo.width=420;
}
</script>

<p>Video courtesy of <a href="http://www.bigbuckbunny.org/"


target="_blank">Big Buck Bunny</a>.</p>
</body>
</html>

HTML5 <video> - Methods, Properties, and Events


The table below lists the video methods, properties, and events supported by most browsers:

Methods Properties Events


play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
duration timeupdate
ended ended
error abort
paused empty
muted emptied
seeking waiting
volume loadedmetadata
height
width

Note: Of the video properties, only videoWidth and videoHeight are immediately available.
The other properties are available after the video's meta data has loaded.

Audio on the Web


Until now, there has not been a standard for playing audio files on a web page.

Today, most audio files are played through a plug-in (like flash). However, different browsers
may have different plug-ins.

HTML5 defines a new element which specifies a standard way to embed an audio file on a
web page: the <audio> element.

HTML5 Audio - How It Works


To play an audio file in HTML5, this is all you need:

Example
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

Try it yourself »

The control attribute adds audio controls, like play, pause, and volume.

You should also insert text content between the <audio> and </audio> tags for browsers that
do not support the <audio> element.
The <audio> element allows multiple <source> elements. <source> elements can link to
different audio files. The browser will use the first recognized format.

Audio Formats and Browser Support


Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg:

Browser MP3 Wav Ogg


Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES YES NO
Opera 10.6 NO YES YES

HTML5 Audio Tags


Tag Description
<audio> Defines sound content
Defines multiple media resources for media elements, such as <video>
<source>
and <audio>

Drag and Drop


Drag and drop is a very common feature. It is when you "grab" an object and drag it to a
different location.

In HTML5, drag and drop is part of the standard, and any element can be draggable.

Browser Support

Internet Explorer 9, Firefox, Chrome, and Safari 5 support drag and drop.

Note: Drag and drop does not work in Safari 5.1.2.


HTML5 Drag and Drop Example
The example below is a simple drag and drop example:

Example
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)"


ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />

</body>
</html>

Try it yourself »

It might seem complicated, but lets go through all the different parts of a drag and drop event.

Make an Element Draggable


First of all: To make an element draggable, set the draggable attribute to true:

<img draggable="true" />


What to Drag - ondragstart and setData()
Then, specify what should happen when the element is dragged.

In the example above, the ondragstart attribute calls a function, drag(event), that specifies
what data to be dragged.

The dataTransfer.setData() method sets the data type and the value of the dragged data:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

In this case, the data type is "Text" and the value is the id of the draggable element ("drag1").

Where to Drop - ondragover


The ondragover event specifies where the dragged data can be dropped.

By default, data/elements cannot be dropped in other elements. To allow a drop, we must


prevent the default handling of the element.

This is done by calling the event.preventDefault() method for the ondragover event:

event.preventDefault()

Do the Drop - ondrop


When the dragged data is dropped, a drop event occurs.

In the example above, the ondrop attribute calls a function, drop(event):

function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}

Code explained:
 Get the dragged data with the dataTransfer.getData("Text") method. This method will
return any data that was set to the same type in the setData() method
 The dragged data is the id of the dragged element ("drag1")
 Append the dragged element into the drop element
 Call preventDefault() to prevent the browser default handling of the data
(default is open as link on drop)

You might also like