Semantic HTML

468 views

Published on

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.

Published in: Internet, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
468
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Semantic HTML

  1. 1. SEMANTIC HTML By Dmitry Pashkevich
  2. 2. GOALS Thoughtful approach to composing HTML Treat HTML pages as documents Better overall front end code
  3. 3. REAL WORLD DOCUMENT: PUBLICATION
  4. 4. Has structure! Front page Table of contents Introduction Chapters Conclusion References
  5. 5. Other elements Header & footer Footnotes Asides Definitions Tables Formulas ...
  6. 6. WORLD WIDE WEB
  7. 7. Made up of documents
  8. 8. Plenty of elements
  9. 9. Deep nesting
  10. 10. High dynamicity
  11. 11. Many representations
  12. 12. Still documents
  13. 13. Lots of them!
  14. 14. Fundamental concept behind WWW HYPERTEXT
  15. 15. Plenty of texts with links between them The Idea
  16. 16. Extend, connect, share
  17. 17. The language? HyperText Markup Language
  18. 18. THE WEB TRIFORCE
  19. 19. HTML DOCUMENTS Composed of elements <html><!--ROOTELEMENT--> <head> <!-- METADATA:title,author,description,etc.--> </head> <body> <!-- PAYLOADCONTENT--> </body> </html>
  20. 20. ELEMENT ORDER MATTERS! Search engines Mobile browsing Keyboard navigation Find in page
  21. 21. ELEMENT ORDER
  22. 22. ELEMENT ORDER
  23. 23. ELEMENT ORDER
  24. 24. Are the essence of the World Wide Web LINKS
  25. 25. Hyperlinks <ahref="/cats.html">Pleasedon'tbreakmyhref!</a>
  26. 26. 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.
  27. 27. Other uses of link
  28. 28. AUTHOR
  29. 29. SITE SEARCH
  30. 30. NEWS FEED
  31. 31. ALSO... Alternate language Previous/next page License PDF version for moreSee the spec
  32. 32. HTML5 Simplified syntax New elements and attributes New API Precisely defined parsing rules, including error behavior
  33. 33. New elements section, article, aside, nav header, footer figure, figcaption time, meter, progress, mark audio, video, canvas Full list
  34. 34. Not enough elements?
  35. 35. Not enough elements? Are you sure?
  36. 36. Not enough elements? Are you sure? Use the classattribute
  37. 37. Sections Each section is likeamini-document
  38. 38. New input types search, email, url, tel,number, range, color date, month, week, time, datetime, datetime-local See examples
  39. 39. Input: not just text! <inputtype="file"accept="image/*;capture=camera"> <!--also:camcorder,microphone--> Demo
  40. 40. BENEFITS OF SEMANTIC MARKUP
  41. 41. Better read by programs Screen readers Search engines Sharing tools Content clippers News grabbers ...
  42. 42. Easier to change presentation
  43. 43. 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
  44. 44. Improves your JS too
  45. 45. DEMO: CSS-TRICKS.COM
  46. 46. Mobile view
  47. 47. Mobile view (with navigation)
  48. 48. Print
  49. 49. Evernote Clipped Article
  50. 50. Search result snippet (article)
  51. 51. Search result snippet (home)
  52. 52. Google Plus Share
  53. 53. TAKEAWAYS
  54. 54. Be responsible about IA* Your HTML = your IA
  55. 55. Hyperlinks are important! Don't break their functionality!
  56. 56. Experiment, make mistakes
  57. 57. Follow the standards
  58. 58. Stuff gets obsolete
  59. 59. LET'S TALK! http://dpashk.com dpashk@gmail.com
  60. 60. 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

×