Semantic chop
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Semantic chop

on

  • 10,363 views

The basics of a Semantic HTML5 Chop

The basics of a Semantic HTML5 Chop

Statistics

Views

Total Views
10,363
Views on SlideShare
5,354
Embed Views
5,009

Actions

Likes
2
Downloads
17
Comments
0

13 Embeds 5,009

http://cykod.com 4986
url_unknown 9
http://cykod.beta.com 2
http://ranksit.com 2
http://translate.googleusercontent.com 2
http://cykod.com. 1
http://www.ranksit.com 1
http://www.cykod.com 1
http://www.newsblur.com 1
http://207.46.192.232 1
http://test.cykod.com 1
http://webcache.googleusercontent.com 1
http://localhost 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Semantic chop Presentation Transcript

  • 1. SEMANTIC HTML5 101 or “Bye bye divitis” Pascal Rettig On Twitter @cykodWednesday, May 25, 2011
  • 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. 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. WHAT IS A “SEMANTIC CHOP”? A way to give structure and meaning to the HTML that you generate.Wednesday, May 25, 2011
  • 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. 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. HOW DOES HTML5 ACHIEVE THIS?Wednesday, May 25, 2011
  • 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. #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. 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. #3ORGANIZATIONAL ELEMENTS <header> <footer> <hgroup>Wednesday, May 25, 2011
  • 12. CAN BE USED TO GROUP CONTENT TOGETHER (But does not create a separate sectioning root)Wednesday, May 25, 2011
  • 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. #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. 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. 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. NITTY GRITTY DETAILS... Can I use a semantic chop now?Wednesday, May 25, 2011
  • 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. 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. PART 2: ADDITIONAL MEANINGWednesday, May 25, 2011
  • 21. SPEAKING OF MICRODATA... A way mark up *your existing html* to give it machine readable meaning.Wednesday, May 25, 2011
  • 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. 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. 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. WHERE IS IT USED? • Google Rich snippets • http://www.google.com/ support/webmasters/bin/ answer.py?answer=99170Wednesday, May 25, 2011
  • 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. IT’LL JUST PULL RANDOM CR*P IF YOU DON’T ADD OPENGRAPH TAGSWednesday, May 25, 2011
  • 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. FINALLY RDFAWednesday, May 25, 2011
  • 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. THE L INKED DATA GRAPH T he Semantic WebWednesday, May 25, 2011
  • 32. THANKS! QUESTIONS? Pascal Rettig cykod.com Twitter @cykodWednesday, May 25, 2011
  • 33. Wednesday, May 25, 2011