Тег <noscript>

Тег <noscript> (укр. — “без скриптів”) використовується в HTML для надання альтернативного контенту на випадок, якщо:

  • у браузері користувача вимкнено виконання JavaScript;
  • браузер не підтримує JavaScript.

Усі елементи всередині <noscript> відображаються лише в тому випадку, коли скрипти не можуть бути виконані. Це покращує доступність сайту та забезпечує резервний варіант для користувачів без підтримки JavaScript.

Атрибути

Специфічні атрибути

Тег <noscript> не має специфічних (унікальних) атрибутів.

Глобальні атрибути

Тег <noscript> підтримує всі глобальні атрибути HTML:

  • id — унікальний ідентифікатор. Наприклад:
<noscript id="no-js-warning">
    У вашому браузері вимкнено JavaScript.
</noscript>
  • style — для інлайн-стилів. Наприклад:
<noscript style="color: red;">
    JavaScript вимкнено. Деякі функції сайту можуть бути недоступні.
</noscript>
  • lang — вказує мову вмісту елемента. Наприклад:
<noscript lang="uk">
    Сайт потребує JavaScript.
</noscript>

Приклад використання

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Приклад використання noscript</title>
    <style>
        .noscript-warning {
            color: red;
            font-weight: bold;
            padding: 10px;
            border: 1px solid red;
            background-color: #ffeaea;
        }
    </style>
</head>
<body>

<h2>Головна сторінка</h2>

<p>Основний контент сайту тут...</p>

<noscript>
    <div class="noscript-warning">
        Увага! У вашому браузері вимкнено JavaScript. Деякі функції можуть не працювати.
    </div>
</noscript>

</body>
</html>

Додаткові моменти

  • Тег <noscript> можна використовувати як у <body>, так і у <head>:
    • В <head> — для підключення альтернативних стилів при вимкненому JS.
    • В <body> — для текстових попереджень чи альтернативного контенту.
  • Браузер повністю ігнорує вміст <noscript>, якщо JavaScript увімкнено.
  • Корисний для SEO, коли потрібно пояснити роботу сайту без скриптів.
  • Не підтримує вкладених скриптів усередині (не спрацьовують <script> у <noscript>).
  • Повністю підтримується всіма браузерами.