<a href="http://html5doctor.com/author/jacko/"> Jack Osborne </a>

The <abbr title="Web Hypertext Application Technology Working Group"> WHATWG </abbr> started working on HTML5 in 2004.

<img src="floorplan.png" usemap="#rooms" alt="1 bedroom, a kitchen, lounge and bathroom"> <map name="rooms"> <area shape="rect" coords="20,20,140,140" href="bedroom.html" alt="Bedroom"> <area shape="rect" coords="20,140,140,280" href="lounge.html" alt="Lounge"> <area shape="poly" coords="140,140,140,280,280,140" href="kitchen.html" alt="Kitchen"> <area shape="rect" coords="140,20,280,140" href="bathroom.html" alt="Bathroom"> </map>

<article> <header> <h4><a href="#comment-2" rel="bookmark">Comment #2</a> by <a href="http://example.com/">Jack Osborne</a></h4> <time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time> </header> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p> </article>

<aside> <h2>Blogroll</h2> <ul> <li><a href="#">My Friend</a></li> <li><a href="#">My Other Friend</a></li> <li><a href="#">My Best Friend</a></li> </ul> </aside>

<audio src="music.oga" controls> <a href="music.oga">Download song</a> </audio>

<b class="character">Deckard</b> : <i class="voiceover">The report would be routine retirement of a replicant which didn't make me feel any better about shooting a woman in the back. There it was again. Feeling, in myself. For her, for Rachael.</i>

<head> <title>The Company</title> <base href="http://www.example.com/"> </head>

<ul> <li> <bdi> johnsmith </bdi> joined the site</li> <li> <bdi> the_guru </bdi> posted "February update"</li> <li> <bdi> ???? </bdi> commented on "Getting started with HTML5"</li> </ul>

<p> <bdo dir="rtl"> Don't cheat by reading this in a mirror! </bdo> </p>

<blockquote>

What we have here is a quotation from another source </blockquote>

<body id="index"> <p>content</p> </body>

<br />

<button> Do something! </button>

<canvas id="myCanvas" width="300" height="150"> Fallback content, in case the browser does not support Canvas. </canvas>

<table>

<caption> Animals on our farm </caption> <colgroup> <col class="column1" /> <col class="column2" /> <col class="column3-4" span="2" /> </colgroup> <tr> <th>dog</th> <th>cat</th> <th>horse</th> <th>iguana</th> </tr> <tr> <td>5</td> <td>2</td> <td>10</td> <td>500</td> </tr> ... </table>

My favourite book is <cite> Introducing HTML5 </cite> by Bruce and Remy

To get started with HTML5 you just need at this top of your page <code> <!DOCTYPE html> </code>

<table> <colgroup> <col class="column1" /> <col class="column2" /> <col class="column3-4" span="2" /> </colgroup> <tr> <th>dog</th> <th>cat</th> <th>horse</th> <th>iguana</th> </tr> <tr> <td>5</td> <td>2</td> <td>10</td> <td>500</td> </tr> ... </table>

<table> <colgroup> <col class="column1" /> <col class="column2" /> <col class="column3-4" span="2" /> </colgroup> <tr> <th>dog</th> <th>cat</th> <th>horse</th> <th>iguana</th> </tr> <tr> <td>5</td> <td>2</td> <td>10</td> <td>500</td> </tr> ... </table>

<menu type="toolbar">

<command type="radio" radiogroup="alignment" checked="checked" label="Left" icon="left.png" onclick="setAlign('left')" /> </menu>

<label>Your favourite fruit: <input type="text" name="fruit" list="fruits"> <datalist id="fruits"> <option value="Blackberry">Blackberry</option> <option value="Blackcurrant">Blackcurrant</option> <option value="Blueberry">Blueberry</option> <!-- … --> </datalist> </label>

<dl> <dt>address</dt> <dd>The address element represents the contact information for the section it applies to. If it applies to the body element, then it instead applies to the document as a whole. </dd> <dt>article</dt> <dd>The article element represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.</dd> </dl>

<p>My favourite colour is <del datetime="2010-10-11T01:25-07:00">blue</del> <ins datetime="2010-10-11T01:25-07:01">red</ins>, but I also like green and yellow.</p>

<details> <summary>Name & Extension:</summary> <p><input type=text name=fn value="Pillar Magazine.pdf"></p> <p><label><input type=checkbox name=ext checked> Hide extension</label></p> </details>

<p>While they're essential reading material for our job, the <dfn> <abbr title="World Wide Web Consortium">W3C</abbr> </dfn> specifications are not exactly George R. R. Martin-level reading material.</p>

