Your SlideShare is downloading. ×
0
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Semantic chop
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Semantic chop

10,759

Published on

The basics of a Semantic HTML5 Chop

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
10,759
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
18
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×