Tags

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Listed below are some of the tags that are new to HTML, which are not present in HTML4, but are there with HTML5.

<wbr>
Specifies where in a line it is okay to have a line break

example:
Hello, this is a sample text to demonstrate and example of <wbr>Auto<brd> Word Break functionality.

<video>
Specifies any video content in the web page.
Options :
height
width
autoplay
loop
muted
control
poster
src
preload

<track>
Specified the track to be shown with video or audio elements.
Options :
default
kind
src
srclang
label
example:
<video width=”250px” height=”250px” autoplay=”autoplay” controls=”controls” muted=”muted”>
<source src=”video/abc.mp4” type=”video/mp4”>
<track src=”track/subEng.vtt” kind=”subtitle” srclang=”en”>
</video>

<time>
Specifies the value to be time, in 24hr format or a date value.
Options:
datetime
pubdate
example:
Helping at <time>10.00</time> is nice!

<summary>
Specifies the heading for the ‘details’ element. Should be the first in this tag block.
Example:
<details>

<summary>&copy; All rights reserved.</summary>
<p>All rights have been reserved for the patent holder. Do not copy or reproduce any of these sections.</p>
</details>

<source>
Specifies the source of the audio or video to be played.
Options:
src
type
media

<section>
Specifies a section in the document
example:
<section>
<p>This space is reserved for desc on pandas</p>
</section>
<section>
<p>This space is reserved for desc on Lions</p>
</section>

<ruby>
Specifies ruby annotations, east asian characters
<rt>
Specifies the desc or pronunciation of the ruby annotation
<rp>
Specifies what should be shown is a browser does not supports ruby annotation

<progress>
Specifies the progress of a task.
Options
max
value
example:
<progress value=”40” max=”100”>

<output>
Specifies the output of any calculation.
Options:
for
form
name
example :
<form oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>
0 <input type=”range” name=”a” value=”50”> 100 +
<input type=”number” name=”b” value=”50”> =
<output name=”x” for=”a b”></output>
</form>

<nav>
Specifies a block of navigation links.
example:
<nav>
<a>Home</a> |
<a>About</a> |
<a>Contact</a>
</nav>

<meter>
Specifies a scale meassure within a known range, like to show the disk usage, available ram etc. Also know as gauge.
Options:
form
high
low
min
max
value
optimum
example;
<meter value=”2” min=”0” max=”10”>2 out of 10 </meter>
<meter value=”0.6”>60%</meter>

<mark>
Specifies a marked text, for highlighting a section.
example:
<p>This is a sample text to describe the use of <mark>highlighting</mark> in a statement.</p>

<keygen>
Specifies a key-pair  generator field. When the form is generated, the private key is stored locally and the public key is send to server.
Options:
form
autofocus
keytype
disable
challenge
name
example
<form action=”” name=”form1” method=”get”>
Username : <input type=”text” name=”username” >
Password : <input type=”password” name=”passwd”>
Encryption : <keygen name=”security”>
<input type=”submit”>
</form>

<hgroup>
Specifies the group of header elemets.
example:
<hgroup>
<h1>Welcome</h1>
<h2>Sample functionality checking</h2>
<h3>Regards</h3>
</hgroup>

<header>
Specifies the header part to a document or section.
example:
<article>
<header>Title of the Articles goes here !!</header>
<p>This is the body of the article….</p>
</article>

<footer>
Specifies the footer part of a document or section.
example:
<footer>
<p>&copy; Copyright protected 2010.</p>
</footer>

<figure>
Specifies self contained contents, eg: images, illustrations, code listing etc…
example:
<figure>
<img src=”logo.jpg”>
<figcaption>Sample of the figure caption!!</figcaption>
</figure>

<figcaption>
Specifies the caption of a figure.

Specifies  a container for external applications.
Options:
height
src
type
width
example:

<datalist>
Specifies a list of pre-defined list for input element( use list attribute). This is auto-complete by default.

example:
<input list=”browser”>
<datalist id=”browser”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Safari”>
<option value=”IE”>
<option value=”Opera”>
</datalist>

Advertisements