Semantic HTML
•
0 likes•542 views
See the Web version for better experience: http://dpashkevich.github.io/pres-semantichtml A presentation on semantic markup that advocates for a more thoughtful approach to architecting Web content and explains the benefits of it.
Recommended
More Related Content
What's hot
What's hot (18)
Viewers also liked
Viewers also liked (20)
Similar to Semantic HTML
Similar to Semantic HTML (20)
Recently uploaded
Recently uploaded (20)
Semantic HTML
- 1. SEMANTIC HTML By Dmitry Pashkevich
- 2. GOALS Thoughtful approach to composing HTML Treat HTML pages as documents Better overall front end code
- 4. Has structure! Front page Table of contents Introduction Chapters Conclusion References
- 9. Other elements Header & footer Footnotes Asides Definitions Tables Formulas ...
- 10. WORLD WIDE WEB
- 11. Made up of documents
- 13. Deep nesting
- 14. High dynamicity
- 16. Still documents
- 17. Lots of them!
- 18. Fundamental concept behind WWW HYPERTEXT
- 19. Plenty of texts with links between them The Idea
- 21. The language? HyperText Markup Language
- 22. THE WEB TRIFORCE
- 23. HTML DOCUMENTS Composed of elements <html><!--ROOTELEMENT--> <head> <!-- METADATA:title,author,description,etc.--> </head> <body> <!-- PAYLOADCONTENT--> </body> </html>
- 24. ELEMENT ORDER MATTERS! Search engines Mobile browsing Keyboard navigation Find in page
- 25. ELEMENT ORDER
- 26. ELEMENT ORDER
- 27. ELEMENT ORDER
- 28. Are the essence of the World Wide Web LINKS
- 30. Links to external resources <linkrel="shortcuticon"href="/favicon.ico"> <linkrel="apple-touch-icon"href="/touch-icon.png"> <linkrel="stylesheet"href="/styles/main.css"> … used to augment the current document, generally automatically processed by the user agent.
- 31. Other uses of link
- 32. AUTHOR
- 33. SITE SEARCH
- 34. NEWS FEED
- 35. ALSO... Alternate language Previous/next page License PDF version for moreSee the spec
- 36. HTML5 Simplified syntax New elements and attributes New API Precisely defined parsing rules, including error behavior
- 37. New elements section, article, aside, nav header, footer figure, figcaption time, meter, progress, mark audio, video, canvas Full list
- 39. Not enough elements? Are you sure?
- 40. Not enough elements? Are you sure? Use the classattribute
- 41. Sections Each section is likeamini-document
- 42. New input types search, email, url, tel,number, range, color date, month, week, time, datetime, datetime-local See examples
- 43. Input: not just text! <inputtype="file"accept="image/*;capture=camera"> <!--also:camcorder,microphone--> Demo
- 45. Better read by programs Screen readers Search engines Sharing tools Content clippers News grabbers ...
- 46. Easier to change presentation
- 47. Reusability across projects <sectionclass="carousel"> <h1>FeaturedContent</h1> <articleclass="slide"> <h2>SlideTitle</h2> <divclass="slide-content">...</div> </article> <articleclass="slide"> <h2>SlideTitle</h2> <divclass="slide-content">...</div> </article> </section> Moregreat patterns from AnthonyTicknor
- 48. Improves your JS too
- 50. Mobile view
- 51. Mobile view (with navigation)
- 52. Print
- 54. Search result snippet (article)
- 55. Search result snippet (home)
- 57. TAKEAWAYS
- 58. Be responsible about IA* Your HTML = your IA
- 59. Hyperlinks are important! Don't break their functionality!
- 64. ATTRIBUTIONS Boston Globe responsive website by Extend, connect share from image by WWW browser by HTML5 Logo by JS Logo by CSS3 Logo by ??? HTML5 Elements image by Content is like water image Antoine Lefeuvre Noah Sussman Tim Berners-Lee W3C AJ ONeal Tim Wright by Stéphanie Walter