<script>
- 25 января 2023
Тег <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 на веб-странице. Вместо него можно использовать атрибут
для выполнения простых скриптов прямо в HTML-коде.onclick
Чем заменить тег
Тег <script>
нельзя заменить другим тегом.
Актуальность
Тег <script>
является актуальным и широко используется в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023