Semantic HTML5 and JSON-LD

WEB SEMANTICS
David Kelleher  Ski PHP ‘16  www.davidk.net
David Kelleher
http://www.davidk.net
https://joind.in/talk/3783e

What does it mean?
41 76 61 74 61 72 52 6f 67 65 72 20 45 62 65 72 74 44 65 63 65 6d 62 65
72 20 31 31 2c 20 32 30 30 39 57 61 74 63 68 69 6e 67 20 22 41 76 61 74
61 72 2c 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 22 53 74 61 72
20 57 61 72 73 22 20 69 6e 20 31 39 37 37 2e 20

What does it mean?
<div>
<div>41 76 61 74 61 72</div>
<div>52 6f 67 65 72 20 45 62 65 72 74</div>
<div>44 65 63 65 6d 62 65 72 20 31 31 2c 20 32 30 30
39</div>
<div>57 61 74 63 68 69 6e 67 20
<span class="style1">22 41 76 61 74 61 72 2c
22</span>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<span class="style1">22 53 74 61 72 20 57 61
72 73 22</span>20 69 6e 20 31 39 37 37 2e
</div>
</div>

Mark this up to convey meaning:

Semantic Tags, IDs, Class Names
<div id ="filmreview">
<div id ="header">
<h1>41 76 61 74 61 72</h1>
<div id =“byline">52 6f 67 65 72 20 45 62 65 72
74</div>
<div id =“date">57 61 74 63 68 69 6e 67 20
</div>
<p class="review">57 61 74 63 68 69 6e 67 20
<span class=“filmtitle">22 41 76 61 74 61 72 2c
22</span>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<span class="filmtitle">22 53 74 61 72 20 57 61 72 73
22</span>20 69 6e 20 31 39 37 37 2e
</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 lede</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 id=“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=“lede”>Watching
<cite>Avatar</cite>, I felt sort of the same as when I
saw <cite>Star Wars</cite> in 1977. </b></p>
</article>

Microdata
 schema.org vocabulary
 Supports microdata syntax
 Supports RDFa syntax
 Now we can use JSON-LD syntax
 microformats

schema.org Microdata (old way)
<article id="filmreview" itemscope itemtype="http://schema.org/Movie">
<header>
<h1 itemprop="itemReviewed" itemscope
itemtype="http://schema.org/Movie"><span
itemprop="name">Avatar</span></h1>
<div itemprop="author" itemscope
itemtype="http://schema.org/Person">
<span itemprop="name">Roger Ebert</span></div>
<time datetime="2009-12-11" itemprop="datePublished" >
December 11, 2009</time>
</header>
<p class=“review” itemprop="reviewBody"><b class="lede">Watching
<cite>Avatar</cite>, I felt sort of the same as when... </b></p>
</article>

schema.org JSON-LD (new way)
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Review",
"itemReviewed": {
"@type": "Movie",
"name": "Avatar“,
"sameAs": "http://dbpedia.org/page/Roger_Ebert"
},
"author": {
"@type": "Person",
"name": "Roger Ebert",
“sameAs": "http://dbpedia.org/page/Roger_Ebert"
},
"datePublished": "2006-05-04",
"reviewBody": "Watching Avatar...",
}
</script>

schema.org Blog Example
{
"@context":"http://schema.org",
"@type":"LiveBlogPosting",
"@id":"http://techcrunch.com/...",
"about":{
"@type":"Event",
"startDate":"2015-03-09T13:00:00-07:00",
"name":"Apple Spring Forward Event",
}
},
"coverageStartTime":"2015-03-09T11:30:00-07:00",
"coverageEndTime":"2015-03-09T16:00:00-07:00",
"headline":"Apple Spring Forward Event Blog",
"description":"Welcome to live coverage...",
…

schema.org Commerce Example
{
"@context": "http://schema.org",
"@type": "Product",
"image": "dell-30in-lcd.jpg",
"name": "Dell UltraSharp 30" LCD Monitor",
"offers": {
"@type": "AggregateOffer",
"highPrice": "$1495",
"lowPrice": "$1250",
"offerCount": "8",
"offers": [
{
"@type": "Offer",
"url": "save-a-lot-monitors.com/dell-30.html"
…

Semantic Web
 Discovery / Analysis example:
Show me Roger Ebert’s favorite films with an Asian director of
photography.
 Agent / Automation example (schema.org Actions):
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.

Other Semantic Concepts
 WAI-ARIA Roles (accessibility)
<form role=“search”>
 Wikidata (public database, name-value pairs)
London /wiki/Q84: Area is 1572 Square Kilometers

 RDF (Subject-Predicate-Object “Triplet”
Expressions)
Ferrari Is Car
 OWL (Web Ontology Language)
DataPropertyAssertion
( :hasAge :John "51"^^xsd:integer )
 SPARQL (SQL-like Query Language for RDF
Graphs)

 SKOS (Simple Knowledge Organization
System)
Concept, definition, example, broader,
narrower
 JSKSOS (JSON-LD structure for encoding
SKOS)

Semantic HTML5 and JSON-LD

Recommended

Recommended

More Related Content

Similar to Semantic HTML5 and JSON-LD

Similar to Semantic HTML5 and JSON-LD (20)

More from Dave Kelleher

More from Dave Kelleher (7)

Recently uploaded

Recently uploaded (20)

Semantic HTML5 and JSON-LD