Download - Semantic HTML5 and Microdata
SEMANTIC HTML 5David Kelleher NEPHP 2013 www.davidk.net
David Kelleherhttp://www.davidk.nethttp://joind.in/8913
Semantics
Semantics
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?
What does it mean?
<body>АватараРоджер Эберт11 декабря 2009Смотря «Аватар», я чувствовал видом того же самого, когда я увидел "Звездные войны" в 1977 году.</body>
What does it mean?
What does it mean?
<div><div>Аватара</div><div>Роджер Эберт</div><div>11 декабря 2009</div></div><div>Смотря<span>«Аватар»</span>, я чувствовал видом того же самого, когда я увидел " <span>Звездные <div>войны</div></span> "в 1977 году. </div>
What does it mean?
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
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 Microdata
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 HTML 5David Kelleher NEPHP 2013 www.davidk.net
David Kelleherhttp://www.davidk.nethttp://joind.in/8913
