Тег <noscript> - зеркальная противоположность <script>: его содержимое браузер показывает ровно тогда, когда JavaScript выполнить НЕ может или НЕ должен - страница открыта со отключёнными скриптами, браузер не поддерживает их вовсе, или их запретила политика безопасности. Пока скрипты работают как обычно, содержимое <noscript> для посетителя не существует - браузер его не отображает и не выполняет. Прописывается и в <head>, и в body, но с разными правилами внутри.
В этой статье
<script>
document.write('Скрипт выполнился');
</script>
<noscript>
<p>Включите JavaScript, чтобы пользоваться сайтом.</p>
</noscript>Когда контент реально показывается
В обычном браузере с включённым JavaScript содержимое <noscript> не рендерится как разметка вообще - браузер хранит его как простой текст, без выполнения тегов внутри. Как только скрипты выполнять нельзя (отключены в настройках, заблокированы политикой безопасности или браузер их просто не понимает), правило меняется на обратное: теперь уже <script> игнорируется, а содержимое <noscript> парсится и показывается как настоящая разметка.
Пример: страница со скриптами и без них
Ниже настоящая переключаемая среда, а не имитация: внутренняя рамка - это отдельный документ в изолированном iframe, и переключатель буквально включает и выключает выполнение JavaScript именно в нём через атрибут sandbox:
Это тот же самый эффект, что происходит на настоящей странице у обычного посетителя: пока скрипты выполняются, браузер держит содержимое <noscript> как простой текст и никогда его не рисует, а как только выполнение становится невозможным - начинает читать эти же строки как обычную разметку и показывает их. Переключатель здесь работает через настоящий встроенный механизм браузера (sandbox у iframe), а не имитацию CSS-классом, но для содержимого <noscript> результат ровно тот же, что и в браузере читателя с отключённым JavaScript.
В head и в body - разные правила
Внутри <head> у <noscript> жёсткое ограничение: разрешены только теги <link>, <style> и <meta> - то есть ровно то, что и так обычно находится в head. Внутри body ограничений почти нет - подойдёт любая обычная разметка, текст, картинки, ссылки. Общее правило в обоих случаях одно: вложить один <noscript> в другой нельзя.
<head>
<noscript>
<link rel="stylesheet" href="no-js.css">
</noscript>
</head>
<body>
<noscript>
<p>Часть функций сайта работает только с включённым JavaScript.</p>
</noscript>
</body>В первом блоке подключается отдельный CSS-файл, который применится только без JavaScript - например, чтобы принудительно показать скрытые до этого элементы интерфейса. Во втором - обычное текстовое сообщение внутри body, куда можно вставлять что угодно из обычной разметки, вплоть до целого блока с альтернативной версией контента.
Атрибуты тег noscript
С атрибутами у <noscript> особая ситуация: собственных у него нет вообще - только универсальные, общие для любого тега (class, id, style, lang, dir и подобные). Ни src, ни type, ни чего-то, что управляло бы именно его поведением, в спецификации не предусмотрено - единственное, что решает, показывать содержимое или нет, это состояние JavaScript в браузере у конкретного посетителя, а не атрибут на самом теге.
Где это применяют на практике
Практического спроса на этот тег почти нет — JavaScript отключают единицы посетителей, а на большинстве сайтов <noscript> вообще не используется. Но там, где он всё же нужен, задачи обычно одни и те же: запасной способ учёта посетителей (например, изображение-пиксель аналитики, которое сработает и без JS), предупреждение о том, что часть функций сайта работает только со включёнными скриптами, или, на сайтах, полностью зависящих от JavaScript (SPA), - ссылка на статичную версию содержимого. Google и другие поисковики честно индексируют текст внутри <noscript> как обычную разметку, но это не повод дублировать в нём весь контент страницы "на всякий случай" - несколько строк сообщения, не больше.
Что важно знать о noscript
С <noscript> реже ошибаются в синтаксисе - чаще неверно понимают, что он вообще может и не может сделать:
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Внутри <noscript> в head стоит текст или <p> | В head для noscript разрешены только link, style и meta - остальное невалидно, браузер может отбросить содержимое | В head класть только link/style/meta, обычный текст переносить в noscript внутри body |
Один <noscript> вложен в другой | Вложенность не поддерживается спецификацией - поведение непредсказуемо в разных браузерах | Не вкладывать, использовать один тег на нужное место |
| Расчёт на noscript как замену рабочему сайту без JS | Если вся страница строится через JavaScript (SPA), noscript даёт только статичное сообщение - реальный функционал он не восстанавливает | Для настоящей работы без JS нужен отдельный серверный рендеринг или статичная версия страницы, а не просто noscript-заглушка |
| Проверяют поведение через "Просмотр кода страницы" | В исходном коде содержимое noscript видно всегда, независимо от того, выполняются скрипты или нет - это не показывает, что реально увидит посетитель | Проверять по-настоящему - отключить JavaScript в настройках браузера или через DevTools и открыть страницу заново |
