Semantic chop

11,195 views

Published on

The basics of a Semantic HTML5 Chop

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,195
On SlideShare
0
From Embeds
0
Number of Embeds
5,310
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Semantic chop

  1. 1. SEMANTIC HTML5 101 or “Bye bye divitis” Pascal Rettig On Twitter @cykodWednesday, May 25, 2011
  2. 2. Born in 1989 by Tim Berner’s Lee HTML IS IN TO ITee EA ’S RLY 20’S Born in 1989 by Tim Berner’s LWednesday, May 25, 2011
  3. 3. LI FE CRniSgI”S QUAR3TERing to find “Mea n I FACINlGr A ML5 & Web .0 is try fo HT The big goaWednesday, May 25, 2011
  4. 4. WHAT IS A “SEMANTIC CHOP”? A way to give structure and meaning to the HTML that you generate.Wednesday, May 25, 2011
  5. 5. W HO IS TH IS FOR? • Primarily clients other than your usual Web Browsers. • The Google, Other Search Engines, Data Aggregators, Screen Readers, “Non- traditional” browsersWednesday, May 25, 2011
  6. 6. THE GOALS • HTML tags used in Meaningful ways • All styling information left to CSS • Validating markup • All dynamic interactions added “unobtrusively” (usually via jQuery)Wednesday, May 25, 2011
  7. 7. HOW DOES HTML5 ACHIEVE THIS?Wednesday, May 25, 2011
  8. 8. #1 A BOATLOAD OF MEANINGFUL TAGS. <article> <aside> <audio> <canvas> <command> <datalist> <details> <embed> <figcaption> <figure> <footer> <header> <hgroup> <keygen> <mark> <meter> <nav> <output> <progress> <rp> <rt> <ruby> <section> <source> <summary> <time> <video> <wbr> http://www.w3schools.com/html5/ tag_wbr.aspWednesday, May 25, 2011
  9. 9. #2SECTIONING TAGS <article> <aside> <nav> <section> (Also <details> <figure> act as the same, but don’t add to the parent section)Wednesday, May 25, 2011
  10. 10. EACH CREATES A NEW “SECTION” OF YOUR PAGE Each of these represents a separate line in the outline of your document.Wednesday, May 25, 2011
  11. 11. #3ORGANIZATIONAL ELEMENTS <header> <footer> <hgroup>Wednesday, May 25, 2011
  12. 12. CAN BE USED TO GROUP CONTENT TOGETHER (But does not create a separate sectioning root)Wednesday, May 25, 2011
  13. 13. #4SELF-CONTAINED “SYNDICATABLE” CONTENT All <article>’s should be self-contained elements They can contain their own <h1>’s <header>’s <footer>’s etcWednesday, May 25, 2011
  14. 14. #5ADDED MEANING TO HTML5 TAGS <em>Emphasized text</em> <strong>Strong text</strong> <dfn>Definition term</dfn> <code>Computer code text</code> <samp>Sample computer code text</samp> <kbd>Keyboard text</kbd> <var>Variable</var> <cite>Citation</cite>Wednesday, May 25, 2011
  15. 15. E XAMPLE: <!DOCTYPE html> <html> <head> ... Head Stuff .. </head> <body> <header> <h1>My Website</h1> <nav id=‘main-menu’> <h1>Main Menu</h1> <ul> <li><a href=’#’>Item 1</a></li> <li><a href=’#’>Item 2</a></li> </ul> </nav> </header> <article> <hgroup> <h1>My Awesome Article</h1> <h2>Sub Title</h2> </hgroup> <p> Lorem ipsum... </p> </article> <aside> <h1>Blog roll</h1> <p>Content something or other</p> <ul> <li><a href=’#’>Item 1</a></li> <li><a href=’#’>Item 2</a></li> </ul> </aside> </body> </html>Wednesday, May 25, 2011
  16. 16. CREATES AN OUTL INE OF: http://gsnedders.html5.org/ outliner/ 1. My Website 1. Main Menu 2. My Awesome Article 3. Blog RollWednesday, May 25, 2011
  17. 17. NITTY GRITTY DETAILS... Can I use a semantic chop now?Wednesday, May 25, 2011
  18. 18. YES, IF YOU INCLUDE A SHIV FOR IE < 9 • html5shiv • (Or just use modernizr.js, which also includes it) • Fine print: Javascript requiredWednesday, May 25, 2011
  19. 19. SO NO MORE <DIV>’S AND <SPAN>’S? • Not quite - <divs> and <spans> should still be used for styling and for organizing data with microdata. • Remember: <article>, <section> et al create new sectioning rootsWednesday, May 25, 2011
  20. 20. PART 2: ADDITIONAL MEANINGWednesday, May 25, 2011
  21. 21. SPEAKING OF MICRODATA... A way mark up *your existing html* to give it machine readable meaning.Wednesday, May 25, 2011
  22. 22. WHY? Again - search engines. We learned from the bad keyword- stuffing days that pure meta-data doesn’t work.Wednesday, May 25, 2011
  23. 23. MICRO DATA EXAMPLE: <div itemscope> <p>My name is <span itemprop="name">Neil</span>.</p> <p>My band is called <span itemprop="band">Four Parts Water</span>.</ p> <p>I am <span itemprop="nationality">British</span>.</p> </div> Create items with itemscope, add properties with itemprop.Wednesday, May 25, 2011
  24. 24. MORE ATTRIBUTES • Itemtype - Defines the vocabulary to be used by the microdata format. • Itemid - The unique identifier of the item, if defined by the microdata vocabulary. • Itemref - Allows a microdata element to reference another element on the page to define it by either HTML id or by itemid. ReferenceWednesday, May 25, 2011
  25. 25. WHERE IS IT USED? • Google Rich snippets • http://www.google.com/ support/webmasters/bin/ answer.py?answer=99170Wednesday, May 25, 2011
  26. 26. OPENGRAPH: MAKING FACEBOOK HAPPY Facebook scans your page and pulls information whenever someone likes or shares a page of your siteWednesday, May 25, 2011
  27. 27. IT’LL JUST PULL RANDOM CR*P IF YOU DON’T ADD OPENGRAPH TAGSWednesday, May 25, 2011
  28. 28. ADD META PR OPERTIES TO YOUR <HEAD> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock" /> <meta property="og:type" content="movie" /> <meta property="og:url" content="http:// www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="http:// ia.media-imdb.com/images/rock.jpg" /> ... http://ogp.me/Wednesday, May 25, 2011
  29. 29. FINALLY RDFAWednesday, May 25, 2011
  30. 30. FINALLY RDFA ... Which is too complicated to cover in a few minutes ... But with it’s big brother RDF opens you up to the full world of Web 3.0 & the Semantic Web.Wednesday, May 25, 2011
  31. 31. THE L INKED DATA GRAPH T he Semantic WebWednesday, May 25, 2011
  32. 32. THANKS! QUESTIONS? Pascal Rettig cykod.com Twitter @cykodWednesday, May 25, 2011
  33. 33. Wednesday, May 25, 2011

×