Successfully reported this slideshow.
Your SlideShare is downloading. ×

Semantic HTML5 and Microdata

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Semantic HTML5 and JSON-LD
Semantic HTML5 and JSON-LD
Loading in …3
×

Check these out next

1 of 22 Ad

Semantic HTML5 and Microdata

Download to read offline

Learn how developers can use the latest HTML5 & microdata specs to code semantic web pages, helping define the meaning of web page content.

How can you help the realize Tim Berners-Lee's vision of the semantic web? Developers now separate web page content (HTML) from presentation (CSS). This talk will discuss the evolving HTML5 and microdata specs, and show sample code using new elements and attributes in blog and commerce web pages.

Learn how developers can use the latest HTML5 & microdata specs to code semantic web pages, helping define the meaning of web page content.

How can you help the realize Tim Berners-Lee's vision of the semantic web? Developers now separate web page content (HTML) from presentation (CSS). This talk will discuss the evolving HTML5 and microdata specs, and show sample code using new elements and attributes in blog and commerce web pages.

Advertisement
Advertisement

More Related Content

Similar to Semantic HTML5 and Microdata (20)

Advertisement

Recently uploaded (20)

Semantic HTML5 and Microdata

  1. 1. SEMANTIC HTML 5 David Kelleher  NEPHP 2013  www.davidk.net David Kelleher http://www.davidk.net http://joind.in/8913
  2. 2. Semantics
  3. 3. Semantics
  4. 4. What does it mean? <body>41-76-61-74-61-72-20-52-6f-67-65-72- 20-45-62-65-72-74-20-44-65-63-65-6d-62-65- 72-20-31-31-2c-20-32-30-30-39-20-57-61-74-63- 68-69-6e-67-20-5c-22-41-76-61-74-61-72-2c-5c- 22-20-49-20-66-65-6c-74-20-73-6f-72-74-20-6f- 66-20-74-68-65-20-73-61-6d-65-20-61-73-20- 77-68-65-6e-20-49-20-73-61-77-20-5c-22-53-74- 61-72-20-57-61-72-73-5c-22-20-69-6e-20-31-39- 37-37-2e</body>
  5. 5. What does it mean?
  6. 6. What does it mean? <body>Аватара Роджер Эберт 11 декабря 2009 Смотря «Аватар», я чувствовал видом того же самого, когда я увидел "Звездные войны" в 1977 году.</body>
  7. 7. What does it mean?
  8. 8. What does it mean? <div><div>Аватара</div><div>Роджер Эберт</div> <div>11 декабря 2009</div></div> <div>Смотря<span>«Аватар»</span>, я чувствовал видом того же самого, когда я увидел " <span>Звездные <div>войны</div></span> "в 1977 году. </div>
  9. 9. What does it mean?
  10. 10. Mark this up to convey meaning:
  11. 11. Semantic Tags, IDs, Class Names <div id=“filmreview”> <div id=“author”> <h1>Аватара</h1> <div id=“byline”>Роджер Эберт</div> <div id=“date”>11 декабря 2009</div> </div> <p class=“review”>Смотря «Аватар», я чувствовал видом того же самого, когда я увидел "Звездные войны" в 1977 году.</p> </div>
  12. 12. Semantic HTML5 Sectioning Elements <body> <header> <h1>..</h1> <nav>...</nav> </header> <section> <article>...</article> <aside>..</aside> </section> <footer> <address>...</address> </footer> </body>
  13. 13. Semantic HTML5 Content Grouping Elements <p>Paragraph</p> <ul> <li>List Item #1</li> <li>List Item #2</li> </ul>  Also ordered list, description list, blockquote, figure  Use to group content within a section  They create line breaks by default in display
  14. 14. Semantic HTML5 Text-Level Elements <strong>important</strong> <b>keyword</b> or <b>article lead</b> <em>emphasized</em> <cite>book title</cite> <i lang="fr">c'est la vie</i> <small>fine print</small> <s>inaccurate, outdated $3.99</s>  Group words, phrases, or other content parts  They do not create line breaks
  15. 15. Semantic HTML5 <article class=“filmreview”> <header> <h1>Avatar</h1> <span class=“author”>Roger Ebert</span> <time datetime=“2009-12-11”>December 11, 2009</time> </header> <p class=“review”><b class=“lead”>Watching "Avatar," I felt sort of the same as when I saw "Star Wars" in 1977. </b></p> </article>
  16. 16. Semantic Microdata
  17. 17. Semantic Microdata  schema.org  Supports microdata spec  Supports RDFa spec  microformats
  18. 18. Semantic Microdata <article itemscope itemtype="http://schema.org/Movie"> <header> <h1 itemprop="name">Avatar</h1> <section itemprop="review" itemscope itemtype="http://schema.org/Review"> <span itemprop="author">Roger Ebert</span> <meta itemprop="datePublished" content="2009-12-11">December 11, 2009 </section> </header> <p><b class="lead">Watching "Avatar," I felt sort of the same as when I saw "Star Wars" in 1977. </b></p> </article>
  19. 19. Semantic Microdata
  20. 20. Semantic Web  Semantic Web: Web of “Data” not “Pages”  Knowledge Graph (Bing Snapshots, Google)  Linked Data (Wikidata)  RDF: Data model for storing knowledge graph  RDF/XML: XML document containing RDF data  Ontology: Represent Knowledge as set of Concepts  OWL: Web Ontology Language  Case Study: BBC 2010 World Cup Website
  21. 21. Semantic Web  Discovery / Analysis example: Show me Roger Ebert’s favorite films with an Asian director of photography.  Agent / Automation example: Purchase tickets and load directions into my device for a movie playing in a theater today, near my current location, that fits my taste in film.
  22. 22. SEMANTIC HTML 5 David Kelleher  NEPHP 2013  www.davidk.net David Kelleher http://www.davidk.net http://joind.in/8913

×