HTML5 semantics
•
3 j'aime•2,149 vues
Resources http://html5doctor.com http://html5demos.com HTML5 resets http://html5doctor.com/html-5-reset-stylesheet/ http://sencss.kilianvalkhof.com
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (20)
Similaire à HTML5 semantics
Similaire à HTML5 semantics (20)
Dernier
Dernier (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