About
Data in HTML may be found in the following places:
- Statically (ie inline with the HTML document)
- in an URL value with a data scheme to inline resource
- in a data block
- in a literal expression in a script element
- Dynamically (ie via a javascript expression)
- with a json_module
Example
Script Literal expression
When creating you HTML document, you can add/inject a javascript expression that contains your data.
For instance:
- The injected script element with the data
<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); }