HTML-тег <noscript>

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

Элемент <noscript> можно разместить в разделе <head> или <body> , в зависимости от типа содержащегося в нем резервного содержимого.

Базовый синтаксис HTML-тега <noscript>

Базовая структура тега <noscript> следующая: 

<noscript>
    Fallback content goes here.
</noscript>

Содержимое тега <noscript> отображается только в том случае, если JavaScript отключен или не поддерживается.

Базовый пример HTML-тега <noscript>

Вот пример использования тега <noscript> для предоставления сообщения пользователям без JavaScript: 

<!DOCTYPE html>
<html>
    <head>
        <title>Noscript Example - htmlformatter.github.io</title>
    </head>
    <body>
        <h1>Welcome to My Website</h1>

        <noscript>
            <p>It seems JavaScript is disabled in your browser. Some features of this website may not work.</p>
        </noscript>

        <script>
            document.write('<p>JavaScript is enabled.</p>');
        </script>
    </body>
</html>

Когда JavaScript включен в браузере Firefox

Когда JavaScript отключен в браузере Firefox

Пояснение: Если JavaScript включён, появится сообщение «JavaScript включён». Если JavaScript отключён, отображается резервное сообщение внутри тега <noscript> .

Предоставление альтернативных ресурсов

Тег <noscript> также может предоставлять альтернативные ресурсы, такие как таблицы стилей или скрипты: 

<!DOCTYPE html>
<html>
    <head>
        <title>Noscript with Alternate Resources</title>
        <noscript>
            <link rel="stylesheet" href="noscript-styles.css">
        </noscript>
    </head>
    <body>
        <h1>Welcome to My Website</h1>
        <p>This page adapts for users without JavaScript.</p>
    </body>
</html>

Объяснение: Если JavaScript отключен, браузер загружает резервную таблицу стилей( noscript-styles.css ), чтобы обеспечить приемлемый пользовательский интерфейс.

Использование <noscript> с формами

Тег <noscript> может предоставлять резервные варианты для форм, полагающихся на JavaScript для отправки или проверки: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Contact Us</h2>
        <form action="submit-form.php" method="POST">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>



            <noscript>
                <p>JavaScript is disabled. Please ensure all fields are filled before submitting.</p>
            </noscript>

            <button type="submit">Submit</button>
        </form>
    </body>
</html>

Пояснение: Если JavaScript отключен, сообщение внутри тега <noscript> напоминает пользователям о необходимости вручную проверить форму перед отправкой.

На снимке экрана вы можете заметить, что мы отключили JavaScript из инструментов разработчика в Firefox, что является причиной отображения элемента noscript.

Стилизация тега <noscript> с помощью CSS

Вы можете стилизовать тег <noscript> чтобы сделать его содержимое более заметным: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            noscript {
                display: block;
                background-color: #ffcccb;
                color: #000;
                padding: 10px;
                border: 1px solid #f00;
                margin: 20px 0;
            }
        </style>
    </head>
    <body>
        <h1>Welcome to My Website</h1>

        <noscript>
            <p>JavaScript is disabled. Some features may not work as expected.</p>
        </noscript>
    </body>
</html>

Результат: Резервное содержимое внутри тега <noscript> оформлено заметным фоновым цветом, отступами и рамкой для привлечения внимания.

Практическое применение тега <noscript>

  • Резервные сообщения: информируют пользователей об ограничениях при отключении JavaScript.
  • Альтернативные стили: загрузите резервную таблицу стилей для пользователей без JavaScript.
  • Важные уведомления: предоставьте важную информацию, которую нельзя получить с помощью JavaScript.
  • Улучшенная доступность: обеспечьте доступность важного контента всем пользователям независимо от поддержки JavaScript.