Semantic HTML

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.

Transcript

1. SEMANTIC HTML By Dmitry Pashkevich
2. GOALS Thoughtful approach to composing HTML Treat HTML pages as documents Better overall front end code
3. REAL WORLD DOCUMENT: PUBLICATION
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
12. Plenty of elements
13. Deep nesting
14. High dynamicity
15. Many representations
16. Still documents
17. Lots of them!
18. Fundamental concept behind WWW HYPERTEXT
19. Plenty of texts with links between them The Idea
20. Extend, connect, share
21. The language? HyperText Markup Language
22. THE WEB TRIFORCE
23. HTML DOCUMENTS Composed of elements < h t m l > < ! - - R O O T E L E M E N T - - > < h e a d > < ! - - M E T A D A T A : t i t l e , a u t h o r , d e s c r i p t i o n , e t c . - - > < / h e a d > < b o d y > < ! - - P A Y L O A D C O N T E N T - - > < / b o d y > < / h t m l >
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
29. Hyperlinks < a h r e f = " / c a t s . h t m l " > P l e a s e d o n ' t b r e a k m y h r e f ! < / a >
30. Links to external resources < l i n k r e l = " s h o r t c u t i c o n " h r e f = " / f a v i c o n . i c o " > < l i n k r e l = " a p p l e - t o u c h - i c o n " h r e f = " / t o u c h - i c o n . p n g " > < l i n k r e l = " s t y l e s h e e t " h r e f = " / s t y l e s / m a i n . c s s " > … used to augment the current document, generally automatically processed by the user agent.
31. Other uses of l i n k
32. AUTHOR
33. SITE SEARCH
34. NEWS FEED
35. ALSO... Alternate language Previous/next page License PDF version for more See 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
38. Not enough elements?
39. Not enough elements? Are you sure?
40. Not enough elements? Are you sure? Use the c l a s s attribute
41. Sections Each section is like a mini-document
42. New input types s e a r c h , e m a i l , u r l , t e l ,n u m b e r , r a n g e , c o l o r d a t e , m o n t h , w e e k , t i m e , d a t e t i m e , d a t e t i m e - l o c a l See examples
43. Input: not just text! < i n p u t t y p e = " f i l e " a c c e p t = " i m a g e / * ; c a p t u r e = c a m e r a " > < ! - - a l s o : c a m c o r d e r , m i c r o p h o n e - - > Demo
44. BENEFITS OF SEMANTIC MARKUP
45. Better read by programs Screen readers Search engines Sharing tools Content clippers News grabbers ...
46. Easier to change presentation
47. Reusability across projects < s e c t i o n c l a s s = " c a r o u s e l " > < h 1 > F e a t u r e d C o n t e n t < / h 1 > < a r t i c l e c l a s s = " s l i d e " > < h 2 > S l i d e T i t l e < / h 2 > < d i v c l a s s = " s l i d e - c o n t e n t " > . . . < / d i v > < / a r t i c l e > < a r t i c l e c l a s s = " s l i d e " > < h 2 > S l i d e T i t l e < / h 2 > < d i v c l a s s = " s l i d e - c o n t e n t " > . . . < / d i v > < / a r t i c l e > < / s e c t i o n > More great patterns from Anthony Ticknor
48. Improves your JS too
49. DEMO: CSS-TRICKS.COM
50. Mobile view
51. Mobile view (with navigation)
52. Print
53. Evernote Clipped Article
54. Search result snippet (article)
55. Search result snippet (home)
56. Google Plus Share
57. TAKEAWAYS
58. Be responsible about IA* Your HTML = your IA
59. Hyperlinks are important! Don't break their functionality!
60. Experiment, make mistakes
61. Follow the standards
62. Stuff gets obsolete
63. LET'S TALK! http://dpashk.com dpashk@gmail.com
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