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:


The <audio> element uses the <source> tag to specify the sorce of the audio file, and also alternative audio files which the browser may choose from, based on its media type or codec support.
IE9 and Safari use MP3 file; Firefox, Chrome and Opera use OGG (or OGV) file.
- Example:
<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:


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.

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


Example, embedding a SWF flash game:
<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:


- Example (drawing a blue square):
<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.

For more examples and lot of details about <canvas>, see the tutorial: HTML5 canvas Tutorial.

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.


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


- Example:
<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.


Example:
<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.


Example:
<h4>Example wbr tag</h4>

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

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
HTML5 New Tags

Last accessed pages

  1. PHP getElementById and getElementsByTagName (33801)
  2. querySelector and querySelectorAll (12942)
  3. Star shapes with CSS (5601)
  4. Contact page - CoursesWeb (29988)
  5. Tabs effect with CSS (30646)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1431)
  2. Contact page - CoursesWeb (1402)
  3. Tabs effect with CSS (1395)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (552)
  5. PHP getElementById and getElementsByTagName (422)