HTML - How to embed data in a HTML document


Data in HTML may be found in the following places:


Script Literal expression

When creating you HTML document, you can add/inject a javascript expression that contains your data.

For instance:

let data = {
   property: "injectedValue"
  • You can then use it with your code or library
console.log(`The value injected is:  ${}`);
  • Output:

Data Block

Example of a 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"

Data Scheme

With the url data scheme

Example with a hello world text encode:

<a href="data:text/plain,SGVsbG8gV29ybGQgIQ==" download="hello-world.txt">Download hello-world.txt</a>

Data Attribute

In the HTML data attribute where you can store data for a element.


Json Module

You can also import data via a JSON module

 import peopleInSpace from "" assert { type: "json" };

 const list = document.querySelector("#people-in-space");
 for (const { craft, name } of peopleInSpace.people) {
   const li = document.createElement("li");
   li.textContent = `${name} / ${craft}`;

Powered by ComboStrap