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.
The <audio> tag can be used to add and play sound, music or other audio streams in webpage.
It can use the following attributes:
<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.<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.
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.
<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.
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:
<h4>Example embed SWF file</h4> <embed src='html/cubilus.swf' width='380' height='320' />
The <canvas> element can be used to draw graphics using scripting (usually JavaScript), make photo compositions or do simple animations.
Attributes:
<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.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>
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>
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>
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:
<h4>Example progress tag</h4> <progress value='33' max='100'></progress>
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>
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>
<ul> <li>http://coursesweb.net/html/</li> <li>http://coursesweb.net/css/</li> </ul>
.some_class {
display: list-item;
}var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net