Тег <script> используется для встраивания скриптов на страницу, которые могут изменять её содержимое и поведение. Этот тег позволяет загружать скрипты из внешних файлов или встраивать их прямо в HTML-код страницы.

Синтаксис тега <script>

<!-- Встраивание скрипта в HTML-код страницы -->
<script>
    // JavaScript-код
</script>

<!-- Загрузка скрипта из внешнего файла -->
<script src="path/to/script.js"></script>

Спецификация HTML

Тег <script> является частью спецификации HTML Living Standard.

Семантический или нет

Тег <script> не считается семантическим, так как не придает никакого конкретного значения содержимому.

Примеры использования

Загрузка скрипта из внешнего файла:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример использования тега script</title>
    <!-- Загрузка скрипта из внешнего файла -->
    <script src="path/to/script.js"></script>
</head>
<body>
    <!-- HTML-код страницы -->
</body>
</html>

Встраивание скрипта в HTML-код страницы:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример использования тега script</title>
    <!-- Встраивание скрипта в HTML-код страницы -->
    <script>
        // JavaScript-код
    </script>
</head>
<body>
    <!-- HTML-код страницы -->
</body>
</html>

Использование атрибута async:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример использования атрибута async</title>
    <!-- Загрузка скрипта с атрибутом async -->
    <script src="path/to/script.js" async></script>
</head>
<body>
    <!-- HTML-код страницы -->
</body>
</html>

Для чего использовать тег <script>

  • Добавление функциональности на страницу, например, для создания анимации или проверки правильности заполнения формы.
  • Аналитика и отслеживание действий пользователей в сервисах, таких как Google Analytics.
  • Подключение сторонних библиотек, таких как jQuery или React.
  • Динамическая подгрузка данных без перезагрузки страницы с использованием технологии AJAX или WebSockets.

Атрибуты тега <script>

  • async — указывает, что скрипт асинхронный, выполнение скрипта не останавливает загрузку страницы.
  • defer — указывает, что скрипт отложенный, выполнение скрипта происходит после загрузки страницы.
  • src — путь к файлу скрипта, который нужно загрузить.
  • type — тип скрипта.
  • nomodule — предотвращает выполнение скрипта в браузерах, поддерживающих модульные скрипты.
  • crossorigin — способ обработки сквозных запросов.
  • integrity — метаданные для проверки целостности субресурсов [SRI].
  • referrerpolicy — правила использования ссылок для поиска.
  • blocking — позволяет потенциально блокировать рендеринг.
  • fetchpriority — приоритет для запущенных элементом запросов.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

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

Поддержка браузерами

Тег <script> поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.

Альтернативные теги

Тег <script> является основным тегом для загрузки и выполнения JavaScript на веб-странице. Вместо него можно использовать атрибут onclick для выполнения простых скриптов прямо в HTML-коде.

Чем заменить тег

Тег <script> нельзя заменить другим тегом.

Актуальность

Тег <script> является актуальным и широко используется в веб-разработке.


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023