You don't know HTML: script и блок данных

Как известно, элемент <script> предназначен для выполнения встроенного или внешнего JavaScript-кода. Но на этом его применение не ограничивается.

У элемента <script> есть атрибут type, который принимает MIME-тип. Если атрибут type указан и его значение не равно module, importmap или text/javascript, то <script> определяет блок данных. Это можно использовать для встраивания любых данных в текстовом формате для их дальнейшего использования в клиентских скриптах.

Например, можно встроить JSON с данными сразу в исходную страницу, затем распарсить и использовать, чтобы не делать дополнительный запрос к внешнему API и не нагружать сеть. Некоторые фреймворки используют такой подход для передачи начальных данных на клиент.

<script id="data" type="application/json">
{
  "data": {
    "user": {
      "name": "Алексей"
      ...
    }
  }
}
</script>

Помимо JSON, можно встраивать любые другие текстовые данные: YAML, TOML, XML, HTML, SVG, CSV, Markdown, AsciiDoc, LaTeX, обычный текст и т.д. Но нужно быть осторожным с XML-подобными форматами, потому что некоторые сочетания символов внутри <script>, например <!--, <script или </script могут привести к непредсказуемому поведению.

Хранить данные в <script> удобно, потому что он по умолчанию не отображается, а семантика подразумевает хранение произвольных текстовых данных.

#ydkhtml