Getting ready for HTML5- New tags, part two

 Ah!  Enough Autistic Rights ranting for now.  I'm a web designer, and <aside> (LOL) from this blog being my own personal soap box, it also features articles about web design.  So, my Project HTML5 series makes a triumphant return.


 Here are previous HTML5 articles on this blog:

• Getting ready for HTML5
  
• Getting ready for HTML5- New tags, part one
  
• Getting ready for HTML5- The video tag
  

 Now, on to some more new HTML5 tags...


 The new <audio> tag works similarly to the <video> tag.  Here's some sample code:


  <audio src="http://www.kimcrawley.com/thisaudiodoesntexist.wav">
<p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>


 So, the 'src' attribute directs to the URL of the audio file, and any text between <audio> and </audio> will display only when HTML5 isn't supported in a browser.


 The other attributes are like the attributes for <video>:


preload= none, metadata, auto defines whether or not the audio is preloaded.  The autoplay attribute usually overrides this.


 loop will have the file continuously replay.


 controls defines whether or not to display user controls.  If no controls attribute is present, controls may not display.  


 The <canvas> tag will display an image according to a JavaScript applet on the page.  Where the <canvas> tag is will determine where it goes among the other page elements, and with attributes, you may define height (in pixels), width (in pixels), and an id.


 The <time> tag is a very interesting one. You may use it like this:


 My 27^th birthday is on <time datetime="2011-01-13">Thursday, January 13^th 2011</time>. 


 Now, my 27th birthday will usually display as 'Thursday, January 13th, 2011", but if someone is using a browser with foreign options, it could display differently.  For example, if the browser is set to the Hebrew calendar, the date could be displayed as Shevat 8, 5771.  If the browser is set to the Islamic calendar, it could be displayed at Safar 7, 1432, etc.  


 My next Project HTML5 post will be on browsers- which ones are HTML5 ready?











 kimcrawley.com


 twitter.com/kim_crawley