Tuesday 24 April 2012

New Tags in Html 5.0 -Part 3


Keygen:

The <keygen> tag is supported in all major browsers, except Internet Explorer.

Note: Safari supports the <keygen> element on Mac only.

The <keygen> tag specifies a key-pair generator field used for forms. This tag acts as captcha.
When the form is submitted, the private key is stored locally, and the public key is sent to the server.
It has has attribute Keytype .Value of this attribute can be rsa,dsa,ec.

<!DOCTYPE html>
<html>
<body>
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
</body>
</html>

Result:



Mark:

The <mark> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

Note: Internet Explorer 8 and earlier versions, do not support the <mark> tag.

The <mark> tag defines marked text.

Use the <mark> tag if you want to highlight parts of your text.

Example:
In this example,word milk is highlighted.
<!DOCTYPE html>
<html>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>
Result:
Do not forget to buy milk today.

Nav:

The <nav> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

Note: Internet Explorer 8 and earlier versions, do not support the <nav> tag.

The <nav> tag defines a section of navigation links.

Not all links of a document must be in a <nav> element. The <nav> element is intended only for major block of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

<html>
<body>
<nav>
<a href="/html/">HTML</a> |
HTML5 |
<a href="/css/">CSS</a> |
<a href="/css3/">CSS3</a> |
<a href="/js/">JavaScript</a>
</nav>
</body>
</html>
Result:

Output:

The <output> tag is supported in all major browsers, except Internet Explorer.
The <output> tag represents the result of a calculation (like one performed by a script).

Example:
Perform a calculation and show the result in an <output> element:
<html>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="a" />
+<input type="number" name="b"/>
=<output name="x" for="a b"></output>
</form>
</body>
</html>

Result:



Progress

The <progress> tag is currently supported in Firefox, Opera, and Chrome.

The <progress> tag represents the progress of a task.

Example:

Downloading in progress:
<html>
<body>
Downloading progress:
<progress value="22" max="100">
</progress>
<p><b>Note:</b> The progress element is currently supported in Firefox, Opera, and Chrome.</p>
</body>
</html>
Result:

Section:

The <section> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

Note: Internet Explorer 8 and earlier versions, do not support the <section> tag.
The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document.

Example

A section in a document, explaining what WWF is:
<!DOCTYPE html>
<html>
<body>
<section>
  <h1>WWF</h1>
  <p> WWF was founded in 1961.</p>
</section>
<section>
  <h1>WWF's Panda symbol</h1>
  <p>The Panda has become the symbol of WWF.</p>
</section>
</body>
</html>
Result:




Time:
The <time> tag is not supported in any of the major browsers.
The <time> tag defines either a time (24 hour clock), or a date in the Gregorian calendar, optionally with a time and a time-zone offset.
This element can be used as a way to encode dates and times in a machine-readable way so that, for example, user agents can offer to add birthday reminders or scheduled events to the user's calendar, and search engines can produce smarter search results.
<!DOCTYPE html>
<html>
<body>
<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime="2008-02-14">Valentines day</time>.</p>
</body>
</html>

Video:

The <video> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

Note: Internet Explorer 8 and earlier versions, do not support the <video> tag.
The <video> tag specifies video, such as a movie clip or other video streams.

Example

Play a video:
<html>
<body>
<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>
</body>
</html>

Wbr:

The <wbr> tag is supported in all major browsers, except Internet Explorer.
The Word Break Opportunity (<wbr>) specifies where in a text it would be ok to add a line-break.

Tip: When a word is too long, or you are afraid that the browser will break your lines at the wrong place, you can use the <wbr> element to add word break opportunities.

<!DOCTYPE html>
<html>
<body>
<p>
To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.
</p>
</body>
</html>
Result:



No comments:

Post a Comment