HTML5 New Tags

Html Course

• HTML5 video tag
• HTML5 embed tag
• Canvas tag
• HTML5 figure tag
• HTML5 hgroup tag
• HTML5 mark tag
• Progress tag
• Ruby tag
• WBR tag

This tutorial presents some of the new HTML5 tags supported in all major browsers, with a short description, and code example.
- To learn about HTML5 syntax and structure, see the page: HTML5 Quick Tutorial.
- The new form elements are presented in the lesson: New Form elements and attributes in HTML5.

HTML5 audio tag

The <audio> tag can be used to add and play sound, music or other audio streams in webpage.
It can use the following attributes:

• autoplay (autoplay='autoplay') - The audio will start playing as soon as it is ready.
• controls (controls='controls') - Specifies that audio controls should be displayed (play / pause button, etc.).
• loop (loop='loop') - The audio will start over again, every time it is finished.
• preload (preload='auto|metadata|none') - Specifies if and how the author thinks that the audio file should be loaded when the page loads. The 'preload' attribute is ignored if 'autoplay' is present.
  ('auto' - loads the entire audio file when the page loads; 'metadata' - load only metadata when the page loads; 'none' - the browser should not load the audio file when the page loads).
• src (src='url') - The URL of the audio file.

<h4>Example HTML audio element</h4>

<audio controls='controls'>
 <source src='html/html5_audio_file.ogg' type='audio/ogg' />
 <source src='html/html5_audio_file.mp3' type='audio/mp3' />
 Your browser does not support the audio tag, <a href='html/html5_audio_file.mp3'>Download file</a> instead.
</audio>

The text between the <audio> and </audio> will be displayed in browsers that do not support audio. In the example above, if the browser does not support the <audio> tag, a download link for the media file is displayed instead.

HTML5 video tag

The <video> tag is a multimedia element used to play movie clip or other video streams in webpage.
The HTML5 <video> tag accepts attributes that specify how the video should be played:

• autoplay (autoplay='autoplay') - The video will start playing as soon as it is ready.
• controls (controls='controls') - Specifies that video controls should be displayed (play / pause button, etc.).
• height (height='pixels') - Specifies the height of the video player, in pixels.
• width (width='pixels') - Specifies the width of the video player, in pixels.
• muted (muted='muted') - The audio output of the video should be muted.
• poster (poster='URL') - Specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.
• loop (loop='loop') - The video will start over again, every time it is finished.
• preload (preload='auto|metadata|none') - Specifies if and how the author thinks that the video should be loaded when the page loads. The 'preload' attribute is ignored if 'autoplay' is present.
  ('auto' - the browser should load the entire video when the page loads; 'metadata' - load only metadata when the page loads; 'none' - the browser should not load the video when the page loads).
• src (src='url') - The URL of the video file.

The <video> element uses the <source> tag to specify the sorce of the video file, and also alternative video files which the browser may choose from, based on its media type or codec support.
IE9 and Safari use MP4 file; Firefox, Chrome and Opera use OGG (or OGV) file.

<h4>Example HTML video element</h4>

<video controls='controls' width='200' height='150'>
 <source src='html/html5_video_ex.mp4' type='video/mp4' />
 <source src='html/html5_video_ex.ogg' type='video/ogg' />
 Video not playing? <a href='video/html5_video_ex.mp4'>Download file</a> instead.
</video>

The text between the <video> and </video> will be displayed in browsers that do not support video. In the example above, if the browser does not support the <video> tag, a download link for the media file is displayed instead.

HTML5 embed tag

The <embed> tag is used for embedding an external application or interactive content (an image, a SWF Flash presentation, a plug-in) into an HTML document.
It can use the following attributes:

• height (height='pixels') - Specifies the height of the embedded content, in pixels.
• width (width='pixels') - Specifies the width of the embedded content, in pixels.
• type (type='MIME_type') - The MIME type of the embedded content.
• src (src='url') - The URL address of the file to embed.

<h4>Example embed SWF file</h4>

<embed src='html/cubilus.swf' width='380' height='320' />

Canvas tag

The <canvas> element can be used to draw graphics using scripting (usually JavaScript), make photo compositions or do simple animations.
Attributes:

• height (height='pixels') - Specifies the height of the canvas, in pixels.
• width (width='pixels') - Specifies the width of the canvas, in pixels.

<h4>Example HTML canvas</h4>

<canvas id='cvs1' width='180' height='100'>This text is displayed if your browser does not support HTML5 Canvas.</canvas>

<script>
var canvas=document.getElementById('cvs1');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#0102fe';
ctx.fillRect(0,0,80,80);
</script>

The text between the <canvas> and </canvas> will be displayed in browsers that do not support canvas.

HTML5 figure tag

The <figure> tag specifies self-contained content, like diagrams, photos, code etc. The content of the <figure> element is related to the main flow, but its position is independent of the main flow, and if removed it should not affect the flow of the page.
The <figure> tag can contain the <figcaption> element, which is used to add a caption for the <figure> element.

<h4>Example figure tag</h4>

<figure>
 <img src='/imgs/webcourses.gif' alt='Logo CoursesWeb.net' width='155' height='50' />
 <figcaption>A logo for coursesweb.net</figcaption>
</figure>

HTML5 hgroup tag

The <hgroup> tag is used to group a set of H1 to H6 elements, when a heading has multiple subheadings.
- Example:

<h4>Example hgroup tag</h4>

<hgroup>
 <h2>Welcome to coursesweb.net</h2>
 <h3>Free courses for Web Development</h3>
</hgroup>
<p>The rest of the content...</p>
</figure>

HTML5 mark tag

The <mark> element defines marked text, it is used if you want to highlight parts of your text.
- Example:

<h4>Example mark tag</h4>

<p>Free corses, and tutorials: <mark>coursesweb.net</mark> for Web Development.</p>

Progress tag

The <progress> element represents the progress of a task. It is usually used in conjunction with JavaScript to display the progress of a task.
It can use the following attributes:

• max (max='nr') - Specifies how much work the task requires in total.
• value (value='nr') - Specifies how much of the task has been completed.

<h4>Example progress tag</h4>

<progress value='33' max='100'></progress>

Ruby tag

The <ruby> element specifies a ruby annotation. Ruby annotations are used for East Asian typography, to show the pronunciation of East Asian characters.
This tag is used together with the <rt> and <rp> tags.
- <rt> - defines an explanation or pronunciation of characters in a ruby annotation.
- <rp> - defines what to show if a browser does not support ruby annotations.

<h4>Example ruby tag</h4>

<ruby>
 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

WBR tag

The <wbr> element (Word Break Opportunity) specifies where in a text it would be ok to add a line-break, means: 'The browser may insert a line break here, if it wishes'. If the browser does not think a line break necessary, nothing happens.
For example, you can use <wbr> to add word break opportunities when a word is too long, or you think the browser will break your lines at the wrong place.

<h4>Example wbr tag</h4>

<p>To create professional Web<wbr>Sites, a Web<wbr>Developer should know HTML and CSS.</p>