I recently learned about the <noscript> HTML tag. HTML and CSS contained within <noscript> tags will be rendered if JavaScript is disabled in the browser.

For example, try reloading this page with JavaScript disabled and you’ll see a new message below:

The HTML for the message above looks like this:

1
2
3

<noscript>
    <blockquote>This message only shows up when JavaScript is disabled!</blockquote>
</noscript>

Here’s an example where CSS styles within <noscript> tags are applied when JavaScript is disabled. Try reloading this page without JavaScript and the message below will be italicized.

The text within this blockquote element is italicized when JavaScript is disabled!

And this is what the HTML and CSS looks like for the example above:

1
2
3
4
5
6
7
8
9

<noscript>
    <style>
        blockquote#example {
            font-style: italic;
        }
    </style>
</noscript>

<blockquote id="example">The text within this blockquote element is italicized when JavaScript is disabled!</blockquote>

References