HTML - Data Block


data block 1) are a way to embed data in a html document.



The well known is ld-json data block

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


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);
<script id="userData" type="application/json">
  • Output:


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

Discover More
How to store and use data in HTML

This article shows where you can store and use data
Web Page Metadata - Json-Ld syntax

is a web metadata format that you can add in the head section of a web page in a JSON format as a html data block. With the ld+json data block: where: ...

Share this page:
Follow us:
Task Runner