HTML5 semantics
•
3 likes•2,149 views
Resources http://html5doctor.com http://html5demos.com HTML5 resets http://html5doctor.com/html-5-reset-stylesheet/ http://sencss.kilianvalkhof.com
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to HTML5 semantics
Similar to HTML5 semantics (20)
Recently uploaded
Recently uploaded (20)
HTML5 semantics
- 5. Passions
- 8. web stuff?!
- 9. web stuff?!
- 11. wtf?
- 12. wtf? thats cool!
- 13. web standards
- 14. web standards
- 15. web standards
- 16. Rails cool!
- 20. XHTML 2.0 don’t hold your breath
- 21. backwards compatible and required all documents to be served as XML this buwdy aint gonna fly... its to fat... he he
- 22. WHATWG Web Hypertext Application Technology Working Group
- 24. Doctype you know that long thing you always have to look up
- 25. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">
- 26. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">
- 27. <!DOCTYPE html>
- 29. Charset meta, bla bla bla utf-8!
- 34. <link type="text/css" rel="stylesheet" href="screen.css"> <script type="text/javascript" src="konamicode.js"></script>
- 38. Block level <a> Wait, that didn’t used to be valid...
- 39. <a href="http://thedailymo.com"> <h2>The Daily Mo</h2> <p>An awesome Movember viral app.</p> </a>
- 40. Cleanup time...
- 43. acronym was dropped for abbr
- 44. acronym was dropped for abbr
- 45. font, big, center & strike
- 46. font, big, center & strike NO MORE
- 47. Semantics what do I care?
- 48. Accessibility Not just for the blind anymore
- 49. SEO Google is your biggest blind user
- 50. Repurposing Your web app is your api
- 55. related
- 56. related
- 57. related
- 60. Structure elements“heeeeead, body, section, footer...”
- 61. <header> great for intros, navigation etc.
- 66. <section> it’s all in the name
- 69. <nav>“lets go!” “where to?” “check the nav elements”
- 74. <article> useful for... articles?!
- 75. <article> useful for... articles?!
- 76. <aside>sidenotes
- 77. <footer> metadata related to parent
- 78. <footer> metadata related to parent
- 83. HTML Outline
- 84. 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>
- 86. 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>
- 87. 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>
- 89. 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>
- 90. sub headings not interesting in outline h1 h2
- 91. sub headings not interesting in outline h1 h2
- 92. 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>
- 93. HTML5 <section> <hgroup> <h1>Soocial</h1> <h2>Hassle Free contact syncing</h2> </hgroup> <section> <h1>Pricing</h1> </section> ... </section>
- 94. HTML5 <section> <hgroup> <h1>Soocial</h1> <h2>Hassle Free contact syncing</h2> </hgroup> <section> <h1>Pricing</h1> </section> ... </section>
- 95. HTML5 1. Soocial 1.1. Pricing <section> <hgroup> <h1>Soocial</h1> <h2>Hassle Free contact syncing</h2> </hgroup> <section> <h1>Pricing</h1> </section> ... </section>
- 96. <figure> & <figcaption> images, graphs etc.
- 97. <figure> & <figcaption> images, graphs etc.
- 98. <time> <time datetime="2010- 11-01">8 days, 8 hrs and 5 min from now</time>
- 99. <time> <time datetime="2010- 11-01">8 days, 8 hrs and 5 min from now</time>
- 100. data- Attributes
- 103. <div id='trailer' class='loading' data-src="<%= movie_trailers_path @movie, :json %>"> loading... </div>
- 104. <div id='trailer' class='loading' data-src="<%= movie_trailers_path @movie, :json %>"> loading... </div>
- 108. 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
- 109. [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