19 October 2010

HTML5 introduces a number of new elements and attributes that reflect typical usage on modern websites. The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins(for example, flash).

DOCTYPE and Character Set

HTML has really long DOCTYPES and are hard to remember, or at least I have always copied them from some reliable source. For example, XHTML strict:
Source code viewer
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Programming Language: HTML
HTML5 has a nice memorable short DOCTYPE:
Source code viewer
  1. <!DOCTYPE html>
Programming Language: HTML

Like the new DOCTYPE, the character set declaration has also been abbreviated.
Source code viewer
  1. <!--HTML Meta Tag-->
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  3. <!--HTML5 Meta Tag-->
  4. <meta charset="utf-8" />
Programming Language: HTML

HTML5 elements

Example HTML5 Page:
Source code viewer
  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. 	<meta charset="utf-8" /> 
  5. 	<title>Example Page</title>
  6. </head>
  7. <body>
  8. 	<header>
  9. 		<h1>Page Title</h1>
  10. 		<p>Slogan</p>
  11. 	</header>
  12.  
  13. 	<nav>
  14. 		<ul>
  15. 			<li class="selected"><a href="index.html">Home</a></li>
  16. 			<li><a href="page2.html">Page2</a></li>
  17. 			<li><a href="page3.html">Page3</a></li>
  18. 			<li><a href="contact.html">Contact</a></li>
  19. 		</ul>
  20. 	</nav>
  21.  
  22. 	<section id="articles">
  23. 		<article> 
  24. 			<header> 
  25. 				<h2>Article Title</h2> 
  26. 			</header> 
  27. 			<p>This is article 1.</p>
  28. 			<footer> 
  29. 				Article Footer 
  30. 			</footer> 
  31. 		</article>
  32. 		<article> 
  33. 			<header> 
  34. 				<h2>Article Title</h2> 
  35. 			</header> 
  36. 			<p>This is article 1.</p>
  37. 			<footer> 
  38. 				Article Footer 
  39. 			</footer> 
  40. 		</article>
  41.     	</section>
  42.  
  43. 	<footer>
  44. 		&copy;
  45. 	</footer>
  46. </body></html>
Programming Language: XML
Changes in HTML5:
HTML5 is definitely better solution, but I wouldn't use it for general websites yet, because you would have to make a lot of workarounds for older browsers. IEs below version 9 haven't got HTML5 support as well.

But in general HTML5 should replace Flash and Silverlight. So no annoying update notices and extra plug-ins to install.