HTML-тег <noscript>
Тег <noscript> задаёт альтернативный контент для браузеров без поддержки скриптов. Описание тега и примеры использования.
Тег <noscript> определяет контент, который браузер показывает только при недоступности JavaScript — либо потому что браузер не поддерживает скрипты, либо потому что пользователь их отключил. Когда JavaScript включён, браузер игнорирует элемент <noscript> и ничего из него не отображает.
На этой странице рассматривается назначение <noscript>, допустимые места его размещения и способы использования для создания полноценного опыта для пользователей, у которых ваши скрипты не выполняются.
Когда использовать <noscript>
Современные интерфейсы во многом зависят от JavaScript, однако немалая доля запросов поступает с отключёнными скриптами: от пользователей, заботящихся о конфиденциальности, с расширениями вроде NoScript, из жёстко ограниченных корпоративных сред, при нестабильных соединениях, когда скрипт не смог загрузиться, а также от многих веб-краулеров. Тег <noscript> — стандартный инструмент для прогрессивного улучшения и плавной деградации: он позволяет создавать страницы, которые остаются полезными даже при отсутствии уровня JavaScript.
Типичные варианты использования:
- Замена виджета, отрисовываемого через JS (графика, живой ленты, интерактивной карты), статическим сообщением, ссылкой или запасным изображением.
- Предупреждение пользователя о том, что функция зависит от JavaScript, с указанием дальнейших действий.
- Предоставление альтернативы без JS, например простой формы
<form>, отправляющей данные на сервер вместоfetch.
Тесно связан с тегом <script>, который встраивает JavaScript, для которого <noscript> служит запасным вариантом — оба тега обычно пишутся вместе.
Где можно размещать <noscript>
В HTML5 тег <noscript> можно размещать как в <head>, так и в <body>. В HTML4 он был допустим только внутри <body>. Место размещения определяет, какой контент разрешён внутри него:
- Внутри
<head>допустимы только элементы<link>,<style>и<meta>. Так можно подключать альтернативные таблицы стилей или метаданные для случая без JS. - Внутри
<body>допустим любой потоковый контент — абзацы, изображения, ссылки, формы и т. д.
<noscript> внутри <head> (только <link>, <style>, <meta>)
Например, загрузить запасную таблицу стилей, которая оформляет контент, обычно скрытый до тех пор, пока JavaScript его не раскрывает:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<noscript>
<link rel="stylesheet" href="no-js.css" />
</noscript>
</head>
<body>
<p>Page content.</p>
</body>
</html><noscript> внутри <body> (любой потоковый контент)
В теле страницы можно использовать более насыщенный запасной контент. В следующем примере вместо виджета, который обычно формирует JavaScript, отображается статическое сообщение:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div id="chart">
<script>
document.getElementById("chart").textContent =
"Interactive chart loaded with JavaScript.";
</script>
<noscript>
<p>Charts require JavaScript. Please enable it to view live data,
or <a href="/report.csv">download the raw report</a> instead.</p>
</noscript>
</div>
</body>
</html>Когда JavaScript включён, <script> заменяет содержимое контейнера, а блок <noscript> ничего не выводит. Когда он отключён, скрипт не выполняется и пользователь видит статический абзац с рабочей ссылкой для скачивания.
Синтаксис
Тег <noscript> является парным. Запасной контент размещается между открывающим <noscript> и закрывающим </noscript> тегами.
<noscript>Sorry, your browser doesn’t support JavaScript!</noscript>Атрибуты
Тег <noscript> поддерживает глобальные атрибуты и атрибуты событий.