Атрибут type для тега script: text/javascript и другие

Раздел: Подключение скриптов -> Атрибуты тега script

Настройка типа скрипта с помощью атрибута type

Основное эффективное решение

В современной разметке HTML5 атрибут type для тега <script> можно не указывать, если используется JavaScript. Браузер по умолчанию интерпретирует содержимое как скрипт на языке JavaScript. Это упрощает код и улучшает читаемость. Если требуется явно задать тип, рекомендуется использовать type="text/javascript" для обратной совместимости со старыми браузерами (например, Internet Explorer).

<!-- Современный подход: без type -->
<script src="app.js"></script>

<!-- Для обратной совместимости -->
<script type="text/javascript" src="legacy.js"></script>

Script type javascript (атрибут type="text/javascript" для тега script)

При отсутствии атрибута браузер обрабатывает скрипт как JavaScript (MIME-тип text/javascript). Это поведение стандартизировано в HTML5.

Зачем опускать атрибут type в современных проектах?

Опускание атрибута type сокращает объем разметки, уменьшает вероятность опечаток и соответствует рекомендациям W3C. Все современные браузеры поддерживают такое поведение. Если проект нацелен на браузеры, выпущенные после 2010 года, этот вариант является предпочтительным.

<script>
  console.log("Без type работает нормально");
</script>

Типичные ошибки:

Указание устаревшего атрибута language вместо type.
Пропуск закрывающего тега </script>.

Когда требуется явно указывать text/javascript?

Явное указание type="text/javascript" необходимо при использовании строгого DOCTYPE HTML4.01 или XHTML, а также для гарантированной работы в очень старых браузерах (например, Internet Explorer 6-8). В таких средах отсутствие атрибута может привести к игнорированию скрипта.

<script type="text/javascript">
  alert("Старый браузер");
</script>

Возможные проблемы:

В HTML5 валидатор не выдаст ошибку, но такое указание избыточно.
Если забыть кавычки или написать type=text/javascript, браузер может интерпретировать это как type="text".

Какой MIME-тип соответствует современному JavaScript?

Согласно спецификации, официальным MIME-типом для JavaScript является application/javascript. Его также можно указывать в атрибуте type. Однако на практике разницы между text/javascript и application/javascript нет - браузеры обрабатывают оба значения одинаково.

<script type="application/javascript">
  console.log("MIME-тип application/javascript");
</script>

Ошибка:

Использование type="application/x-javascript" (устарел) может привести к непредсказуемому поведению.

Как подключить ES-модуль с помощью type?

Для модулей ECMAScript (ES modules) используется значение type="module". При этом скрипт загружается с семантикой defer (выполняется после парсинга документа) и поддерживает импорты. Это не относится напрямую к text/javascript, но показывает разнообразие атрибута.

<script type="module">
  import { hello } from './utils.js';
  hello();
</script>

Распространенная ошибка:

Попытка использовать модульные скрипты с обычным type="text/javascript" - импорты не будут работать.

Какие устаревшие значения type могут привести к ошибкам?

В ранних версиях HTML применялись значения text/ecmascript, text/jscript, text/vbscript. Современные браузеры не поддерживают их, и скрипты с такими атрибутами игнорируются. Например:

<script type="text/ecmascript">
  console.log("Этот код не выполнится");
</script>

Последствия:

Скрипт не загрузится, отсутствие ошибок в консоли.
Трата времени на отладку.

Расширенные примеры использования атрибута type

Проверка поддержки различных MIME-типов в браузере

Следующий код создает элементы <script> с разными значениями type и выводит, был ли скрипт выполнен:

Пример

<!DOCTYPE html>
<html>
<head>
  <title>Тестирование type</title>
</head>
<body>
<div id="output"></div>
<script>
  const tests = [
    null,
    'text/javascript',
    'application/javascript',
    'module',
    'text/ecmascript'
  ];
  let executed = [];
  function testType(value) {
    const script = document.createElement('script');
    if (value) script.type = value;
    script.textContent = `
      window.__executed${executed.length} = true;
    `;
    document.body.appendChild(script);
    executed.push(value);
  }
  tests.forEach((v, i) => {
    window[`__executed${i}`] = false;
    testType(v);
  });
  setTimeout(() => {
    const out = document.getElementById('output');
    tests.forEach((v, i) => {
      const status = window[`__executed${i}`] ? 'выполнен' : 'проигнорирован';
      out.innerHTML += '<p>type="' + (v || '(отсутствует)') + '" - ' + status + '</p>';
    });
  }, 100);
</script>
</body>
</html>

Результат (ожидаемый в современном браузере):
<p>type="(отсутствует)" - выполнен</p>
<p>type="text/javascript" - выполнен</p>
<p>type="application/javascript" - выполнен</p>
<p>type="module" - выполнен (с задержкой, может появиться позже)</p>
<p>type="text/ecmascript" - проигнорирован</p>

Использование type для inline-скриптов с разными языками (демонстрация)

Хотя JavaScript является стандартом, теоретически можно указать другой язык, например, VBScript (только в Internet Explorer). Пример для демонстрации нерабочего кода в современных браузерах:

Пример

<script type="text/vbscript">
  MsgBox "Это VBScript. В современных браузерах не сработает."
</script>

В браузере Chrome/Firefox: скрипт проигнорирован, окно не появляется.

Комбинирование type="module" и обычных скриптов

На одной странице можно использовать модульные и обычные скрипты. Обратите внимание, что модули выполняются с семантикой defer, а обычные - блокируют парсинг (если нет async/defer).

Пример

<!DOCTYPE html>
<html>
<head>
  <title>Смешанные скрипты</title>
</head>
<body>
  <p>Начало страницы</p>
  <script type="text/javascript">
    console.log("Обычный скрипт (blocking)");
  </script>
  <script type="module">
    console.log("Модульный скрипт (defer)");
  </script>
  <script>
    console.log("Скрипт без type (также blocking)");
  </script>
  <p>Конец страницы</p>
</body>
</html>

Порядок вывода в консоль (зависит от браузера, но обычно):
"Обычный скрипт (blocking)"
"Скрипт без type (также blocking)"
"Модульный скрипт (defer)"

Динамическое изменение атрибута type через JavaScript

Можно программно создавать скрипты с нужным type. Это полезно для загрузки полифиллов или модулей по условию.

Пример

function loadScript(url, asModule) {
  const script = document.createElement('script');
  script.src = url;
  if (asModule) {
    script.type = 'module';
  } else {
    // Оставляем type по умолчанию (будет text/javascript)
  }
  document.body.appendChild(script);
}
// Пример использования:
loadScript('modern.js', true);   // загрузится как модуль
loadScript('fallback.js', false); // загрузится как обычный скрипт

Результат: в теге <script> будет атрибут type="module" для первого вызова, для второго - без type.

Атрибут type="text/javascript" для тега script - comments

Script type javascript (javascript)