JavaScript on Nelson Figueroahttps://nelson.cloud/categories/javascript/Recent content in JavaScript on Nelson FigueroaNelson Figueroahttps://nelson.cloud/apple-touch-icon.pnghttps://nelson.cloud/categories/javascript/enMon, 08 Dec 2025 19:34:09 -0800Render HTML and CSS if JavaScript Is Disabled Using the `<noscript>` Taghttps://nelson.cloud/render-html-and-css-if-javascript-is-disabled-using-the-noscript-tag/?ref=rssSat, 30 Nov 2024 00:00:00 +0000https://nelson.cloud/render-html-and-css-if-javascript-is-disabled-using-the-noscript-tag/?ref=rssRender HTML and apply CSS styles if JavaScript is disabled.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:

<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:

<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

]]>