SlideShare a Scribd company logo
1 of 26
WEB SEMANTICS
David Kelleher  Ski PHP ‘16  www.davidk.net
David Kelleher
http://www.davidk.net
https://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 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>
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 SEMANTICS
David Kelleher  Ski PHP ‘16  www.davidk.net
David Kelleher
http://www.davidk.net
https://joind.in/talk/3783e

More Related Content

Similar to Semantic HTML5 and JSON-LD

Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris GriffithRapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris GriffithUXPA International
 
Introduction to CSS Grid
Introduction to CSS GridIntroduction to CSS Grid
Introduction to CSS GridKara Luton
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單偉格 高
 
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015beyond tellerrand
 
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesRenato Iwashima
 
Make More Money With Advanced Custom Fields - WordCampYYC 2015
Make More Money With Advanced Custom Fields - WordCampYYC 2015Make More Money With Advanced Custom Fields - WordCampYYC 2015
Make More Money With Advanced Custom Fields - WordCampYYC 2015buildstudio
 
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSObject-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSLi-Wei Lu
 
The Responsive Grid & You: Extending Your WordPress Site Across Multiple Dev...
The Responsive Grid & You:  Extending Your WordPress Site Across Multiple Dev...The Responsive Grid & You:  Extending Your WordPress Site Across Multiple Dev...
The Responsive Grid & You: Extending Your WordPress Site Across Multiple Dev...Jeremy Fuksa
 
Semantic web support for POSH
Semantic web support for POSHSemantic web support for POSH
Semantic web support for POSHDinu Suman
 
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićMeetMagentoNY2014
 
Practical progressive enhancement
Practical progressive enhancementPractical progressive enhancement
Practical progressive enhancementGraham Bird
 
CSS101 - Concept Fundamentals for non UI Developers
CSS101 - Concept Fundamentals for non UI DevelopersCSS101 - Concept Fundamentals for non UI Developers
CSS101 - Concept Fundamentals for non UI DevelopersDarren Gideon
 
Microformats, Institute of Engineering and Technology
Microformats, Institute of Engineering and TechnologyMicroformats, Institute of Engineering and Technology
Microformats, Institute of Engineering and TechnologyNishikant Taksande
 
Be nice to your designers
Be nice to your designersBe nice to your designers
Be nice to your designersPai-Cheng Tao
 

Similar to Semantic HTML5 and JSON-LD (20)

Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris GriffithRapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
 
[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 Workshop
 
Introduction to CSS Grid
Introduction to CSS GridIntroduction to CSS Grid
Introduction to CSS Grid
 
[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 
HTML5 - Pedro Rosa
HTML5 - Pedro RosaHTML5 - Pedro Rosa
HTML5 - Pedro Rosa
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
 
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
 
Critical Rendering Path
Critical Rendering PathCritical Rendering Path
Critical Rendering Path
 
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
 
Make More Money With Advanced Custom Fields - WordCampYYC 2015
Make More Money With Advanced Custom Fields - WordCampYYC 2015Make More Money With Advanced Custom Fields - WordCampYYC 2015
Make More Money With Advanced Custom Fields - WordCampYYC 2015
 
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSObject-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
 
The Responsive Grid & You: Extending Your WordPress Site Across Multiple Dev...
The Responsive Grid & You:  Extending Your WordPress Site Across Multiple Dev...The Responsive Grid & You:  Extending Your WordPress Site Across Multiple Dev...
The Responsive Grid & You: Extending Your WordPress Site Across Multiple Dev...
 
Semantic web support for POSH
Semantic web support for POSHSemantic web support for POSH
Semantic web support for POSH
 
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
 
Practical progressive enhancement
Practical progressive enhancementPractical progressive enhancement
Practical progressive enhancement
 
CSS101 - Concept Fundamentals for non UI Developers
CSS101 - Concept Fundamentals for non UI DevelopersCSS101 - Concept Fundamentals for non UI Developers
CSS101 - Concept Fundamentals for non UI Developers
 
Microformats, Institute of Engineering and Technology
Microformats, Institute of Engineering and TechnologyMicroformats, Institute of Engineering and Technology
Microformats, Institute of Engineering and Technology
 
laboratorio
laboratoriolaboratorio
laboratorio
 
Be nice to your designers
Be nice to your designersBe nice to your designers
Be nice to your designers
 

More from Dave Kelleher

Uml Diagrams for Web Developers
Uml Diagrams for Web DevelopersUml Diagrams for Web Developers
Uml Diagrams for Web DevelopersDave Kelleher
 
Database Design and Normalization
Database Design and NormalizationDatabase Design and Normalization
Database Design and NormalizationDave Kelleher
 
Reverse Card Sort for UX Testing
Reverse Card Sort for UX TestingReverse Card Sort for UX Testing
Reverse Card Sort for UX TestingDave Kelleher
 

More from Dave Kelleher (7)

Uml Diagrams for Web Developers
Uml Diagrams for Web DevelopersUml Diagrams for Web Developers
Uml Diagrams for Web Developers
 
Database Design and Normalization
Database Design and NormalizationDatabase Design and Normalization
Database Design and Normalization
 
Debugging PHP Code
Debugging PHP CodeDebugging PHP Code
Debugging PHP Code
 
Cinematic UX Design
Cinematic UX DesignCinematic UX Design
Cinematic UX Design
 
Cryptocurrencies
CryptocurrenciesCryptocurrencies
Cryptocurrencies
 
Cinematic UX Design
Cinematic UX DesignCinematic UX Design
Cinematic UX Design
 
Reverse Card Sort for UX Testing
Reverse Card Sort for UX TestingReverse Card Sort for UX Testing
Reverse Card Sort for UX Testing
 

Recently uploaded

Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 

Recently uploaded (20)

Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 

Semantic HTML5 and JSON-LD

  • 1. WEB SEMANTICS David Kelleher  Ski PHP ‘16  www.davidk.net David Kelleher http://www.davidk.net https://joind.in/talk/3783e
  • 3. 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
  • 4. What does it mean?
  • 5. 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>
  • 6. What does it mean?
  • 7. Mark this up to convey meaning:
  • 8. What does it mean?
  • 9. 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>
  • 11. 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
  • 12. 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
  • 13. 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>
  • 16. Microdata  schema.org vocabulary  Supports microdata syntax  Supports RDFa syntax  Now we can use JSON-LD syntax  microformats
  • 17. 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>
  • 18. 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>
  • 20. 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...", …
  • 21. 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" …
  • 22. 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.
  • 23. Other Semantic Concepts  WAI-ARIA Roles (accessibility) <form role=“search”>  Wikidata (public database, name-value pairs) London /wiki/Q84: Area is 1572 Square Kilometers
  • 24. 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)
  • 25. Other Semantic Concepts  SKOS (Simple Knowledge Organization System) Concept, definition, example, broader, narrower  JSKSOS (JSON-LD structure for encoding SKOS)
  • 26. WEB SEMANTICS David Kelleher  Ski PHP ‘16  www.davidk.net David Kelleher http://www.davidk.net https://joind.in/talk/3783e