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>
  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>
  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>
  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.