Skip to content

Commit 10b56e9

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 d8e9488 commit 10b56e9

File tree

1 file changed

+287
-20
lines changed

1 file changed

+287
-20
lines changed

‎index.html

Lines changed: 287 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8324,41 +8324,308 @@ <h3>Graph Containers</h3>
83248324
ignored for such documents.</p>
83258325
</section>
83268326

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

83298329
<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.
83308330
This way, JSON-LD content can be easily embedded in HTML [[HTML52]] by placing
83318331
it in a script element with the <code>type</code> attribute set to
83328332
<code>application/ld+json</code>.</p>
83338333

8334-
<pre class="example nohighlight" data-transform="updateExample"
8335-
data-content-type="text/html"
8336-
data-ignore
8337-
title="Embedding JSON-LD in HTML">
8338-
<!--
8339-
****<script type="application/ld+json">****
8340-
{
8341-
"@context": "https://json-ld.org/contexts/person.jsonld",
8342-
"@id": "http://dbpedia.org/resource/John_Lennon",
8343-
"name": "John Lennon",
8344-
"born": "1940-10-09",
8345-
"spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
8346-
}
8347-
****</script>****
8348-
-->
8349-
</pre>
8334+
<aside class="example ds-selector-tabs"
8335+
title="Embedding JSON-LD in HTML">
8336+
<div class="selectors">
8337+
<button class="selected" data-selects="original">Original</button>
8338+
<button data-selects="expanded">Expanded</button>
8339+
<button data-selects="statements">Statements</button>
8340+
<button data-selects="turtle">Turtle</button>
8341+
</div>
8342+
<pre class="original selected nohighlight" data-transform="updateExample"
8343+
data-content-type="text/html">
8344+
<!--
8345+
****<script type="application/ld+json">****
8346+
{
8347+
"@context": "https://json-ld.org/contexts/person.jsonld",
8348+
"@id": "http://dbpedia.org/resource/John_Lennon",
8349+
"name": "John Lennon",
8350+
"born": "1940-10-09",
8351+
"spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
8352+
}
8353+
****</script>****
8354+
-->
8355+
</pre>
8356+
<pre class="expanded"
8357+
data-transform="updateExample"
8358+
data-result-for="Embedding JSON-LD in HTML-original">
8359+
<!--
8360+
[{
8361+
"@id": "http://dbpedia.org/resource/John_Lennon",
8362+
"http://xmlns.com/foaf/0.1/name": [{"@value": "John Lennon"}],
8363+
"http://schema.org/birthDate": [
8364+
{"@value": "1940-10-09", "@type": "http://www.w3.org/2001/XMLSchema#date"}
8365+
],
8366+
"http://schema.org/spouse": [
8367+
{"@id": "http://dbpedia.org/resource/Cynthia_Lennon"}
8368+
]
8369+
}]
8370+
-->
8371+
</pre>
8372+
<table class="statements"
8373+
data-result-for="Embedding JSON-LD in HTML-expanded"
8374+
data-to-rdf>
8375+
<thead><tr><th>Subject</th><th>Property</th><th>Value</th><th>Value Type</th></tr></thead>
8376+
<tbody>
8377+
<tr><td>http://dbpedia.org/resource/John_Lennon</td><td>foaf:name</td><td>John Lennon</td><td>&nbsp;</td></tr>
8378+
<tr><td>http://dbpedia.org/resource/John_Lennon</td><td>schema:birthDate</td><td>1940-10-09</td><td>xsd:date</td></tr>
8379+
<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>
8380+
</tbody>
8381+
</table>
8382+
<pre class="turtle"
8383+
data-content-type="text/turtle"
8384+
data-transform="updateExample"
8385+
data-result-for="Embedding JSON-LD in HTML-expanded"
8386+
data-to-rdf>
8387+
<!--
8388+
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
8389+
@prefix schema: <http://schema.org/> .
8390+
@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .
8391+
8392+
<http://dbpedia.org/resource/John_Lennon> foaf:name "John Lennon";
8393+
schema:birthDate "1940-10-09"^^xsd:date;
8394+
schema:spouse <http://dbpedia.org/resource/Cynthia_Lennon> .
8395+
-->
8396+
</pre>
8397+
</aside>
83508398

