.png)
About HTML5 new tags
After several
years of experience with HTML 4 and XHTML, HTML5 came with new tags for better structure, better form
handling, drawing, and for media content.
Many of the new HTML5 elements are not yet suported by all major browsers, but gradually, they implement the new features added in HTML5.
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.
Many of the new HTML5 elements are not yet suported by all major browsers, but gradually, they implement the new features added in HTML5.
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.
· WBR tag
HTML5
audio tag
The <audio> tag defines sound, such as music or
other audio streams.
It can use the following attributes:
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).
("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.
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:
IE9 and Safari use MP3 file; Firefox, Chrome and Opera use OGG (or OGV) file.
- Example:
<audio controls="controls">
<source src="audio_file.ogg" type="audio/ogg" />
<source src="audio_file.mp3" type="audio/mp3" />
Your browser does not support the audio tag, <a href="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.
Result:
Result:
HTML5
video tag
The <video> tag is a multimedia element used to
play movie clip or other video streams in the webpage.
The HTML5 <video> tag accepts attributes that specify how the video should be played:
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).
("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.
- Example:
IE9 and Safari use MP4 file; Firefox, Chrome and Opera use OGG (or OGV) file.
- Example:
<video controls="controls"width="200" height="150">
<source src="video/video_file.mp4" type="video/mp4" />
<source src="video/video_file.ogg" type="video/ogg" />
Video not playing? <a href="video/video_file.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.
Result:
Result:
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:
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.
Example:
<embed src="flash_game.swf" width="150" height="150" />
Result:
Canvas
tag
The <canvas> element can be used to draw graphics
using scripting (usually JavaScript), make photo compositions or do simple
animations.
Attributes:
Attributes:
·
height (height="pixels")
- Specifies the height of the canvas, in pixels.
·
width (width="pixels")
- Specifies the width of the canvas, in pixels.
- Example
(drawing a blue square):
<canvas id="cvs1" width="88" height="88">This text is displayed if your browser does not support HTML5 Canvas.</canvas>
<script type="text/javascript">
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.
Result:
Result:
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:
The <figure> tag can contain the <figcaption> element, which is used to add a caption for the <figure> element.
- Example:
<figure>
<img src="coursesweb.jpg" alt="Logo CoursesWeb.net" width="200" height="100" />
<figcaption>A logo for coursesweb.net</figcaption>
</figure>
Result:
HTML5
hgroup tag
The <hgroup> tag is used to group a set of H1 to H6
elements, when a heading has multiple subheadings.
- Example:
- Example:
<hgroup>
<h2>Welcome to coursesweb.net</h2>
<h3>Free courses for Web Development</h3>
</hgroup>
<p>The rest of the content...</p>
HTML5
mark tag
The <mark> element defines marked text, it is used
if you want to highlight parts of your text.
- Example:
- Example:
<p>Free corses, and tutorials: <mark>coursesweb.net</mark> for Web Development.</p>
Result:
Free corses, and
tutorials: coursesweb.net for Web Development.
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:
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.
- Example:
<progress value="33" max="100"></progress>
Result:
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:
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:
<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 are afraid that the browser will break your lines at the wrong place.
Example:
For example, you can use <wbr> to add word break opportunities when a word is too long, or you are afraid that the browser will break your lines at the wrong place.
Example:
<p>To create professional Web<wbr>Sites, a Web<wbr>Developer should know HTML and CSS.</p>
0 comments: