Skip to content

Commit 1ac0921

Browse files
gkellogggkellogg
committed
Update the JSON-LD in HTML section to be normative, describe dataset extraction, how to deal with multiple script elements and script element targeting using fragments.
Fixes #23 and fixes #57.
1 parent 91bce75 commit 1ac0921

File tree

1 file changed

+287
-20
lines changed

1 file changed

+287
-20
lines changed

‎index.html

+287-20
Original file line numberDiff line numberDiff line change
@@ -8171,41 +8171,308 @@ <h3>Graph Containers</h3>
81718171
ignored for such documents.</p>
81728172
</section>
81738173

8174-
<section class="informative"><h2>Embedding JSON-LD in HTML Documents</h2>
8174+
<section class="changed"><h2>Embedding JSON-LD in HTML Documents</h2>
81758175

81768176
<p>HTML <a data-cite="HTML52/semantics-scripting.html#the-script-element">script elements</a> can be used to embed blocks of data in documents.
81778177
This way, JSON-LD content can be easily embedded in HTML [[HTML52]] by placing
81788178
it in a script element with the <code>type</code> attribute set to
81798179
<code>application/ld+json</code>.</p>
81808180

8181-
<pre class="example nohighlight" data-transform="updateExample"
8182-
data-content-type="text/html"
8183-
data-ignore
8184-
title="Embedding JSON-LD in HTML">
8185-
<!--
8186-
****<script type="application/ld+json">****
8187-
{
8188-
"@context": "https://json-ld.org/contexts/person.jsonld",
8189-
"@id": "http://dbpedia.org/resource/John_Lennon",
8190-
"name": "John Lennon",
8191-
"born": "1940-10-09",
8192-
"spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
8193-
}
8194-
****</script>****
8195-
-->
8196-
</pre>
8181+
<aside class="example ds-selector-tabs"
8182+
title="Embedding JSON-LD in HTML">
8183+
<div class="selectors">
8184+
<button class="selected" data-selects="original">Original</button>
8185+
<button data-selects="expanded">Expanded</button>
8186+
<button data-selects="statements">Statements</button>
8187+
<button data-selects="turtle">Turtle</button>
8188+
</div>
8189+
<pre class="original selected nohighlight" data-transform="updateExample"
8190+
data-content-type="text/html">
8191+
<!--
8192+
****<script type="application/ld+json">****
8193+
{
8194+
"@context": "https://json-ld.org/contexts/person.jsonld",
8195+
"@id": "http://dbpedia.org/resource/John_Lennon",
8196+
"name": "John Lennon",
8197+
"born": "1940-10-09",
8198+
"spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
8199+
}
8200+
****</script>****
8201+
-->
8202+
</pre>
8203+
<pre class="expanded"
8204+
data-transform="updateExample"
8205+
data-result-for="Embedding JSON-LD in HTML-original">
8206+
<!--
8207+
[{
8208+
"@id": "http://dbpedia.org/resource/John_Lennon",
8209+
"http://xmlns.com/foaf/0.1/name": [{"@value": "John Lennon"}],
8210+
"http://schema.org/birthDate": [
8211+
{"@value": "1940-10-09", "@type": "http://www.w3.org/2001/XMLSchema#date"}
8212+
],
8213+
"http://schema.org/spouse": [
8214+
{"@id": "http://dbpedia.org/resource/Cynthia_Lennon"}
8215+
]
8216+
}]
8217+
-->
8218+
</pre>
8219+
<table class="statements"
8220+
data-result-for="Embedding JSON-LD in HTML-expanded"
8221+
data-to-rdf>
8222+
<thead><tr><th>Subject</th><th>Property</th><th>Value</th><th>Value Type</th></tr></thead>
8223+
<tbody>
8224+
<tr><td>http://dbpedia.org/resource/John_Lennon</td><td>foaf:name</td><td>John Lennon</td><td>&nbsp;</td></tr>
8225+
<tr><td>http://dbpedia.org/resource/John_Lennon</td><td>schema:birthDate</td><td>1940-10-09</td><td>xsd:date</td></tr>
8226+
<tr><td>http://dbpedia.org/resource/John_Lennon</td><td>schema:spouse</td><td>http://dbpedia.org/resource/Cynthia_Lennon</td><td>&nbsp;</td></tr>
8227+
</tbody>
8228+
</table>
8229+
<pre class="turtle"
8230+
data-content-type="text/turtle"
8231+
data-transform="updateExample"
8232+
data-result-for="Embedding JSON-LD in HTML-expanded"
8233+
data-to-rdf>
8234+
<!--
8235+
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
8236+
@prefix schema: <http://schema.org/> .
8237+
@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .
8238+
8239+
<http://dbpedia.org/resource/John_Lennon> foaf:name "John Lennon";
8240+
schema:birthDate "1940-10-09"^^xsd:date;
8241+
schema:spouse <http://dbpedia.org/resource/Cynthia_Lennon> .
8242+
-->
8243+
</pre>
8244+
</aside>
81978245

81988246
<p>Depending on how the HTML document is served, certain strings may need
8199-
to be escaped.</p>
8247+
to be escaped. See
8248+
<a href="https://www.w3.org/TR/html52/semantics-scripting.html#restrictions-for-contents-of-script-elements">
8249+
Restrictions for contents of <code>script</code> elements
8250+
</a> in [[!HTML52]] for details. In particular, the content MAY be enclosed
8251+
in the HTML comment open (<code>&lt;!--</code>) and comment close (<code>--&gt;</code>) text sequences</p>
8252+
8253+
<aside class="example ds-selector-tabs"
8254+
title="Embedding JSON-LD in HTML with comments">
8255+
<div class="selectors">
8256+
<button class="selected" data-selects="original">Original</button>
8257+
<button data-selects="expanded">Expanded</button>
8258+
<button data-selects="statements">Statements</button>
8259+
<button data-selects="turtle">Turtle</button>
8260+
</div>
8261+
<pre class="original selected" data-transform="updateExample"
8262+
data-content-type="text/html">
8263+
<!--
8264+
<script type="application/ld+json">
8265+
< !--
8266+
{
8267+
"@context": "https://json-ld.org/contexts/person.jsonld",
8268+
"@id": "http://dbpedia.org/resource/John_Lennon",
8269+
"name": "John Lennon",
8270+
"born": "1940-10-09",
8271+
"spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
8272+
}
8273+
-- >
8274+
</script>
8275+
-->
8276+
</pre>
8277+
<pre class="expanded"
8278+
data-transform="updateExample"
8279+
data-result-for="Embedding JSON-LD in HTML with comments-original">
8280+
<!--
8281+
[{
8282+
"@id": "http://dbpedia.org/resource/John_Lennon",
8283+
"http://xmlns.com/foaf/0.1/name": [{"@value": "John Lennon"}],
8284+
"http://schema.org/birthDate": [
8285+
{"@value": "1940-10-09", "@type": "http://www.w3.org/2001/XMLSchema#date"}
8286+
],
8287+
"http://schema.org/spouse": [
8288+
{"@id": "http://dbpedia.org/resource/Cynthia_Lennon"}
8289+
]
8290+
}]
8291+
-->
8292+
</pre>
8293+
<table class="statements"
8294+
data-result-for="Embedding JSON-LD in HTML with comments-expanded"
8295+
data-to-rdf>
8296+
<thead><tr><th>Subject</th><th>Property</th><th>Value</th><th>Value Type</th></tr></thead>
8297+
<tbody>
8298+
<tr><td>http://dbpedia.org/resource/John_Lennon</td><td>foaf:name</td><td>John Lennon</td><td>&nbsp;</td></tr>
8299+
<tr><td>http://dbpedia.org/resource/John_Lennon</td><td>schema:birthDate</td><td>1940-10-09</td><td>xsd:date</td></tr>
8300+
<tr><td>http://dbpedia.org/resource/John_Lennon</td><td>schema:spouse</td><td>http://dbpedia.org/resource/Cynthia_Lennon</td><td>&nbsp;</td></tr>
8301+
</tbody>
8302+
</table>
8303+
<pre class="turtle"
8304+
data-content-type="text/turtle"
8305+
data-transform="updateExample"
8306+
data-result-for="Embedding JSON-LD in HTML with comments-expanded"
8307+
data-to-rdf>
8308+
<!--
8309+
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
8310+
@prefix schema: <http://schema.org/> .
8311+
@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .
8312+
8313+
<http://dbpedia.org/resource/John_Lennon> foaf:name "John Lennon";
8314+
schema:birthDate "1940-10-09"^^xsd:date;
8315+
schema:spouse <http://dbpedia.org/resource/Cynthia_Lennon> .
8316+
-->
8317+
</pre>
8318+
</aside>
82008319

82018320
<p>Defining how such data may be used is beyond the scope of this specification.
82028321
The embedded JSON-LD document might be extracted as is or, e.g., be
82038322
interpreted as RDF.</p>
82048323

8205-
<p>If JSON-LD content is extracted as RDF [[RDF11-CONCEPTS]], it should be expanded into an
8324+
<p>If JSON-LD content is extracted as RDF [[RDF11-CONCEPTS]], it MUST be expanded into an
82068325
<a>RDF Dataset</a> using the
82078326
<a data-cite="JSON-LD11-API#deserialize-json-ld-to-rdf-algorithm">Deserialize JSON-LD to RDF Algorithm</a>
8208-
[[JSON-LD11-API]].</p>
8327+
[[JSON-LD11-API]]. All <a data-cite="HTML52/semantics-scripting.html#the-script-element">script elements</a>
8328+
with <code>type</code> <code>application/ld+json</code> MUST be processed and merged
8329+
into a single <a>dataset</a> with equivalent <a>blank node identifiers</a> contained in
8330+
separate script elements treated as if they were in a single document (i.e.,
8331+
blank nodes are shared between different JSON-LD script elements).</p>
8332+
8333+
<aside class="example ds-selector-tabs"
8334+
title="Combining multiple JSON-LD script elements into a single dataset">
8335+
<div class="selectors">
8336+
<button class="selected" data-selects="original">Original</button>
8337+
<button data-selects="statements">Statements</button>
8338+
<button data-selects="turtle">Turtle</button>
8339+
</div>
8340+
<pre class="original selected" data-transform="updateExample"
8341+
data-content-type="text/html">
8342+
<!--
8343+
<p>Data described using FOAF</p>
8344+
<script type="application/ld+json">
8345+
{
8346+
"@context": {
8347+
"@vocab": "http://xmlns.com/foaf/0.1/"
8348+
},
8349+
"@id": "http://greggkellogg.net/foaf#me",
8350+
"@type": "Person",
8351+
"name": "Gregg Kellogg"
8352+
}
8353+
</script>
8354+
8355+
<p>Data described using schema.org</p>
8356+
<script type="application/ld+json">
8357+
{
8358+
"@context": {
8359+
"@vocab": "http://schema.org/"
8360+
},
8361+
"@id": "http://greggkellogg.net/foaf#me",
8362+
"@type": "Person",
8363+
"name": "Gregg Kellogg"
8364+
}
8365+
</script>
8366+
-->
8367+
</pre>
8368+
<table class="statements"
8369+
data-result-for="Combining multiple JSON-LD script elements into a single dataset-original"
8370+
data-to-rdf>
8371+
<thead><tr><th>Subject</th><th>Property</th><th>Value</th></tr></thead>
8372+
<tbody>
8373+
<tr><td>http://greggkellogg.net/foaf#me</td><td>rdf:type</td><td>foaf:Person</td></tr>
8374+
<tr><td>http://greggkellogg.net/foaf#me</td><td>rdf:type</td><td>schema:Person</td></tr>
8375+
<tr><td>http://greggkellogg.net/foaf#me</td><td>foaf:name</td><td>Gregg Kellogg</td></tr>
8376+
<tr><td>http://greggkellogg.net/foaf#me</td><td>schema:name</td><td>Gregg Kellogg</td></tr>
8377+
</tbody>
8378+
</table>
8379+
<pre class="turtle"
8380+
data-content-type="text/turtle"
8381+
data-transform="updateExample"
8382+
data-result-for="Combining multiple JSON-LD script elements into a single dataset-original"
8383+
data-to-rdf>
8384+
<!--
8385+
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
8386+
@prefix schema: <http://schema.org/> .
8387+
8388+
<http://greggkellogg.net/foaf#me> a foaf:Person, schema:Person;
8389+
foaf:name "Gregg Kellogg";
8390+
schema:name "Gregg Kellogg" .
8391+
-->
8392+
</pre>
8393+
</aside>
8394+
8395+
<p>Otherwise, unless a specific script is targeted
8396+
(see <a href="#locating-a-specific-json-ld-script-element" class="sectionRef"></a>),
8397+
only the first script element of <code>type</code> <code>application/ld+json</code> is used.</p>
8398+
8399+
<p>When processing a JSON-LD
8400+
<a data-cite="HTML52/semantics-scripting.html#the-script-element">script element</a>,
8401+
only the resolved document location of the
8402+
containing HTML document is used to establish the default <a>base IRI</a> of the enclosed
8403+
JSON-LD content.</p>
8404+
8405+
<section><h3>Locating a Specific JSON-LD Script Element</h3>
8406+
<p>A specific
8407+
<a data-cite="HTML52/semantics-scripting.html#the-script-element">script element</a>
8408+
within an HTML document may be located using
8409+
a fragment identifier matching the <a data-cite="DOM#concept-id">unique identifier</a>
8410+
of the script element within the HTML document located by a URL (see [[!DOM]]).</p>
8411+
<p>For example, given an HTML document located at h<code>ttp://example.com/document</code>,
8412+
a script element identified by "schema" can be targeted using the URL
8413+
<code>http://example.com/document#schema</code>.</p>
8414+
8415+
<aside class="example ds-selector-tabs"
8416+
title="Targeting a specific script element by id">
8417+
<div class="selectors">
8418+
<button class="selected" data-selects="original">Original</button>
8419+
<button data-selects="statements">Statements</button>
8420+
<button data-selects="turtle">Turtle</button>
8421+
</div>
8422+
<p>Targeting a script element with id "schema"</p>
8423+
<pre class="original selected nohighlight" data-transform="updateExample"
8424+
data-content-type="text/html">
8425+
<!--
8426+
<p>Data described using FOAF</p>
8427+
<script ****id="foaf"**** type="application/ld+json">
8428+
{
8429+
"@context": {
8430+
"@vocab": "http://xmlns.com/foaf/0.1/"
8431+
},
8432+
"@id": "http://greggkellogg.net/foaf#me",
8433+
"@type": "Person",
8434+
"name": "Gregg Kellogg"
8435+
}
8436+
</script>
8437+
8438+
<p>Data described using schema.org</p>
8439+
<script ****id="schema"**** type="application/ld+json">
8440+
{
8441+
"@context": {
8442+
"@vocab": "http://schema.org/"
8443+
},
8444+
"@id": "http://greggkellogg.net/foaf#me",
8445+
"@type": "Person",
8446+
"name": "Gregg Kellogg"
8447+
}
8448+
</script>
8449+
-->
8450+
</pre>
8451+
<table class="statements"
8452+
data-result-for="Targeting a specific script element by id-original"
8453+
data-to-rdf
8454+
data-target="#schema">
8455+
<thead><tr><th>Subject</th><th>Property</th><th>Value</th></tr></thead>
8456+
<tbody>
8457+
<tr><td>http://greggkellogg.net/foaf#me</td><td>rdf:type</td><td>schema:Person</td></tr>
8458+
<tr><td>http://greggkellogg.net/foaf#me</td><td>schema:name</td><td>Gregg Kellogg</td></tr>
8459+
</tbody>
8460+
</table>
8461+
<pre class="turtle"
8462+
data-content-type="text/turtle"
8463+
data-transform="updateExample"
8464+
data-result-for="Targeting a specific script element by id-original"
8465+
data-to-rdf
8466+
data-target="#schema">
8467+
<!--
8468+
@prefix schema: <http://schema.org/> .
8469+
8470+
<http://greggkellogg.net/foaf#me> a schema:Person;
8471+
schema:name "Gregg Kellogg" .
8472+
-->
8473+
</pre>
8474+
</aside>
8475+
</section>
82098476
</section>
82108477

82118478
<section class="normative">

0 commit comments

Comments
 (0)