<div> <p>content</p> </div>

<dl> <dt>address</dt> <dd>The address element represents the contact information for the section it applies to. If it applies to the body element, then it instead applies to the document as a whole.</dd> <dt>article</dt> <dd>The article element represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.</dd> </dl>

<dl> <dt>address</dt> <dd>The address element represents the contact information for the section it applies to. If it applies to the body element, then it instead applies to the document as a whole. </dd> <dt>article</dt> <dd>The article element represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.</dd> </dl>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Doctor | Element Index</title> <link rel="stylesheet" href="style.css" /> </head> <body id="home"> <p>content</p> </body> </html>

Call a doctor <em>now</em>

<embed src="movieclip.mov">

<form id="app-login" action="process.php"> <fieldset> <legend>Login Details</legend> <div> <label for="user-name">Username:</label> <input name="user-name" type="email" placeholder="Your username is your email address" required autofocus> </div> <div> <label for="password">Password:</label> <input name="password" type="password" placeholder="6 digits, a combination of numbers and letters" required> </div> <div> <input name="login" type="submit" value="Login"> </div> </fieldset> </form>

<figure> <img ... > (or video, table etc) <figcaption> A rabid unicorn goring a fairy. </figcaption> </figure>

<figure> <img ... > (or video, table etc) <figcaption>A rabid unicorn goring a fairy.</figcaption> </figure>

<form id="app-login" action="process.php"> <fieldset> <legend>Login Details</legend> <div> <label for="user-name">Username:</label> <input name="user-name" type="email" placeholder="Your username is your email address" required autofocus> </div> <div> <label for="password">Password:</label> <input name="password" type="password" placeholder="6 digits, a combination of numbers and letters" required> </div> <div> <input name="login" type="submit" value="Login"> </div> </fieldset> </form>

<h(n)> Heading Title </h(n)>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Doctor | Element Index</title> <link rel="stylesheet" type="text/css" href="media/css/style.css" /> </head> <body id="home"> <p> content </p> </body> </html>

<header> <h1>HTML5Doctor.com</h1> </header>

<hgroup> <h1>HTML5Doctor.com</h1> <h2>helping you implement HTML5 today</h2> </hgroup>

<p>Lorem Ipsum dolor set amet</p> <hr /> <p>Lorem Ipsum dolor set amet</p>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Doctor | Element Index</title> <link rel="stylesheet" type="text/css" href="media/css/style.css" /> </head> <body id="home"> <p> content </p> </body> </html>

The term <i>prose content</i> is defined above. <i class="taxonomy">Nanotyrannus</i> ("dwarf tyrant") is a genus of tyrannosaurid dinosaur, and is possibly a juvenile specimen of <i class="taxonomy">Tyrannosaurus</i> . We ate <i lang="ja-latn" title="eel">unagi</i> , <i lang="ja-latn" title="seared salmon">aburi-zake</i> , and <i lang="ja-latn" title="octopus">tako</i> sushi last night.

<iframe height="500" width="500" src="http://google.com"></iframe>

<img src="logo.gif" alt="HTML5 Doctor Logo" />

<form id="app-login" action="process.php"> <fieldset> <legend>Login Details</legend> <div> <label for="user-name">Username:</label> <input name="user-name" type="email" placeholder="Your username is your email address" required autofocus> </div> <div> <label for="password">Password:</label> <input name="password" type="password" placeholder="6 digits, a combination of numbers and letters" required> </div> <div> <input name="login" type="submit" value="Login"> </div> </fieldset> </form>

<p>My favourite colour is <del datetime="2010-10-11T01:25-07:00">blue</del> <ins datetime="2010-10-11T01:25-07:01">red</ins> , but I also like green and yellow.</p>

<p>Mac users: To take a screenshot press <kbd> <kbd> Command </kbd> + <kbd> Shift </kbd> + <kbd> 3 </kbd> </kbd> </p>

<form action="/submit_key.php" method="post" enctype="multipart/form-data"> <keygen name="key"> <input type="submit" value="Submit"> </form>

<form id="app-login" action="process.php"> <fieldset> <legend>Login Details</legend> <div> <label for="un">Username:</label> <input name="user-name" id="un" type="email" placeholder="Your username is your email address" required autofocus> </div> <div> <label for="pass">Password:</label> <input name="password" id="pass" type="password" placeholder="6 digits, a combination of numbers and letters" required> </div> <div> <input name="login" type="submit" value="Login"> </div> </fieldset> </form>

