New Tags in HTML5
The internet has changed a lot since HTML 4.01 became a standard in 1999.
Today, some elements in HTML 4.01 are obsolete, never used, or not used the way they were intended to. These elements are removed or re-written in HTML5.
To better handle today's internet use, HTML5 includes new elements for better structure, better form handling, drawing, and for media content.
<article>
Example:
<article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011 at 21:00 PDT.....</p> </article>
<aside>
Example:
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
Example:
<p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside>
<bdi>
Example:
<ul><li>User <bdi>Dz-kabyle</bdi>: 60 points</li></ul>
<keygen>
Example:
<form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form>
<command>
Example:
<menu> <command type="command" label="Save" onclick="save()">Save</command> </menu>
<details>
Example:
<details> <summary>Copyright 1999-2011.</summary> <p> - by Refsnes Data. All Rights Reserved.</p> <p>All content and graphics on this web site are the property of the company Refsnes Data.</p> </details>
<summary>
Example:
<details> <summary>Copyright 1999-2011.</summary> <p> - by Refsnes Data. All Rights Reserved.</p> <p>All content and graphics on this web site are the property of the company Refsnes Data.</p> </details>
<figure>
Example:
<figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> </figure>
<figcaption>
Example:
<figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption> </figure>
<figure>
Example:
<figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> </figure>
<footer>
Example:
<footer> <p>Posted by: Hege Refsnes</p> <p><time pubdate datetime="2012-03-01"></time></p> </footer>
<header>
Example:
<article> <header> <h1>Internet Explorer 9</h1> <p><time pubdate datetime="2011-03-15"></time></p> </header> <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011 at 21:00 PDT.....</p> </article>
<hgroup>
Example:
<hgroup> <h1>Welcome to my WWF</h1> <h2>For a living planet</h2> </hgroup> <p>The rest of the content...</p>
<mark>
Example:
<p>Do not forget to buy <mark>milk</mark> today.</p>
<meter>
Example:
<meter value="2" min="0" max="10">2 out of 10</meter><br> <meter value="0.6">60%</meter>
<nav>
Example:
<nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>
<datalist>
Example:
<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
<progress>
Example:
<progress value="22" max="100"></progress>
<embed>
Example:
<embed src="helloworld.swf">
<output>
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>
<canvas>
Example:
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
<ruby>
Example:
<ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby>
<rt>
Example:
<ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby>
<track>
Example:
<video width="320" height="240" controls="controls"> <source src="forrest_gump.mp4" type="video/mp4"> <source src="forrest_gump.ogg" type="video/ogg"> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> </video>
<rp>
Example:
<ruby>? <rt><rp>(</rp>??`<rp>)</rp></rt></ruby>
<section>
Example:
<section><h1>WWF</h1><p>The World Wide Fund for Nature (WWF) is....</p></section>
<time>
Example:
<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>
<source>
Example:
<audio controls="controls"> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
<audio>
Example:
<audio controls="controls"><source src="horse.ogg" type="audio/ogg">Your browser does not support the audio tag.</audio>
<video>
Example:
<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>
<wbr>
Example:
<p> To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object. </p>
0 commentaires:
Post a Comment