HTML - Data Block

About

data block 1) 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);
})
<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


Powered by ComboStrap