83518399
<p>Depending on how the HTML document is served, certain strings may need
8352-
to be escaped.</p>
8400+
to be escaped. See
8401+
<a href="https://www.w3.org/TR/html52/semantics-scripting.html#restrictions-for-contents-of-script-elements">
8402+
Restrictions for contents of <code>script</code> elements
8403+
</a> in [[!HTML52]] for details. In particular, the content MAY be enclosed
8404+
in the HTML comment open (<code>&lt;!--</code>) and comment close (<code>--&gt;</code>) text sequences</p>
8405+
8406+
<aside class="example ds-selector-tabs"
8407+
title="Embedding JSON-LD in HTML with comments">
8408+
<div class="selectors">
8409+
<button class="selected" data-selects="original">Original</button>
8410+
<button data-selects="expanded">Expanded</button>
8411+
<button data-selects="statements">Statements</button>
8412+
<button data-selects="turtle">Turtle</button>
8413+
</div>
8414+
<pre class="original selected" data-transform="updateExample"
8415+
data-content-type="text/html">
8416+
<!--
8417+
<script type="application/ld+json">
8418+
< !--
8419+
{
8420+
"@context": "https://json-ld.org/contexts/person.jsonld",
8421+
"@id": "http://dbpedia.org/resource/John_Lennon",
8422+
"name": "John Lennon",
8423+
"born": "1940-10-09",
8424+
"spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
8425+
}
8426+
-- >
8427+
</script>
8428+
-->
8429+
</pre>
8430+
<pre class="expanded"
8431+
data-transform="updateExample"
8432+
data-result-for="Embedding JSON-LD in HTML with comments-original">
8433+
<!--
8434+
[{
8435+
"@id": "http://dbpedia.org/resource/John_Lennon",
8436+
"http://xmlns.com/foaf/0.1/name": [{"@value": "John Lennon"}],
8437+
"http://schema.org/birthDate": [
8438+
{"@value": "1940-10-09", "@type": "http://www.w3.org/2001/XMLSchema#date"}
8439+
],
8440+
"http://schema.org/spouse": [
8441+
{"@id": "http://dbpedia.org/resource/Cynthia_Lennon"}
8442+
]
8443+
}]
8444+
-->
8445+
</pre>
8446+
<table class="statements"
8447+
data-result-for="Embedding JSON-LD in HTML with comments-expanded"
8448+
data-to-rdf>
8449+
<thead><tr><th>Subject</th><th>Property</th><th>Value</th><th>Value Type</th></tr></thead>
8450+
<tbody>
8451+
<tr><td>http://dbpedia.org/resource/John_Lennon</td><td>foaf:name</td><td>John Lennon</td><td>&nbsp;</td></tr>
8452+
<tr><td>http://dbpedia.org/resource/John_Lennon</td><td>schema:birthDate</td><td>1940-10-09</td><td>xsd:date</td></tr>
8453+
<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>
8454+
</tbody>
8455+
</table>
8456+
<pre class="turtle"
8457+
data-content-type="text/turtle"
8458+
data-transform="updateExample"
8459+
data-result-for="Embedding JSON-LD in HTML with comments-expanded"
8460+
data-to-rdf>
8461+
<!--
8462+
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
8463+
@prefix schema: <http://schema.org/> .
8464+
@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .
8465+
8466+
<http://dbpedia.org/resource/John_Lennon> foaf:name "John Lennon";
8467+
schema:birthDate "1940-10-09"^^xsd:date;
8468+
schema:spouse <http://dbpedia.org/resource/Cynthia_Lennon> .
8469+
-->
8470+
</pre>
8471+
</aside>
83538472

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

