How to store and use data in HTML

About

Data in HTML may be found in the following places:

Example

Script Literal expression

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

For instance:

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

Data Block

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

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.

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
</article>

Json Module

You can also import data via a JSON module

 import peopleInSpace from "http://api.open-notify.org/astros.json" 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}`;
   list.append(li);
 }





Discover More
HTML - (Flow|Body) Content

Most elements that are used in the body of documents and applications are categorized as flow content. Flow content consists of flow elements intermixed with normal character data. (ifbodhead...
HTML - Attribute

HTML An attribute in HTML is an XML attribute of an HTML element Attribute names are TR/html-markup/documents.htmlcase-insensitive. Classes and IDs are attributes used in the selection of element....
HTML - Data Block

data block are a way to embed data in a html document. The well known is ld-json data block Inject json data in pre-rendered HTML Static pre-generated by the server (ie pre-rendering), the...
HTML - Palpable content

As a general rule, elements whose content model allows any flow content or phrasing content should have at least one node in its contents: that is palpable content (Can be manipulated ?) and that...
HTML - Phrasing Content (Text)

Phrasing content is: the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs. Most elements that are categorized...
Javascript ES - Module Script (esm / .mjs)

The module implementation in Ecma Script (ES2015). An ES6 module is a Javascript file: automatically set in strict-mode with export statement and / or statement Everything inside a module is...



Share this page:
Follow us:
Task Runner