<form id="app-login" action="process.php"> <fieldset> <legend>Login Details</legend> <div> <label for="user-name">Username:</label> <input name="user-name" type="email" placeholder="Your username is your email address" required autofocus> </div> <div> <label for="password">Password:</label> <input name="password" type="password" placeholder="6 digits, a combination of numbers and letters" required> </div> <div> <input name="login" type="submit" value="Login"> </div> </fieldset> </form>

<ol> <li>Ordered List Item One</li> <li>Ordered List Item Two</li> </ol>

<!DOCTYPE html> <html lang="en_UK"> <head> <meta charset="UTF-8"> <title>My Super Page</title> <meta name="robots" content="index,follow" /> <link rel="stylesheet" href="css/style.css"> </head>

<!-- other content --> <main role="main"> <h1>Skateboards</h1> <p>The skateboard is the way cool kids get around</p> <article> <h2>Longboards</h2> <p>Longboards are a type of skateboard with a longer wheelbase and larger, softer wheels.</p> <p>... </p> </article> <article> <h2>Electric Skateboards</h2> <p>These no longer require the propelling of the skateboard by means of the feet; rather an electric motor propels the board, fed by an electric battery.</p> <p>... </p> </article> </main> <!-- other content -->

<section> <h1>Clothing</h1> <img src="/images/menu.gif" alt="Select a department to go to its page." usemap="#nav"> </section> ... <footer> <map name="nav"> <p><a href="/women/">Women</a> <area alt="Women" coords="0,0,100,50" href="/women/"> | <a href="/men/">Men</a> <area ALT="Men" coords="0,0,100,50" href="/men/"> | <A HREF="/kids/">Kids</A> <area alt="Food" coords="0,0,100,50" href="/kids/"> | </p> </map> </footer>

In this sentence we'll be using the mark element. <mark> HTML5 </mark> Can you see where it has been used?

<menu type="toolbar"> <command type="command" disabled label="Save" icon="icons/save.png" onclick="save()"> <command type="command" disabled label="Publish" icon="icons/pub.png" onclick="publish()"> </menu>

<!DOCTYPE html> <html lang="en_UK"> <head> <meta charset="UTF-8"> <title>My Super Page</title> <meta name="robots" content="index,follow" /> <link rel="stylesheet" href="css/style.css"> </head>

Your score is: <meter> 2 out of 10 </meter>

<nav> <ul> <li>Nav Link</li> <li>Nav Link</li> <li>Nav Link</li> </ul> </nav>

<noscript> Oh no, you either have JavaScript turned off or your browser doesn't support JavaScript </noscript>

<noscript> <link rel="stylesheet" href="no-js.css" /> </noscript>

<object> <param name="movie" value="http://www.youtube.com/v/XZ5TajZYW6Y?fs=1&hl=en_GB"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/XZ5TajZYW6Y?fs=1&hl=en_GB" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="390"></embed> </object>

<ol> <li>Ordered List Item One</li> <li>Ordered List Item One</li> </ol>

<label for="country">Country</label> <select name="country" id="country"> <optgroup label="Europe"> <option value="UK">UK</option> <option value="Germany">Germany</option> <option value="France">France</option> </optgroup> <optgroup label="North America"> <option value="">USA</option> <option value="">Canada</option> </optgroup> </select>

<label for="country">Country</label> <select name="country" id="country"> <optgroup label="Europe"> <option value="UK">UK</option> <option value="Germany">Germany</option> <option value="France">France</option> </optgroup> <optgroup label="North America"> <option value="">USA</option> <option value="">Canada</option> </optgroup> </select>

<form> <label for="flying">Flying Skill Level</label> <input name="flying-level" id="flying" type="range" min="0" max="250"> <output for="flying" onforminput="value = flying.valueAsNumber">0</output> </form>

<p>This is an example of the p tag.</p>

<object> <param name="movie" value="http://www.youtube.com/v/XZ5TajZYW6Y?fs=1&hl=en_GB"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/XZ5TajZYW6Y?fs=1&hl=en_GB" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="390"></embed> </object>

<p>The code for a basic JavaScript message is:</p>

<pre>

<script>

alert("hello world");

</script> </pre>

<section> <p>Progress: <progress> <span id="p">0</span>% </progress> </p> <script> var progressBar = document.getElementById('p'); function updateProgress(newValue) { progressBar.textContent = newValue; } </script> </section>

<p>And then he said <q> I heart HTML5 </q> </p>

<ruby>?? <rp>(</rp> <rt>????</rt> <rp>)</rp> ??? <rp>(</rp> <rt>?????</rt> <rp>)</rp> </ruby>