8358-
<p>If JSON-LD content is extracted as RDF [[RDF11-CONCEPTS]], it should be expanded into an
8477+
<p>If JSON-LD content is extracted as RDF [[RDF11-CONCEPTS]], it MUST be expanded into an
83598478
<a>RDF Dataset</a> using the
83608479
<a data-cite="JSON-LD11-API#deserialize-json-ld-to-rdf-algorithm">Deserialize JSON-LD to RDF Algorithm</a>
8361-
[[JSON-LD11-API]].</p>
8480+
[[JSON-LD11-API]]. All <a data-cite="HTML52/semantics-scripting.html#the-script-element">script elements</a>
8481+
with <code>type</code> <code>application/ld+json</code> MUST be processed and merged
8482+
into a single <a>dataset</a> with equivalent <a>blank node identifiers</a> contained in
8483+
separate script elements treated as if they were in a single document (i.e.,
8484+
blank nodes are shared between different JSON-LD script elements).</p>
8485+
8486+
<aside class="example ds-selector-tabs"
8487+
title="Combining multiple JSON-LD script elements into a single dataset">
8488+
<div class="selectors">
8489+
<button class="selected" data-selects="original">Original</button>
8490+
<button data-selects="statements">Statements</button>
8491+
<button data-selects="turtle">Turtle</button>
8492+
</div>
8493+
<pre class="original selected" data-transform="updateExample"
8494+
data-content-type="text/html">
8495+
<!--
8496+
<p>Data described using FOAF</p>
8497+
<script type="application/ld+json">
8498+
{
8499+
"@context": {
8500+
"@vocab": "http://xmlns.com/foaf/0.1/"
8501+
},
8502+
"@id": "http://greggkellogg.net/foaf#me",
8503+
"@type": "Person",
8504+
"name": "Gregg Kellogg"
8505+
}
8506+
</script>
8507+
8508+
<p>Data described using schema.org</p>
8509+
<script type="application/ld+json">
8510+
{
8511+
"@context": {
8512+
"@vocab": "http://schema.org/"
8513+
},
8514+
"@id": "http://greggkellogg.net/foaf#me",
8515+
"@type": "Person",
8516+
"name": "Gregg Kellogg"
8517+
}
8518+
</script>
8519+
-->
8520+
</pre>
8521+
<table class="statements"
8522+
data-result-for="Combining multiple JSON-LD script elements into a single dataset-original"
8523+
data-to-rdf>
8524+
<thead><tr><th>Subject</th><th>Property</th><th>Value</th></tr></thead>
8525+
<tbody>
8526+
<tr><td>http://greggkellogg.net/foaf#me</td><td>rdf:type</td><td>foaf:Person</td></tr>
8527+
<tr><td>http://greggkellogg.net/foaf#me</td><td>rdf:type</td><td>schema:Person</td></tr>
8528+
<tr><td>http://greggkellogg.net/foaf#me</td><td>foaf:name</td><td>Gregg Kellogg</td></tr>
8529+
<tr><td>http://greggkellogg.net/foaf#me</td><td>schema:name</td><td>Gregg Kellogg</td></tr>
8530+
</tbody>
8531+
</table>
8532+
<pre class="turtle"
8533+
data-content-type="text/turtle"
8534+
data-transform="updateExample"
8535+
data-result-for="Combining multiple JSON-LD script elements into a single dataset-original"
8536+
data-to-rdf>
8537+
<!--
8538+
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
8539+
@prefix schema: <http://schema.org/> .
8540+
8541+
<http://greggkellogg.net/foaf#me> a foaf:Person, schema:Person;
8542+
foaf:name "Gregg Kellogg";
8543+
schema:name "Gregg Kellogg" .
8544+
-->
8545+
</pre>
8546+
</aside>
8547+
8548+
<p>Otherwise, unless a specific script is targeted
8549+
(see <a href="#locating-a-specific-json-ld-script-element" class="sectionRef"></a>),
8550+
only the first script element of <code>type</code> <code>application/ld+json</code> is used.</p>
8551+
8552+
<p>When processing a JSON-LD
8553+
<a data-cite="HTML52/semantics-scripting.html#the-script-element">script element</a>,
8554+
only the resolved document location of the
8555+
containing HTML document is used to establish the default <a>base IRI</a> of the enclosed
8556+
JSON-LD content.</p>
8557+
8558+
<section><h3>Locating a Specific JSON-LD Script Element</h3>
8559+
<p>A specific
8560+
<a data-cite="HTML52/semantics-scripting.html#the-script-element">script element</a>
8561+
within an HTML document may be located using
8562+
a fragment identifier matching the <a data-cite="DOM#concept-id">unique identifier</a>
8563+
of the script element within the HTML document located by a URL (see [[!DOM]]).</p>
8564+
<p>For example, given an HTML document located at h<code>ttp://example.com/document</code>,
8565+
a script element identified by "schema" can be targeted using the URL
8566+
<code>http://example.com/document#schema</code>.</p>
8567+
8568+
<aside class="example ds-selector-tabs"
8569+
title="Targeting a specific script element by id">
8570+
<div class="selectors">
8571+
<button class="selected" data-selects="original">Original</button>
8572+
<button data-selects="statements">Statements</button>
8573+
<button data-selects="turtle">Turtle</button>
8574+
</div>
8575+
<p>Targeting a script element with id "schema"</p>
8576+
<pre class="original selected nohighlight" data-transform="updateExample"
8577+
data-content-type="text/html">
8578+
<!--
8579+
<p>Data described using FOAF</p>
8580+
<script ****id="foaf"**** type="application/ld+json">
8581+
{
8582+
"@context": {
8583+
"@vocab": "http://xmlns.com/foaf/0.1/"
8584+
},
8585+
"@id": "http://greggkellogg.net/foaf#me",
8586+
"@type": "Person",
8587+
"name": "Gregg Kellogg"
8588+
}
8589+
</script>
8590+
8591+
<p>Data described using schema.org</p>
8592+
<script ****id="schema"**** type="application/ld+json">
8593+
{
8594+
"@context": {
8595+
"@vocab": "http://schema.org/"
8596+
},
8597+
"@id": "http://greggkellogg.net/foaf#me",
8598+
"@type": "Person",
8599+
"name": "Gregg Kellogg"
8600+
}
8601+
</script>
8602+
-->
8603+
</pre>
8604+
<table class="statements"
8605+
data-result-for="Targeting a specific script element by id-original"
8606+
data-to-rdf
8607+
data-target="#schema">
8608+
<thead><tr><th>Subject</th><th>Property</th><th>Value</th></tr></thead>
8609+
<tbody>
8610+
<tr><td>http://greggkellogg.net/foaf#me</td><td>rdf:type</td><td>schema:Person</td></tr>
8611+
<tr><td>http://greggkellogg.net/foaf#me</td><td>schema:name</td><td>Gregg Kellogg</td></tr>
8612+
</tbody>
8613+
</table>
8614+
<pre class="turtle"
8615+
data-content-type="text/turtle"
8616+
data-transform="updateExample"
8617+
data-result-for="Targeting a specific script element by id-original"
8618+
data-to-rdf
8619+
data-target="#schema">
8620+
<!--
8621+
@prefix schema: <http://schema.org/> .
8622+
8623+
<http://greggkellogg.net/foaf#me> a schema:Person;
8624+
schema:name "Gregg Kellogg" .
8625+
-->
8626+
</pre>
8627+
</aside>
8628+
</section>
83628629
</section>
83638630

83648631
<section class="normative">

0 commit comments

Comments
 (0)