pdewouters · February 9, 2012 22:40
diff --git a/html5-elements.html b/html5-elements.html
 <!DOCTYPE HTML>
 <html lang="en-US">
 <head>
 	<meta charset="UTF-8">
 	<title>HTML5 elements test</title>
 </head>
 <body>

 	
 	<header>
 		<hgroup>
 			<h1>H1 inside an hgroup inside a header</h1>

 			<h2>H2 inside an hgroup inside a header</h2>
 		</hgroup>
 		<nav>
 			<ul>
 				<li><a href="#">Main navigation item</a></li>
 				<li><a href="#">Main navigation item</a></li>
 				<li><a href="#">Main navigation item</a></li>

 				<li><a href="#">Main navigation item</a></li>
 				<li><a href="#">Main navigation item</a></li>
 			</ul>
 		</nav>		
 	</header>
 	
 	<h1>Heading level 1</h1>
 	<h2>Heading level 2</h2>

 	<h3>Heading level 3</h3>
 	<h4>Heading level 4</h4>
 	<h5>Heading level 5</h5>
 	<h6>Heading level 5</h6>
 	
 	<section>
 		<header>
 			<h1>Heading level 1 inside a section</h1>

 		</header>
 		<p>"Why, I guess so," Dorothy answered.  "It would be as easy as to give the Scarecrow brains."</p>

 		<p>"True," the Tin Woodman returned.  "So, if you will allow me to join your party, I will also go to the Emerald City and ask Oz to help me."</p>

 		<p>"Come along," said the Scarecrow heartily, and <mark>Dorothy</mark> added that she would be pleased to have his company.  So the Tin Woodman shouldered his axe and they all passed through the forest until they came to the road that was paved with yellow brick.</p>

 		<p>The Tin Woodman had asked Dorothy to put the oil-can in her basket. "For," he said, "if I should get caught in the rain, and rust again, I would need the oil-can badly."</p>

 		<p>It was a bit of good luck to have their new comrade join the party, for soon after they had begun their journey again they came to a place where the trees and branches grew so thick over the road that the travelers could not pass.  But the Tin Woodman set to work with his axe and chopped so well that soon he cleared a passage for the entire party.</p>
 		<p><b>This element is styled with the b tag</b></p>
 		<p><strong>This element is styled with the strong tag</strong></p>
 		<p><i>This element is styled with the i tag</i></p>
 		<p><em>This element is styled with the em tag</em></p>

 		<p>Your progress is <progress>60%</progress> complete</p>
 		<section id="skills">
 		<h3>skillset</h3>
 		<p><abbr title="HyperText Markup Language">HTML</abbr>/<abbr title="cascading stylesheets">CSS</abbr>: <meter class="ir" min="0" max="5" value="4">4 out of 5</meter></p>

 		<p>adobe photoshop: <meter class="ir" min="0" max="5" value="3">3 out of 5</meter></p>
 		<p>javascript: <meter class="ir" min="0" max="5" value="3">3 out of 5</meter></p>
 		<p>web standards: <meter class="ir" min="0" max="5" value="4">4 out of 5</meter></p>
 		<p>mobile development: <meter class="ir" min="0" max="5" value="3">3 out of 5</meter></p>
 		</section>

 		<p>Dorothy was thinking so earnestly as they walked along that she did not notice when the Scarecrow stumbled into a hole and rolled over to the side of the road.  Indeed he was obliged to call to her to help him up again.</p>
 		<blockquote>
 			Thou look'st like antichrist, in that lewd hat.
 			<footer>Ananias <cite>Scene 4.3, <a href="http://www.gutenberg.org/files/4081/4081-h/4081-h.htm">The Alchemist</a></cite> (Ben Johnson)</footer>
 		</blockquote>

 		<footer>Footer of a section element</footer>

 	</section>
 	
 	<aticle>
 		<header>
 			<h2>Article heading level 2</h2>
 			<time datetime="29-09-2009" pubdate>29 September 2009</time>
 		</header>
 		<p>"Why, I guess so," Dorothy answered.  "It would be as easy as to give the Scarecrow brains."</p>

 		<p>"True," the Tin Woodman returned.  "So, if you will allow me to join your party, I will also go to the Emerald City and ask Oz to help me."</p>

 		<p>"Come along," said the Scarecrow heartily, and Dorothy added that she would be pleased to have his company.  So the Tin Woodman shouldered his axe and they all passed through the forest until they came to the road that was paved with yellow brick.</p>

 		<p>The Tin Woodman had asked Dorothy to put the oil-can in her basket. "For," he said, "if I should get caught in the rain, and rust again, I would need the oil-can badly."</p>
 		<footer>
 			<p>Posted in <a href="#">Books category</a></p>

 			<address>author@mail.com</address>
 		</footer>
 		
 		<article>
 			<header>
 				Comement from <a href="http://remysharp.com">Remy Sharp</a> at <time datetime="2010-05-02T20:45Z">10.45 on 2 May 2010</time>
 			</header>

 			<p>Sorry mate. Am washing my hair.</p>
 		</article><!-- comment -->

 		<article>
 			<header>
 				Comement from <a href="http://remysharp.com">Remy Sharp</a> at <time datetime="2010-05-02T20:45Z">10.45 on 2 May 2010</time>

 			</header>
 			<p>Sorry mate. Am washing my hair.</p>
 		</article><!-- comment -->
 		
 		<article>
 			<header>
 				Comement from <a href="http://remysharp.com">Remy Sharp</a> at <time datetime="2010-05-02T20:45Z">10.45 on 2 May 2010</time>

 			</header>
 			<p>Sorry mate. Am washing my hair.</p>
 		</article><!-- comment -->
 	</article>
 	
 	<aside>
 		<article>
 			<h3>Header level 3 in Aside</h3>
 			<p>"Why, I guess so," Dorothy answered.  "It would be as easy as to give the Scarecrow brains."</p>

 			<p>"True," the Tin Woodman returned.  "So, if you will allow me to join your party, I will also go to the Emerald City and ask Oz to help me."</p>

 			<p>"Come along," said the Scarecrow heartily, and Dorothy added that she would be pleased to have his company.  So the Tin Woodman shouldered his axe and they all passed through the forest until they came to the road that was paved with yellow brick.</p>
 		</article>
 	</aside>
 	
 	<!-- you probably want to define it as a block level element -->
 	<a href="http://mattwilcox.net/sandbox/html5-block-anchor/test.html">
 	  <h3>This is a heading inside a block level anchor</h3>

 	  <p>This is a paragraph</p>
 	  this is 'naked' text
 	</a>
 	
 	<figure>
 		<image src="http://i.min.us/i9tjM.jpg" alt="you can describe the image here"/>
 		<figcaption>You can add a caption for the image here <small>&copy; Author name</small></figcaption>
 	</figure>

 	
 	<section>
 		<h2>Media content types</h2>
 		<section>
 			<h3>Canvas</h3>
 			<canvas width="360" height="480">
 				<p>Fallback for unsupported browwsers</p>
 				<img src="http://i.min.us/icUWG2.jpg" alt="paint canvas" />

 			</canvas>
 		</section>
 		<section>
 			<h3>Audio</h3>
 			<audio controls>
 				<source src="http://sideradesign.com/music/danosongs.com-theowlnamedorion.ogg" type="audio/ogg" >
 				<source src="http://sideradesign.com/music/danosongs.com-theowlnamedorion.mp3" type="audio/mp3" >
 				<p>Fallback content</p>

 			</audio>
 		</section>
 		<section>
 			<h3>Video</h3>
 			<!-- http://diveintohtml5.org/video.html -->
 			<video id="movie" width="320" height="240" preload controls> 
 				<source src="pr6.mp4" /> 
 				<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' /> 
 				<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' /> 
 				<object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf">  
 					<param name="movie" value="flowplayer-3.2.1.swf" />  <param name="allowfullscreen" value="true" />  
 					<param name="flashvars" value='config={"clip": {"url": "http://wearehugh.com/dih5/good/bbb_480p.mp4", "autoPlay":false, "autoBuffering":true}}' />  
 					<p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p>  
 				</object> 
 			</video> 
 			<script> //var v = document.getElementById("movie"); v.onclick = function() { if (v.paused) { v.play(); } else { v.pause(); } }); </script>

 		<section>
 		
 		<section>
 			<h3>Form</h3>
 			<!-- http://diveintohtml5.org/forms.html -->
 			<form> 
 				<fieldset>
 				<legend>A form with everything in it</legend>
 				<div><label for="">Input with placeholder</label><input name="q" placeholder="Search Bookmarks and History"></div>

 				<div><label for="">Input with autofocus</label><input name="q" autofocus></div>
 				<div><label for="">required input</label><input id="q" required></div>
 				<div><label for="">Input for email</label><input type="email"></div>
 				<div><label for="">Input for URL</label><input type="url"></div>
 				<div><label for="">Input for number</label><input type="number" min="0" max="10" step="2" value="6"></div>		
 				<div><label for="">Input for range</label><input type="range" min="0" max="10" step="2" value="6"></div>		
 				<div><label for="">Input for date</label> <input type="date"></div>		
 				<div><label for="">Input for tel</label> <input type="tel"></div>		
 				<div><label for="">Input for color</label> <input type="color"></div>

 				<div><label for="">Label for a textarea</label><textarea></textarea></div>				
 				<div>
 					<label for="">Input for datalist</label>
 					<datalist id="">
 						<option label=Mr value=Mr>
 						<option label=Ms value=Ms>
 						<option label=Prof value="Mad Professor">
 					</datalist>

 				</div>
 				<input type="submit" value="Submit">
 				</fieldset>
 			</form>
 		</section>
 		
 		<section>
 			<h3>Tables</h3>
 			<table>

 				<caption>Company data</caption>
 				<thead>
 					<tr>
 						<th id="name">Company name</th>
 						<th id="employees">Number of employees</th>
 						<th id="founded">Year founded</th>
 					</tr>

 				</thead>
 				<tbody>
 				<tr>
 					<th id="acme" headers="name">ACME Inc</th>
 					<td headers="acme employees">1000</td>
 					<td headers="acme founded">1947</td>
 				</tr>

 				<tr>
 					<th id="xyz" headers="name">XYZ Corp</th>
 					<td headers="xyz employees">2000</td>
 					<td headers="xyz founded">1973</td>
 				</tr>
 				</tbody>
 				<tfoot>this is a footer</tfoot>

 			</table>
 		</section>
 	</section>
 	
 	<section>
 		<h2>Lists</h2>
 		<ol start="5">
 			<li>Ordered list item</li>
 			<li>Ordered list item</li>

 			<li>Ordered list item</li>
 			<li>Ordered list item
 				<ol>
 					<li>Orderd list sub item</li>
 					<li>Orderd list sub item</li>
 					<li>Orderd list sub item</li>
 					<li>Orderd list sub item</li>

 				</ol>
 			</li>
 			<li>Ordered list item</li>
 			<li>Ordered list item</li>
 		</ol>

 		<ul start="5">
 			<li>unOrdered list item</li>

 			<li>unOrdered list item</li>
 			<li>unOrdered list item</li>
 			<li>unOrdered list item
 				<ul>
 					<li>unOrderd list sub item</li>
 					<li>unuOrderd list sub item</li>
 					<li>unOrderd list sub item</li>

 					<li>unOrderd list sub item</li>
 				</ul>
 			</li>
 			<li>unOrdered list item</li>
 			<li>unOrdered list item</li>
 		</ul>		
 		
 		<h4>A definition list</h4>

 		<dl>
 			<dt>HTML5 for Web Designers</dt>
 			<dd>Jeremy Keith</dd>
 			
 			<dt>Introducing HTML5</dt>
 			<dd>Remy Sharp and Bruces Lawson</dd>
 			
 			<dt>HTML5 Up and Running</dt>

 			<dd>Mark Pilgrim</dd>
 			
 		</dl>
 		<small>Disclaimer : Content is under creative commons licence</small>
 	</section>
 	
 	<section>
 		<h2>More elements</h2>
 			<p>this is a paragraph with <span>a span</span></p>

 <iframe title="YouTube video player" class="youtube-player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/R9DCafQqHJA" frameborder="0"></iframe>
 			
 <pre>
 Text in a pre element
 is displayed in a fixed-width
 font, and it preserves
 both      spaces and
 line breaks
 </pre>
 <code>Computer code text</code>
 <p>"Calling red scarlet," Hare-Lip sneered, then <del>returned</del> to the attack on  Granser. "My dad told me, an' he got it from his dad afore he croaked,  that your wife was a Santa Rosan, an' that she was sure no account. He  said she was a hash-slinger before the Red Death, though I don't know  what a hash-slinger is. You can tell me, Edwin."</p>

 <dfn>Definition term</dfn>

 <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
 <kbd>Keyboard text</kbd>
 <q>
 Here is a short quotation here is a short quotation
 </q>
 <samp>Sample computer code text</samp>
 <p>This text contains <sub>subscript</sub> text.</p>

 <p>This text contains <sup>superscript</sup> text.</p>
 <var>Variable</var>


 <details>
 <summary>Photo details</summary>
 <p>Taken on <time datetime="2009-12-25">Xmas day 09</time></p>
 <p><small>Copyright Pete, <address>pete@mail.com</address></small>

 </details>

 	</section>
 	<footer>
 	<p><a href="http://sideradesign.com">Sidera Design 2010</a></p>
 	</footer>
 </body>
 </html>
	<!DOCTYPE HTML>
	<html lang="en-US">
	<head>
	<meta charset="UTF-8">
	<title>HTML5 elements test</title>
	</head>
	<body>


	<header>
	<hgroup>
	<h1>H1 inside an hgroup inside a header</h1>

	<h2>H2 inside an hgroup inside a header</h2>
	</hgroup>
	<nav>
	<ul>
	<li><a href="#">Main navigation item</a></li>
	<li><a href="#">Main navigation item</a></li>
	<li><a href="#">Main navigation item</a></li>

	<li><a href="#">Main navigation item</a></li>
	<li><a href="#">Main navigation item</a></li>
	</ul>
	</nav>
	</header>

	<h1>Heading level 1</h1>
	<h2>Heading level 2</h2>

	<h3>Heading level 3</h3>
	<h4>Heading level 4</h4>
	<h5>Heading level 5</h5>
	<h6>Heading level 5</h6>

	<section>
	<header>
	<h1>Heading level 1 inside a section</h1>

	</header>
	<p>"Why, I guess so," Dorothy answered. "It would be as easy as to give the Scarecrow brains."</p>

	<p>"True," the Tin Woodman returned. "So, if you will allow me to join your party, I will also go to the Emerald City and ask Oz to help me."</p>

	<p>"Come along," said the Scarecrow heartily, and <mark>Dorothy</mark> added that she would be pleased to have his company. So the Tin Woodman shouldered his axe and they all passed through the forest until they came to the road that was paved with yellow brick.</p>

	<p>The Tin Woodman had asked Dorothy to put the oil-can in her basket. "For," he said, "if I should get caught in the rain, and rust again, I would need the oil-can badly."</p>

	<p>It was a bit of good luck to have their new comrade join the party, for soon after they had begun their journey again they came to a place where the trees and branches grew so thick over the road that the travelers could not pass. But the Tin Woodman set to work with his axe and chopped so well that soon he cleared a passage for the entire party.</p>
	<p><b>This element is styled with the b tag</b></p>
	<p><strong>This element is styled with the strong tag</strong></p>
	<p><i>This element is styled with the i tag</i></p>
	<p><em>This element is styled with the em tag</em></p>

	<p>Your progress is <progress>60%</progress> complete</p>
	<section id="skills">
	<h3>skillset</h3>
	<p><abbr title="HyperText Markup Language">HTML</abbr>/<abbr title="cascading stylesheets">CSS</abbr>: <meter class="ir" min="0" max="5" value="4">4 out of 5</meter></p>

	<p>adobe photoshop: <meter class="ir" min="0" max="5" value="3">3 out of 5</meter></p>
	<p>javascript: <meter class="ir" min="0" max="5" value="3">3 out of 5</meter></p>
	<p>web standards: <meter class="ir" min="0" max="5" value="4">4 out of 5</meter></p>
	<p>mobile development: <meter class="ir" min="0" max="5" value="3">3 out of 5</meter></p>
	</section>

	<p>Dorothy was thinking so earnestly as they walked along that she did not notice when the Scarecrow stumbled into a hole and rolled over to the side of the road. Indeed he was obliged to call to her to help him up again.</p>
	<blockquote>
	Thou look'st like antichrist, in that lewd hat.
	<footer>Ananias <cite>Scene 4.3, <a href="http://www.gutenberg.org/files/4081/4081-h/4081-h.htm">The Alchemist</a></cite> (Ben Johnson)</footer>
	</blockquote>

	<footer>Footer of a section element</footer>

	</section>

	<aticle>
	<header>
	<h2>Article heading level 2</h2>
	<time datetime="29-09-2009" pubdate>29 September 2009</time>
	</header>
	<p>"Why, I guess so," Dorothy answered. "It would be as easy as to give the Scarecrow brains."</p>

	<p>"True," the Tin Woodman returned. "So, if you will allow me to join your party, I will also go to the Emerald City and ask Oz to help me."</p>

	<p>"Come along," said the Scarecrow heartily, and Dorothy added that she would be pleased to have his company. So the Tin Woodman shouldered his axe and they all passed through the forest until they came to the road that was paved with yellow brick.</p>

	<p>The Tin Woodman had asked Dorothy to put the oil-can in her basket. "For," he said, "if I should get caught in the rain, and rust again, I would need the oil-can badly."</p>
	<footer>
	<p>Posted in <a href="#">Books category</a></p>

	<address>author@mail.com</address>
	</footer>

	<article>
	<header>
	Comement from <a href="http://remysharp.com">Remy Sharp</a> at <time datetime="2010-05-02T20:45Z">10.45 on 2 May 2010</time>
	</header>

	<p>Sorry mate. Am washing my hair.</p>
	</article><!-- comment -->

	<article>
	<header>
	Comement from <a href="http://remysharp.com">Remy Sharp</a> at <time datetime="2010-05-02T20:45Z">10.45 on 2 May 2010</time>

	</header>
	<p>Sorry mate. Am washing my hair.</p>
	</article><!-- comment -->

	<article>
	<header>
	Comement from <a href="http://remysharp.com">Remy Sharp</a> at <time datetime="2010-05-02T20:45Z">10.45 on 2 May 2010</time>

	</header>
	<p>Sorry mate. Am washing my hair.</p>
	</article><!-- comment -->
	</article>

	<aside>
	<article>
	<h3>Header level 3 in Aside</h3>
	<p>"Why, I guess so," Dorothy answered. "It would be as easy as to give the Scarecrow brains."</p>

	<p>"True," the Tin Woodman returned. "So, if you will allow me to join your party, I will also go to the Emerald City and ask Oz to help me."</p>

	<p>"Come along," said the Scarecrow heartily, and Dorothy added that she would be pleased to have his company. So the Tin Woodman shouldered his axe and they all passed through the forest until they came to the road that was paved with yellow brick.</p>
	</article>
	</aside>

	<!-- you probably want to define it as a block level element -->
	<a href="http://mattwilcox.net/sandbox/html5-block-anchor/test.html">
	<h3>This is a heading inside a block level anchor</h3>

	<p>This is a paragraph</p>
	this is 'naked' text
	</a>

	<figure>
	<image src="http://i.min.us/i9tjM.jpg" alt="you can describe the image here"/>
	<figcaption>You can add a caption for the image here <small>© Author name</small></figcaption>
	</figure>


	<section>
	<h2>Media content types</h2>
	<section>
	<h3>Canvas</h3>
	<canvas width="360" height="480">
	<p>Fallback for unsupported browwsers</p>
	<img src="http://i.min.us/icUWG2.jpg" alt="paint canvas" />

	</canvas>
	</section>
	<section>
	<h3>Audio</h3>
	<audio controls>
	<source src="http://sideradesign.com/music/danosongs.com-theowlnamedorion.ogg" type="audio/ogg" >
	<source src="http://sideradesign.com/music/danosongs.com-theowlnamedorion.mp3" type="audio/mp3" >
	<p>Fallback content</p>

	</audio>
	</section>
	<section>
	<h3>Video</h3>
	<!-- http://diveintohtml5.org/video.html -->
	<video id="movie" width="320" height="240" preload controls>
	<source src="pr6.mp4" />
	<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
	<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
	<object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf">
	<param name="movie" value="flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" />
	<param name="flashvars" value='config={"clip": {"url": "http://wearehugh.com/dih5/good/bbb_480p.mp4", "autoPlay":false, "autoBuffering":true}}' />
	<p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p>
	</object>
	</video>
	<script> //var v = document.getElementById("movie"); v.onclick = function() { if (v.paused) { v.play(); } else { v.pause(); } }); </script>

	<section>

	<section>
	<h3>Form</h3>
	<!-- http://diveintohtml5.org/forms.html -->
	<form>
	<fieldset>
	<legend>A form with everything in it</legend>
	<div><label for="">Input with placeholder</label><input name="q" placeholder="Search Bookmarks and History"></div>

	<div><label for="">Input with autofocus</label><input name="q" autofocus></div>
	<div><label for="">required input</label><input id="q" required></div>
	<div><label for="">Input for email</label><input type="email"></div>
	<div><label for="">Input for URL</label><input type="url"></div>
	<div><label for="">Input for number</label><input type="number" min="0" max="10" step="2" value="6"></div>
	<div><label for="">Input for range</label><input type="range" min="0" max="10" step="2" value="6"></div>
	<div><label for="">Input for date</label> <input type="date"></div>
	<div><label for="">Input for tel</label> <input type="tel"></div>
	<div><label for="">Input for color</label> <input type="color"></div>

	<div><label for="">Label for a textarea</label><textarea></textarea></div>
	<div>
	<label for="">Input for datalist</label>
	<datalist id="">
	<option label=Mr value=Mr>
	<option label=Ms value=Ms>
	<option label=Prof value="Mad Professor">
	</datalist>

	</div>
	<input type="submit" value="Submit">
	</fieldset>
	</form>
	</section>

	<section>
	<h3>Tables</h3>
	<table>

	<caption>Company data</caption>
	<thead>
	<tr>
	<th id="name">Company name</th>
	<th id="employees">Number of employees</th>
	<th id="founded">Year founded</th>
	</tr>

	</thead>
	<tbody>
	<tr>
	<th id="acme" headers="name">ACME Inc</th>
	<td headers="acme employees">1000</td>
	<td headers="acme founded">1947</td>
	</tr>

	<tr>
	<th id="xyz" headers="name">XYZ Corp</th>
	<td headers="xyz employees">2000</td>
	<td headers="xyz founded">1973</td>
	</tr>
	</tbody>
	<tfoot>this is a footer</tfoot>

	</table>
	</section>
	</section>

	<section>
	<h2>Lists</h2>
	<ol start="5">
	<li>Ordered list item</li>
	<li>Ordered list item</li>

	<li>Ordered list item</li>
	<li>Ordered list item
	<ol>
	<li>Orderd list sub item</li>
	<li>Orderd list sub item</li>
	<li>Orderd list sub item</li>
	<li>Orderd list sub item</li>

	</ol>
	</li>
	<li>Ordered list item</li>
	<li>Ordered list item</li>
	</ol>

	<ul start="5">
	<li>unOrdered list item</li>

	<li>unOrdered list item</li>
	<li>unOrdered list item</li>
	<li>unOrdered list item
	<ul>
	<li>unOrderd list sub item</li>
	<li>unuOrderd list sub item</li>
	<li>unOrderd list sub item</li>

	<li>unOrderd list sub item</li>
	</ul>
	</li>
	<li>unOrdered list item</li>
	<li>unOrdered list item</li>
	</ul>

	<h4>A definition list</h4>

	<dl>
	<dt>HTML5 for Web Designers</dt>
	<dd>Jeremy Keith</dd>

	<dt>Introducing HTML5</dt>
	<dd>Remy Sharp and Bruces Lawson</dd>

	<dt>HTML5 Up and Running</dt>

	<dd>Mark Pilgrim</dd>

	</dl>
	<small>Disclaimer : Content is under creative commons licence</small>
	</section>

	<section>
	<h2>More elements</h2>
	<p>this is a paragraph with <span>a span</span></p>

	<iframe title="YouTube video player" class="youtube-player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/R9DCafQqHJA" frameborder="0"></iframe>

	<pre>
	Text in a pre element
	is displayed in a fixed-width
	font, and it preserves
	both spaces and
	line breaks
	</pre>
	<code>Computer code text</code>
	<p>"Calling red scarlet," Hare-Lip sneered, then <del>returned</del> to the attack on Granser. "My dad told me, an' he got it from his dad afore he croaked, that your wife was a Santa Rosan, an' that she was sure no account. He said she was a hash-slinger before the Red Death, though I don't know what a hash-slinger is. You can tell me, Edwin."</p>

	<dfn>Definition term</dfn>

	<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
	<kbd>Keyboard text</kbd>
	<q>
	Here is a short quotation here is a short quotation
	</q>
	<samp>Sample computer code text</samp>
	<p>This text contains <sub>subscript</sub> text.</p>

	<p>This text contains <sup>superscript</sup> text.</p>
	<var>Variable</var>


	<details>
	<summary>Photo details</summary>
	<p>Taken on <time datetime="2009-12-25">Xmas day 09</time></p>
	<p><small>Copyright Pete, <address>pete@mail.com</address></small>

	</details>

	</section>
	<footer>
	<p><a href="http://sideradesign.com">Sidera Design 2010</a></p>
	</footer>
	</body>
	</html>
No results found