HTML5 - Just the basics

14,600 views

Published on

This is a presentation I put together for our web team to discuss the basics of HTML5.

Published in: Technology

HTML5 - Just the basics

  1. 1. HTML5 Just the basics please.
  2. 2. You not too late
  3. 3. Replacement for HTML4 and XHTML
  4. 4. Bickering Browser Support 2004 2005 2006 2007 2008 2009 2010 2011 Cooperation IE9
  5. 5. Philosophy
  6. 6. • Based on usage • Cooperation with browser makers • Remove presentation elements • Build in scripting elements
  7. 7. Creating an HTML5 Page
  8. 8. Sample.html <!DOCTYPE html>
  9. 9. Sample.html <!DOCTYPE html> HTML 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
  10. 10. Sample.html <!DOCTYPE html>
  11. 11. Sample.html <!DOCTYPE html> <html lang="en">
  12. 12. Sample.html <!DOCTYPE html> HTML 4 <html lang="en"> <html lang="en" xml:lang="en" xmlns="http:// www.w3.org/1999/xhtml">
  13. 13. Sample.html <!DOCTYPE html> <html lang="en">
  14. 14. Sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />
  15. 15. Sample.html <!DOCTYPE html> <html lang="en"> HTML 4 <head> <meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> <meta charset="utf-8" />
  16. 16. Sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />
  17. 17. Sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Sample Page</title> <link rel=”stylesheet” href=”style-original.css” />
  18. 18. Sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Sample Page</title> <link rel=”stylesheet” href=”style-original.css” /> HTML 4 <link href=”/style/structure.css” rel=”stylesheet” type=”text/css” />
  19. 19. Sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Sample Page</title> <link rel=”stylesheet” href=”style-original.css” />
  20. 20. Sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Sample Page</title> <link rel=”stylesheet” href=”style-original.css” /> </head>
  21. 21. New Elements
  22. 22. <section> a thematic grouping of content, typically with a heading
  23. 23. <nav> Contains core navigation items for a site or page
  24. 24. <article> A self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable
  25. 25. <aside> Content that is related to but not essential to it’s parent content
  26. 26. <hgroup> Grouping of h1 - h6 elements  
  27. 27. <header> Contains content at the top of a section, typically a heading tag
  28. 28. <footer> Take a wild guess  
  29. 29. <time> Indicates a date/time in the content
  30. 30. <header>
  31. 31. <article>
  32. 32. <nav>
  33. 33. <footer>
  34. 34. <header> <nav> <section> <article>
  35. 35. <footer> <nav>
  36. 36. Forms
  37. 37. Placeholder Autofocus Email Web address Number
  38. 38. Range Date, Month, Week, datetime Search Color picker
  39. 39. Specialized Elements
  40. 40. Canvas Video Location Offline

×