HTML - Data Block

About

data block ¹⁾ are a way to embed data in a html document.

Example

Ld-Json

The well known is ld-json data block

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "url": "http://www.example.com",
  "name": "Unlimited Ball Bearings Corp.",
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+1-401-555-1212",
    "contactType": "Customer service"
  }
}
</script>

Json

Inject json data in pre-rendered HTML

• Static pre-generated by the server (ie pre-rendering), the code runs at the DOMContentLoaded event (after the page has been parsed to be able to see the below data script tag)

document.addEventListener("DOMContentLoaded", function(){
  const userInfo = JSON.parse(document.getElementById("userData").text);
  console.log(userInfo);
})

• Inserted by the server (with server-side rendering) in the pre-rendered page via templating

<script id="userData" type="application/json">
{
    "userId":1,
    "userName":"Foo",
    "memberSince":"2022-05-15"
}
</script>

• Output:

Syntax

They are scripting element where the type attribute is set to a value that is not

• empty
• a known script mime (such as Javascript)
• module (ie a module)

Documentation / Reference