Skip to content

Commit 5160552

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 04fe116 commit 5160552

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
@@ -8329,41 +8329,308 @@ <h3>Graph Containers</h3>
83298329
ignored for such documents.</p>
83308330
</section>
83318331

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

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

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

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

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

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

83698636
<section class="normative">

0 commit comments

Comments
 (0)