Современные требования к тегу <script> в HTML: type, CDATA

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

В HTML5 использование атрибута type="text/javascript" при записи тегов <script> является излишним. MIME-тип по умолчанию для этих тегов — JavaScript. Поэтому это указание можно без проблем пропустить, чтобы код был проще и современнее:

<script>
  // Здесь идёт работа с чистым JavaScript!
</script>

Взлёт JavaScript в HTML

С момента появления Netscape 2 JavaScript стал стандартным языком скриптов для браузеров. Этот продолжительный период привёл к тому, что современные браузеры теперь по умолчанию интерпретируют содержимое тегов <script> как JavaScript, даже если атрибут type не указан. Такое упрощение делает код более чистым и оптимизированным.

Когда использовать CDATA в XHTML

В HTML5 атрибут type зачастую не играет никакой роли, но в XHTML документах может потребоваться более аккуратный подход. Если ваш JavaScript содержит специальные символы HTML, например, < или &, следует использовать секцию CDATA:

<script>//<![CDATA[
  var spinach = "<delicious>";
  // Папай вряд ли остался бы равнодушным 💪
//]]></script>

Если содержимое скрипта не является JavaScript (например, используется для шаблонов или хранения данных в формате JSON), то атрибут type поможет подобающим образом классифицировать эти данные:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Jane Doe",
  // Приветствуем, Джейн 👋
}
</script>

Прощайте, старомодные подходы

Раньше HTML-комментарии вида <!-- использовались для скрытия кода от устаревших браузеров, не поддерживавших тег <script>. Однако теперь современные браузеры обеспечивают корректную обработку скриптов, и такие комментарии больше не требуются. Кроме того, в HTML 4.01 было необходимо указывать MIME-тип, как, например, text/javascript, но в HTML5 это уже не актуально.

Когда type="text/javascript" всё же может быть полезным

Хотя для HTML5 это, как правило, излишне, некоторые организации могут продолжать использовать атрибут type="text/javascript" по историческим или процедурным причинам. Ещё одним убедительным аргументом для указания атрибута type может быть необходимость точного управления разными видами скриптов в сложных веб-приложениях.

За кулисами минификации

При оптимизации веб-страниц инструменты минификации обычно удаляют атрибут type="text/javascript" в стремлении улучшить производительность. В самом деле, это соответствует современным стандартам и не приносит технических преимуществ.

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

Визуальное представление необходимости использования атрибута type в тегах <script>:

Современные браузеры (💻): HTML5

Классический стиль (🖼️): <script type="text/javascript">

HTML5 воспринимает каждый тег <script> как произведение современного искусства, автоматически понимая, что речь идёт о text/javascript.

Без type: 💻 <script> // Неявно воспринимается как 🖼️
С type:    💻 <script type="text/javascript"> // "Конечно, перед нами 🖼️"

Завершение:
В HTML5 добавление `type` к скриптам – это как бы уточнение что ваша собака, Фидо, – это "животное". Избыточно. Ведь мы и так знаем, что Фидо – самый хороший мальчик 🐶

Погружение в детали: устоявшиеся практики и документация

Официальные руководства и инструкции от лидеров отрасли всё ещё могут включать атрибут type, хотя технически это уже не нужно. Это может быть следствием верности устаревшему стилю или сознательным выбором в пользу ясности и понятности. Всегда важно быть в курсе последних стандартов HTML и лучших практик, чтобы работать по последним тенденциям.

Когда charset всё ещё актуален

Иногда вы можете встретить атрибут charset в теге <script>, который указывает кодировку символов скрипта. Несмотря на кажущуюся полезность, современные подходы предпочитают кодировку UTF-8, что делает использование charset нецелесообразным.

Продвинутое использование MIME-типов

Тем, кто хочет углубиться в тему, будет интересно узнать, что официальным MIME-типом для JavaScript по стандарту IETF является 'application/javascript', согласно определению в RFC 4329. Однако на практике смену MIME-типов в тегах <script> оставляют для случаев работы с данными, которые не предназначены для исполнения, например, с шаблонами или JSON.

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

1. <script>: Элемент Script – HTML: HyperText Markup Language | MDN — Обстоятельное руководство от MDN по элементу <script> и связанным с ним практикам.
2. HTML Standard — Официальная спецификация элемента <script> в HTML.
3. Тег script в HTML – W3Schools — Учебник и справочник от W3Schools по использованию тега <script>, с примерами.
4. Какой MIME-тип для javascript стоит использовать в атрибуте type тега script? – Stack Overflow — Дискуссия о правильном применении MIME-типов JavaScript в сообществе Stack Overflow.
5. Устранение JavaScript, замедляющего загрузку | Google для разработчиков — Рекомендации Google по оптимизации страниц, загрузка которых замедляется из-за JavaScript. Важно помнить про скорость 🏎️
6. RFC 4329 – Scripting Media Types — Официальный документ IETF, подробно описывающий медиа-тип 'application/javascript'.
7. Различия между HTML5 и HTML4 — Детальное сравнение скриптовых возможностей HTML4 и HTML5, похожее на руководство "Что нового".