Semantic HTML5 and Microdata

SEMANTIC HTML 5
David Kelleher  NEPHP 2013 
www.davidk.net
David Kelleher
http://www.davidk.net
http://joind.in/8913

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>

What does it mean?
<body>Аватара
Роджер Эберт
11 декабря 2009
Смотря «Аватар», я чувствовал видом того же
самого, когда я увидел "Звездные войны" в 1977
году.</body>

What does it mean?
<div><div>Аватара</div><div>Роджер
Эберт</div>
<div>11 декабря 2009</div></div>
<div>Смотря<span>«Аватар»</span>, я
чувствовал видом того же самого, когда я увидел "
<span>Звездные <div>войны</div></span> "в
1977 году. </div>

Mark this up to convey
meaning:

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>

Semantic HTML5
Sectioning Elements
<body>
<header>
<h1>..</h1>
<nav>...</nav>
</header>
<section>
<article>...</article>
<aside>..</aside>
</section>
<footer>
<address>...</address>
</footer>
</body>

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

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

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>

Semantic Microdata
 schema.org
 Supports microdata spec
 Supports RDFa spec
 microformats

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>

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

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.

Semantic HTML5 and Microdata

Recommended

Recommended

More Related Content

Similar to Semantic HTML5 and Microdata

Similar to Semantic HTML5 and Microdata (20)

More from Dave Kelleher

More from Dave Kelleher (9)

Recently uploaded

Recently uploaded (20)

Semantic HTML5 and Microdata