Semantic Hybridization: Mixing RDFa and JSON-LD

February 14th, 2015

R. Alexander Miłowski

School of Information, UC Berkeley

JSON-LD 💘 or 💔 RDFa?

It's a love story of two soul-formats for semantics:

Can't we just all get along?

Yes, we can and so can they...

I'm here to be their relationship counselor for the day.

A simple problem

Encoding a person's contact information on the Web using

Alex Miłowski

School of Information
University of California, Berkeley             
@prefix s: <>
<> a s:Person ;
  s:name         "Alex Miłowski";
  s:email        "";
  s:url          "";
  s:organization <_:1> .
<_:1> a        s:Organization ;
  s:name       "University of California, Berkeley" ;
  s:department <_:2> .
<_:2> a s:Organization ;
  s:name "School of Information" ;
  s:url  "" .             

💘 RDFa?

RDFa likes to collaborate with others.
<div vocab="" 
<p><a property="url" href="">
      <span resource="" 
            property="name">Alex Miłowski</span>
   <a property="email" href="" 
      content="">(personal e-mail)</a>;
<p property="organization" typeof="Organization">
  <span property="department" typeof="Organization">
    <span property="name">School of Information</span>
    <a property="url" 
  <span property="name">
      University of California, Berkeley</span>


JSON-LD has a hard time relating.
  "@context": "",
  "@type" : "Person",
  "@id"   : "",
  "name"  : "Alex Miłowski",
  "email" : "",
  "url"   : "",
  "organization" : {
     "@type" : "Organization",
     "name"  : "University of California, Berkeley",
     "department" : {
        "@type" : "Organization",
        "name" : "School of Information",
        "url"  : ""

💘 Soul-formats

RDFa and JSON-LD almost seem made to compliment each other.

Using the right representation

The excellence of grammar as a guide is proportional to the paucity of the inflexions, i.e. to the degree of analysis effected by the language considered. — Bertrand Russell
(in a footnote of Principles of Mathematics)

Some of you have seen this from me for years ...

Our choice of syntax and format affects how we organize information.

By using the right representation we don't force information into to do unnatural acts.

Use the right format for the information being represented.

Strategy for Reuniting JSON-LD and RDFa

  1. Identify resources in hypertext (HTML) using RDFa.
  2. Annotate information in markup without unnecessary intrusions.
  3. Augment information using JSON-LD avoiding duplication.
  4. Represent the remaining information with JSON-LD.

An example of RDFa/JSON-LD love

<p vocab="">

<span resource="" 
  <span property="name">Alex Miłowski</span>

works at 
<span resource="" 
  <span property="name">
     University of California, Berkeley</span>'s
  <span resource="" 
    <span property="name">School of Information</span>

<script type="application/ld+json">
  "@context" : "",
  "@id" : "",
  "givenName" : "Raymond",
  "otherName" : "Alexander",
  "familyName" : "Miłowski",
  "email" : "",
  "url" : "",
  "organization" : { 
     "@id": "" 

A Demonstration

We'll use RDFa and JSON-LD to simplify expression of information about media (photographs).

Step #1 — Elegance in RDFa

We encode a gallery of images, annotating each type and resource with RDFa...

<div typeof="ImageGallery" vocab="">
  <img typeof="Photograph" src="10153548161924517.jpg"/>
  <img typeof="Photograph" src="10153548161944517.jpg"/>

Step #2 — Linking to the JSON-LD

Link to additional information in JSON-LD:

<script type="application/ld+json" src="10153548161924517.json"></script>
<script type="application/ld+json" src="10153548161944517.json"></script>

Step #3 — Add detail with JSON-LD

  "@context" : "",
  "@id" : "10153548161924517.jpg",
  "@type" : "Photograph",
  "dateCreated" : "2015-01-18T14::25:29-08:00",
  "description" : "A crane at China Camp",
  "contentLocation" : {
     "@type" : "Place",
     "geo" : { "@type" : "GeoCoordinates", "latitude" : 38.009463888889, "longitude" : -122.49190555556 }
   "comment" : {
       "text" : "A crane!",
       "x" : 230, "y": 260,
       "width": 25, "height": 25

The Working Demo (source)

Together Again


(with some help from HTML)