Download - Semantic HTML5 and JSON-LD
WEB SEMANTICSDavid Kelleher Ski PHP ‘16 www.davidk.net
David Kelleherhttp://www.davidk.nethttps://joind.in/talk/3783e
Semantics
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?
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>
What does it mean?
Mark this up to convey meaning:
What does it mean?
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 HTML5Sectioning Elements
<body> <header> <h1>..</h1> <nav>...</nav> </header> <section> <article>...</article> <aside>..</aside> </section> <footer> <address>...</address> </footer></body>
Semantic HTML5Content 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 HTML5Text-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>
Rich Snippets
Knowledge Graph Panel
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>
Semantic Microdata
schema.org Blog Example<script type="application/ld+json">{ "@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<script type="application/ld+json">{ "@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
Other Semantic Concepts 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)
Other Semantic Concepts SKOS (Simple Knowledge Organization
System)Concept, definition, example, broader,
narrower
JSKSOS (JSON-LD structure for encoding SKOS)
WEB SEMANTICSDavid Kelleher Ski PHP ‘16 www.davidk.net
David Kelleherhttp://www.davidk.nethttps://joind.in/talk/3783e
![Semantic Annotations in Today’s Web...Google [18]. RDFa is an annotation format for HTML5 and XML that can be serialized into an RDF graph. JSON-LD is strictly speaking not an annotation](https://cdn.vdocuments.site/doc/165x107/5ece4f50265e064ba52744a2/semantic-annotations-in-todayas-google-18-rdfa-is-an-annotation-format.jpg)
