Тег <script> в HTML: атрибуты type и language или их опустить?

Быстрый ответ

В HTML5 используйте тег script для JavaScript-кода без указания атрибутов type и language:

<script>
  // Ваш JavaScript код здесь... Без использования "type" или "language". Максимум простоты.
</script>

Такое применение стало стандартным при внедрении JavaScript.

Ключевые случаи: когда могут понадобиться атрибуты

В HTML5 указание атрибута type для JavaScript не является обязательным, но существуют ситуации, когда это может быть необходимо:

При использовании других языков программирования

Для скриптов, выполненных не на JavaScript, например, на WebAssembly, атрибут type становится обязательным:

<script type="application/wasm">
  // Здесь располагается код WebAssembly, уже не так просто, как игра.
</script>

Подробнее об этом расскажет наш спикер на видео

При работе со старшими версиями HTML

Для отдельных DOCTYPE, таких как XHTML 1.0 или HTML 4.01, атрибут type требуется для валидации документа:

<script type="text/javascript">
  // Это сравнимо с вспоминанием добрых старых времён Walkman, XHTML 1.0 требует указания типа.
</script>

В разрезе политики безопасности содержимого (CSP)

Применение атрибута type может быть актуальным при определённых Политиках Безопасности Содержимого (CSP):

<script type="application/javascript">
  // Крепкий щит для вашего кода благодаря строгим политикам CSP.
</script>

Изучаем MIME-типы и валидацию

Понимание взаимодействия MIME-типов и JavaScript поможет обеспечить правильность и эффективность работы HTML-документов:

История атрибута language

Сегодня атрибут language считается устаревшим. Ранее он обозначал версию используемого языка скрипта. Нынче считается, что используется JavaScript:

<!-- Устаревшее использование атрибута "language" -->
<script type="text/javascript" language="JavaScript1.2">
  // Это ретроспектива в прошлое об аудиокассетах, очевидные отголоски былого времени.
</script>

Значимость MIME-типа

Атрибут type передаёт браузеру MIME-тип, который потребуется для обработки скрипта. К примеру, JavaScript-модули имеют отдельный MIME-тип:

<script type="module">
  // Здесь море возможностей с ES6 модулями, без сожаления о былых временах IE6.
</script>

Всё ради валидности

Если наличествует атрибут "type", это способствует валидации HTML-документа и соответствую веб-стандартам:

<!-- Указываем type для правильной валидации -->
<script type="text/javascript">
  // Ваш JavaScript код расположен здесь.
</script>

Если есть сомнения, стоит ли использовать атрибут type, лучшим решением будет выбор в пользу валидации, в частности при работе с XHTML или старыми версиями HTML.

Визуализация

Считайте, что это эволюция музыкального концерта. Прежде требовалось уточнять, какие инструменты необходимы. Теперь, если не указано иначе, подразумевается рок-концерт:

| Эпоха         | Инструкция                       | Инструменты       |
| ------------- | -------------------------------- | ----------------- |
| 1990-е        | Принести электрогитары (**type**) | 🎸🎸🎸            |
| Настоящее     | Принести инструменты (атрибут type **опущен**) | 🎤🎸🥁         |

Стоит перевести это на язык HTML <script>:

• Раньше (HTML4): Вы были бы вынуждены использовать <script type="text/javascript">.
• Сейчас (HTML5): Просто отказывайтесь от type или language и погрузитесь в мир музыки! 🎸

<!-- В прошлом, когда каждая деталь имела значение -->
<script type="text/javascript">
// ...и запускайте ваш ретро-плейлист…
</script>

<!-- Сейчас, когда можно следовать актуальным тенденциям -->
<script>
// ...просто играйте в ритм современного времени!
</script>

Это работает в разных браузерах?

Код должен безукоризненно функционировать в любом браузере, вот несколько рекомендаций для достижения этой цели:

Поддержка старых версий браузеров

Современные браузеры исправно справляются с отсутствием указания типа скрипта, однако для старых версий уточнение способствует поддержанию совместимости:

<!-- Встречаемся с архаическим Internet Explorer -->
<script type="text/javascript">
  // Здесь находится код старой школы.
</script>

Постепенное улучшение

Применяйте определение возможностей и условную загрузку для разнообразных браузеров:

<script>
  if (featureIsSupported()) {
    loadScript('new-feature.js', 'module');
  } else {
    loadScript('fallback.js', 'text/javascript');
  }
  // Такой же выбор, как между 4K и DVD в зависимости от скорости соединения.
</script>

Совместная работа в командах

В масштабных командах чёткое указание типа скрипта облегчает взаимопонимание:

<!-- При общей работе с кодом -->
<script type="text/javascript">
  // Очевидно, что это JavaScript, а не квантовая физика.
</script>

Полезные материалы

1. <script>: Элемент Script — HTML: HyperText Markup Language | MDN — Руководство по элементу <script> от MDN Web Docs.
2. HTML Стандарт — Официальная спецификация HTML с полной информацией о элементе <script> и его атрибутах.
3. HTML Стандарт — Заметки о том, в каком случае разрешается опустить атрибут 'type' в языках скриптов основываясь на официальной спецификации HTML.
4. Информация о BCP 47 — Описание BCP 47, где представлены лучшие практики применения языковых меток.
5. RFC 4329 – Типы медиа для скриптов — Детальный отчет о спецификациях медиа-типов для языков скриптов.
6. Сервис валидации разметки W3C — Индиспенсабельный инструмент для проверки HTML-документов на соответствие стандартам W3C.
7. Спецификация языка ECMAScript® 2019 — Подробное описание EMCAScript: изучите ключевые аспекты в контексте скриптования для HTML.