Your SlideShare is downloading. ×
0
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
HTML5 semantics
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 semantics

2,843

Published on

Resources …

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
2,843
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
2
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×