Tags
article, autocomplete, challenge, code, controls, datalist, datetime, details, disable, embed, figure, focus, footer, for, form, header, hgroup, html, html5, keygen, label, list, mark, max, media, mediaquery, meter, min, muted, nav, oninput, optimum, option, output, poster, progress, pubdate, query, rp, rt, ruby, sample, script, section, security, source, src, summary, tag, time, track, value, video, w3c, wbr, web
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>© 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>© 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>