<ruby>??<rp>(</rp> <rt>????</rt> <rp>)</rp>???<rp>(</rp> <rt>?????</rt> <rp>)</rp></ruby>

<ruby> ??<rp>(</rp><rt>????</rt><rp>)</rp>???<rp>(</rp><rt>?????</rt><rp>)</rp> </ruby>

<p>Sale on now!</p> <p> <s>Get up to 25% off</s> </p> <p><strong>Now down to 50% off</strong></p>

<pre> <samp> mike:mysite mike$ <kbd>git status</kbd> # On branch master nothing to commit (working directory clean) mike:mysite mike$ </samp> </pre>

<script> alert('Hello World!'); </script>

<section> <h1>Level 1</h1> <section> <h1>Level 2</h1> <section> <h1>Level 3</h1> </section> </section> </section>

<label for="title">Title</label> <select id="title" name="title"> <option value="" selected>Please choose</option> <option value="Mr">Mr</option> <option value="Miss">Miss</option> <option value="Mrs">Mrs</option> <option value="Ms">Ms</option> <option value="Dr">Dr</option> <option value="Other">Other</option> </select>

<footer> <address> For more details, contact <a href="mailto:hello@html5doctor.com">HTML5 Doctor</a>. </address> <small> © copyright HTML5 Doctor. </small> </footer>

<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogg" type="video/ogg"> </video>

<span> This is an example of the span element </span>

<strong>Warning</strong> . This dungeon is dangerous. <strong>Avoid the ducks.</strong> Take any gold you find.

<style> article { width:640px; margin-bottom:10px; } </style>

H <sub>2</sub> O is the chemical formula for water

<details> <summary> More information </summary> <p>Here is the source data that is discussed in the article ...</p> </details>

Today is the 2 <sup>nd</sup> of May

<table> <tr> <th scope="col">dog</th> <th scope="col">cat</th> <th scope="col">horse</th> <th scope="col">iguana</th> </tr> <tr> <td>5</td> <td>2</td> <td>10</td> <td>500</td> </tr> ... </table>

<table> <thead> <tr> <th scope="col">Header 1</th> <th scope="col">Header 2</th> <th scope="col">Header 3</th> </tr> </thead> <tfoot> <tr> <td>Footer 1</td> <td>Footer 2</td> <td>Footer 3</td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> </tr> ... </tbody> </table>

<table> <tr> <th scope="col">dog</th> <th scope="col">cat</th> <th scope="col">horse</th> <th scope="col">iguana</th> </tr> <tr> <td>5</td> <td>2</td> <td>10</td> <td>500</td> </tr> ... </table>

<form action="process.php"> <fieldset> <legend>Contact us</legend> <div> <label for="name">Name:</label> <input name="name" type="text" required> </div> <div> <label for="email">Email:</label> <input name="email" type="email" required> </div> <div> <label for="message">Message:</label> <textarea cols="50" rows="10"></textarea> </div> <div> <input name="send" type="submit" value="Send"> </div> </fieldset> </form>

<table> <tr> <th scope="col">dog</th> <th scope="col">cat</th> <th scope="col">horse</th> <th scope="col">iguana</th> </tr> <tr> <td>5</td> <td>2</td> <td>10</td> <td>500</td> </tr> ... </table>

<table> <thead> <tr> <th scope="col">Header 1</th> <th scope="col">Header 2</th> <th scope="col">Header 3</th> </tr> </thead> <tfoot> <tr> <td>Footer 1</td> <td>Footer 2</td> <td>Footer 3</td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> </tr> ... </tbody> </table>

<time datetime="2007-08-29T13:58Z"> August 29th, 2007 at 13:58 </time>

<!DOCTYPE html> <html lang="en_UK"> <head> <meta charset="UTF-8"> <title>My Super Page</title> <meta name="robots" content="index,follow" /> <link rel="stylesheet" href="css/style.css"> </head>

<table> <tr> <th scope="col">dog</th> <th scope="col">cat</th> <th scope="col">horse</th> <th scope="col">iguana</th> </tr> <tr> <td>5</td> <td>2</td> <td>10</td> <td>500</td> </tr> ... </table>

<video src="movie.webm"> <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English"> </video >

<span itemscope itemtype="http://schema.org/Person" lang="ja-latn"> <u itemprop="familyName"> Son </u> <span itemprop="givenName">Goku</span> </span>

<ul> <li>Unordered List Item One</li> <li>Unordered List Item One</li> </ul>

<p> <var> E </var> energy is equal to <var> m </var> mass multiplied by the <var> c </var> speed of light, squared.</p>

<video src="video.ogv" controls poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download song</a> </video>