HTML5 semantics

3,847 views

Published on

Resources
http://html5doctor.com
http://html5demos.com

HTML5 resets
http://html5doctor.com/html-5-reset-stylesheet/
http://sencss.kilianvalkhof.com

Published in: Technology, Design
2 Comments
3 Likes
Statistics
Notes
  • I love these slides! Did you know we’re running a competition on SlideShare to win a 3M PocketProjector MP180? To enter, simply tag your presentation with ‘3MInform’. Head over to our page for more details... and don’t forget to follow us to find out if you get shortlisted!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Resources
    http://html5doctor.com
    http://html5demos.com

    HTML5 resets
    http://html5doctor.com/html-5-reset-stylesheet/
    http://sencss.kilianvalkhof.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,847
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
25
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

HTML5 semantics

  1. Welcome back!
  2. Justin Halsall CTO, betribes
  3. Justin Halsall CTO, betribes
  4. Passions
  5. Tables nested fail
  6. web standards
  7. web stuff?!
  8. web stuff?!
  9. wtf?
  10. wtf? thats cool!
  11. web standards
  12. web standards
  13. web standards
  14. Rails cool!
  15. Rails Rails is AWESOME!
  16. XHTML 2.0 don’t hold your breath
  17. backwards compatible and required all documents to be served as XML this buwdy aint gonna fly... its to fat... he he
  18. WHATWG Web Hypertext Application Technology Working Group
  19. HTML5 W3C + WHATWG
  20. Doctype you know that long thing you always have to look up
  21. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">
  22. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">
  23. <!DOCTYPE html>
  24. Charset meta, bla bla bla utf-8!
  25. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  26. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  27. <meta charset="utf-8" />
  28. <link type="text/css" rel="stylesheet" href="screen.css"> <script type="text/javascript" src="konamicode.js"></script>
  29. <link rel="stylesheet" href="screen.css"> <script src="konamicode.js"> </script>
  30. Block level <a> Wait, that didn’t used to be valid...
  31. <a href="http://thedailymo.com"> <h2>The Daily Mo</h2> <p>An awesome Movember viral app.</p> </a>
  32. Cleanup time...
  33. frame, frameset, noframes
  34. frame, frameset, noframes NO MORE
  35. acronym was dropped for abbr
  36. acronym was dropped for abbr
  37. font, big, center & strike
  38. font, big, center & strike NO MORE
  39. Semantics what do I care?
  40. Accessibility Not just for the blind anymore
  41. SEO Google is your biggest blind user
  42. Repurposing Your web app is your api
  43. Usability Surprisingly enough
  44. related
  45. related
  46. related
  47. related unrelated
  48. happy New elements!
  49. Structure elements“heeeeead, body, section, footer...”
  50. <header> great for intros, navigation etc.
  51. <section> it’s all in the name
  52. <nav>“lets go!” “where to?” “check the nav elements”
  53. <article> useful for... articles?!
  54. <article> useful for... articles?!
  55. <aside>sidenotes
  56. <footer> metadata related to parent
  57. <footer> metadata related to parent
  58. <hgroup> grouping headings together
  59. <hgroup> <h1>...</h1> <h2>...</h2> </hgroup>
  60. HTML Outline
  61. HTML4 <div> <h1>Forest elephants</h1> <p>In this section, we discuss the lesser known forest elephants. ...this section continues... </div> <div> <h2>Habitat</h2> <p>Forest elephants do not live in trees but among them. ...this subsection continues... <div> <h2>Diet</h2> </div> <h1>Mongolian gerbils</h1> </div>
  62. HTML4 <h1>Forest elephants</h1> ... <h2>Habitat</h2> ... <h2>Diet</h2> ... <h1>Mongolian gerbils</h1>
  63. HTML4 1. Forest elephants 1.1. Habitat 1.2. Diet 2. Mongolian gerbils <h1>Forest elephants</h1> ... <h2>Habitat</h2> ... <h2>Diet</h2> ... <h1>Mongolian gerbils</h1>
  64. HTML5 <section> <h1>Forest elephants</h1> <p>In this section, we discuss the lesser known forest elephants. ...this section continues... </section> <section> <h2>Habitat</h2> <p>Forest elephants do not live in trees but among them. ...this subsection continues... <section> <h1>Diet</h1> </section> <h2>Mongolian gerbils</h2> </section>
  65. HTML5 <section> <h1>Forest elephants</h1> </section> <section> <h2>Habitat</h2> <section> <h1>Diet</h1> </section> <h2>Mongolian gerbils</h2> </section>
  66. HTML5 1. Forest elephants 2. Habitat 2.1. Diet 3. Mongolian gerbils <section> <h1>Forest elephants</h1> </section> <section> <h2>Habitat</h2> <section> <h1>Diet</h1> </section> <h2>Mongolian gerbils</h2> </section>
  67. sub headings not interesting in outline h1 h2
  68. sub headings not interesting in outline h1 h2
  69. HTML5 1. Soocial 1.1. Hassle free contact syncing 1.1.1. Pricing <section> <h1>Soocial</h1> <h2>Hassle Free contact syncing</h2> <section> <h1>Pricing</h1> </section> ... </section>
  70. HTML5 <section> <hgroup> <h1>Soocial</h1> <h2>Hassle Free contact syncing</h2> </hgroup> <section> <h1>Pricing</h1> </section> ... </section>
  71. HTML5 <section> <hgroup> <h1>Soocial</h1> <h2>Hassle Free contact syncing</h2> </hgroup> <section> <h1>Pricing</h1> </section> ... </section>
  72. HTML5 1. Soocial 1.1. Pricing <section> <hgroup> <h1>Soocial</h1> <h2>Hassle Free contact syncing</h2> </hgroup> <section> <h1>Pricing</h1> </section> ... </section>
  73. <figure> & <figcaption> images, graphs etc.
  74. <figure> & <figcaption> images, graphs etc.
  75. <time> <time datetime="2010- 11-01">8 days, 8 hrs and 5 min from now</time>
  76. <time> <time datetime="2010- 11-01">8 days, 8 hrs and 5 min from now</time>
  77. data- Attributes
  78. <a class="movie" href="http://movienotify.com/ kick-ass[2010]" data-name="Kick-Ass" data-year="2010" data-imdb-rating="8.1" >Kick-Ass (2010)</a>
  79. <a class="movie" href="http://movienotify.com/ kick-ass[2010]" data-name="Kick-Ass" data-year="2010" data-imdb-rating="8.1" >Kick-Ass (2010)</a>
  80. <div id='trailer' class='loading' data-src="<%= movie_trailers_path @movie, :json %>"> loading... </div>
  81. <div id='trailer' class='loading' data-src="<%= movie_trailers_path @movie, :json %>"> loading... </div>
  82. HTML5 shiv: http://remysharp.com/2009/01/07/ html5-enabling-script/ <script> document.createElement('header'); document.createElement('footer'); document.createElement('section'); ... </script>
  83. modernizr.com <body class="no-multiplebgs ...">
  84. Questions? •Twitter: @juice10 •Screenshots: •movienotify.com •thedailymo.com •blog: juice10.com •pet project: tvnotify.com •We (Betribes.com) are looking for cool new colleagues. Maybe you? •E-mail: justin@betribes.com
  85. [passion fruit] http://www.flickr.com/photos/stefanvds/3260955737/ [tables] http://www.flickr.com/photos/cav666/3562455727/ [ipad stand] http://www.flickr.com/photos/4nton/4577185176/in/photostream/ [web] http://www.flickr.com/photos/foxypar4/2124673642/ [shark] http://www.flickr.com/photos/oskay/265899766/in/photostream/ [sedgeway] http://www.flickr.com/photos/oskay/265899988/sizes/o/in/photostream/ [smily hand] http://www.flickr.com/photos/dotbenjamin/2765083201/ [rails] http://www.flickr.com/photos/library_of_congress/2178402745/ [html5 fist] http://www.flickr.com/photos/justinsomnia/513636061/ [skelleton] http://www.flickr.com/photos/powerhouse_museum/2980051095/ [chicken] http://www.flickr.com/photos/uw_digital_images/4476181225/ [cleaner] http://www.flickr.com/photos/library_of_congress/ [fireworks] http://www.flickr.com/photos/bestrated1/341866875/ [google founders] http://www.wired.com/science/discoveries/news/2007/09/ dayintech_0907

×