BDW - What is Semantics

3,134 views

Published on

So what is semantics anyway?

Published in: Technology
  • Be the first to comment

BDW - What is Semantics

  1. 1. flickr.com/photos/apophysis_rocks Semantics in HTML
  2. 2. Gordon Brander Front-end Developer at Crowd Favorite
  3. 3. What is Semantics?
  4. 4. Semantics = Meaning In HTML, semantics is about describing things
  5. 5. Why?
  6. 6. Meaning is what makes the web awesome
  7. 7. flickr.com/photos/i-capture/16136112/ Free market of ideas You never know what people will do with them
  8. 8. Mapping the BP Oil Disaster http://www.ifitwasmyhome.com/
  9. 9. We Feel Fine http://www.wefeelfine.org/
  10. 10. How?
  11. 11. HTML is a <markup> language
  12. 12. Hashtag: #worldcup HTML: <a href=”http://fifa.com”>World Cup</a>
  13. 13. Tag start Tag end <a href=”http://fifa.com”>World Cup!</a> Attribute Content
  14. 14. Top Three Semantic Hooks • <head>: info about the document • Tags: what a piece of content is • Attributes: more granular info about the content
  15. 15. Two Guidelines • Use the most specific available tag • Pick good names for your classes
  16. 16. Fancy new tags <header> <nav> <article> <aside> <article> <aside> <article> <aside> <footer> More: http://dev.w3.org/html5/markup/spec.html
  17. 17. Naming things • Bad: <h1 class=”big-red-text”>Cats! LOL</h1> • Bad: <span class=”green-italics”>Some intro text</span> • Good: <h1 class=”article-title”>Cats! LOL</h1> • Good: <strong class=”intro”>Some intro text</strong>
  18. 18. Describe what things are, not what they look like
  19. 19. flickr.com/photos/jurvetson/5268677/ Microformats Why do all the work yourself?
  20. 20. Cool. Me too! I’m going to mark up my contact info like this... Cool. Me too! Cool. Me too! Cool. Me Cool. Me too! too! Cool. Me too! Cool. Me too!
  21. 21. <address class=”vcard”> <a class=”fn url” href=”http://gordonbrander.com”> <span class=”given-name”>Gordon</span> <span class=”family-name”>Brander</span> </a> </address>
  22. 22. <address class=”vcard”> <a class=”fn url” href=”http://gordonbrander.com”> <span class=”given-name”>Gordon</span> <span class=”family-name”>Brander</span> </a> </address>
  23. 23. <address class=”vcard”> <a class=”fn url” href=”http://gordonbrander.com”> <span class=”given-name”>Gordon</span> <span class=”family-name”>Brander</span> </a> </address>
  24. 24. microformats.org • People: vcard • Syndication/Blogging: hAtom • News: hNews • Events: hCalendar • Copyright - rel-license • Lots more...
  25. 25. Gordon Brander gordonbrander.com

×