This document discusses semantic markup and provides examples of using schema.org microdata to semantically markup a movie information block. It introduces schema.org as a taxonomy for describing types of information and shows how to add itemscope, itemtype, and itemprop tags to HTML elements to associate them with properties from the schema.org taxonomy. An example block about the movie Avatar is fully semantically marked up, with properties like name, director, genre, and trailer embedded.

1. Semantic Markup
Tuesday, November 19th 2013
DTC 356 Fall 2013

2. Two Perspectives
David Weinberger
Sir Tim Berners-Lee

3. Weinberger’s Smart
Leaves
The leaf knows what it is
Physical item w/ bar codes
Bits vs. Atoms
What is a bar code for bits?

4. Implicit vs. Explicit
“The web is a vast collection of
completely uncontrolled heterogeneous
documents.”
What does it mean to learn from
context?

6. Freedom vs Control

7. The Semantic Web proposes not a standard set of
relationships but a standard way for people to
describe whatever relationships are important to
the topic.
!
David Weinberger. Everything Is Miscellaneous (p.
192). Macmillan. Kindle Edition.

8. Ceci n’est pas un Ted Talk
http:/
/www.ted.com/talks/tim_berners_lee_on_the_next_web.html

9. How does it work?
Microdata markup w/ schema.org

10. Basic Format
!
schema.org is a taxonomy
View the taxonomy at schema.org/Thing
HTML5 allows us to point elements on
our pages to the schema.org taxonomy

11. Basic Format
Getting Started With Schema.Org
Use <div> and <span> to markup elements (div is
for blocks of text, span for small inline items.)
itemscope: “This is an item.”
itemtype: “This is what type of item is is.”
itemprop: “This item has the following
property.”

12. Example: (Before)
<div>
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

13. Example: (itemscope)
<div itemscope>
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

14. Example: (itemtype)
<div itemscope itemtype="http:/
/schema.org/Movie">
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

15. Example: (itemprop)
<div itemscope itemtype="http:/
/schema.org/Movie">
<h1 itemprop=“name”>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

16. Example: (itemprop)
<div itemscope itemtype="http:/
/schema.org/Movie">
<h1 itemprop=“name”>Avatar</h1>
<span>Director: <span itemprop=“director”>James Cameron</span> (born
August 16, 1954)</span>
<span itemprop=“genre”>Science fiction</span>
<a href=“../movies/avatar-theatrical-trailer.html” itemprop=“trailer">
Trailer</a>
</div>

17. Example: (embeded)
Before:
<span>Director: <span itemprop=“director”>James Cameron</span> (born
August 16, 1954)</span>
After embedding another itemscope:
<div itemprop="director" itemscope itemtype=“http:/
/schema.org/Person">
Director: <span itemprop="name">James Cameron</span> (born <span
itemprop="birthDate">August 16, 1954)</span> </div>

18. Example: (Before)
<div>
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

19. Example: (After)
<div itemscope itemtype ="http:/
/schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<div itemprop="director" itemscope itemtype="http:/
/schema.org/
Person">Director: <span itemprop="name">James Cameron</span>
(born <span itemprop=“birthDate">August 16, 1954)</span> </div>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html"
itemprop="trailer">Trailer</a>
</div>

20. Image Credits
3 (David Weinberger) Some rights reserved by Joi.
3 (Sir Tim Berners-Lee) Some rights reser ved by veni markovski
Rene Magritte’s The Treachery of Images is owned and displayed by
LACMA