My WebDev Notes: HTML noscript tag and script blocking extensions
Tags: html
Published: 2020-04-20 22:49:55

---
title: My WebDev Notes: HTML noscript tag and script blocking extensions
published: true
description: A short note about the behavior of the HTML noscript tag in Firefox and Chrome browsers
tags: html
series: My WebDev Notes
---

##__Introduction__

HTML has a lot of tags each serving its purpose. Some tags are quiet popular than others due to their level of usage and others, not so much. One of these tags is the `noscript` tag.

The `noscript` tag as the name implies is useful when you have JavaScript on a Web page and somehow the web browser has JavaScript __disabled__. __However, its behavior can catch you off guard when you have a Web browser with a script blocking extension__ like [NoScript](https://noscript.net) installed and at the same time __blocking scripts on a Web page__ with the `noscript` tag in its HTML.

This note will explore this behavior in detail. First, we'll start with some definitions. Let's dive in.

##__Definition of the <code>noscript</code> tag__

The HTML specification categorizes the `noscript` tag as a [metadata content](https://html.spec.whatwg.org/#metadata-content-2) defined as:

> content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information.

The specification further clarifies the [usage of the `noscript`](https://html.spec.whatwg.org/#the-noscript-element)(_emphasis mine_):

> The noscript element __represents nothing if scripting is enabled__, and __represents its children if scripting is disabled__. It is used to present different markup to user agents that support scripting and those that don't support scripting, by affecting how the document is parsed.

This means the `noscript` tag __does nothing when the browser supports JavaScript__ but the browser renders its child elements when JavaScript is disabled in the web browser.

##__Usage of the `noscript` tag__

Based on the specification `noscript` tag can be used in two places namely:

* Inside the `head` element
* Outside the `head` element

Whether the tag is used inside or outside the `head` tag it has conditions of usage in two situations:

* When scripting is disabled
* When scripting is enabled


####__When used in a `head` element with scripting disabled__

When used inside the `head` element with __scripting disabled__ it must contain the following tags:

* `link`
* `style`
* `meta`

This means that if the browser has JavaScript disabled and the `noscript` tag is used probably to show some information to the user and subsequently used inside the `head` tag it must contain only `link`, `style`, and `meta` elements.

####__When used in a `head` element with scripting enabled__

On the other hand, when used inside the `head` element with __scripting enabled__ it must contain __only text__.

<hr>

####__When used outside the `head` element with scripting disabled__

When the `noscript` tag is used outside the `head` element with __scripting disabled__ it __cannot be nested__.

####__When used outside the `head` element with scripting enabled__

When __scripting is enabled__ it must contain __only text__.

<hr>

The preceding explanations are what the specification states about the `noscript` but its behavior changes when you have a script blocking extension installed and set to block scripts on a Web page with the `noscript` tag in its HTML.

We'll start when the `noscript` tag is the `head` element and JavaScript is disabled in the browser.

##__The <code>noscript</code> tag in the <code>head</code> element with JavaScript disabled__

When the <code>noscript</code> tag is placed in the <code>head</code> element and a script blocking extension is installed in a browser blocking script on the Web page, Firefox Web browser converts the `noscript` tag to a <code>span</code> element and it's __not rendered on-page at all.__ Any __inline styles__ applied directly to the `noscript` tag is __stripped out by the browser__.

![noscript tag converted to a span element when placed in the head element in Firefox web browser](https://dev-to-uploads.s3.amazonaws.com/i/8znqkx0orlb406cmbuuw.JPG)<figcaption>noscript tag conversion in Firefox</figcaption>

In addition, Chrome adds an inline style to the newly created `span` element.

![noscript tag converted to a span element when placed in the head element in Chome web browser](https://dev-to-uploads.s3.amazonaws.com/i/6nt0pq5g9fm4fv06wcxx.JPG)<figcaption>noscript tag conversion in Chrome</figcaption>

##__The <code>noscript</code> tag in the <code>body</code> element with JavaScript disabled__

When the <code>noscript</code> tag is placed immediately after the opening <code>body</code> tag and a script blocking extension is installed in a browser blocking script on the Web page, Firefox Web browser converts the `noscript` tag to a <code>span</code> element but this time __its content is rendered__. Any __inline styles__ applied directly to the `noscript` tag is __stripped out by the browser__.

![noscript tag converted to a span element when placed in the after the opening body element in Firefox web browser](https://dev-to-uploads.s3.amazonaws.com/i/75vxicxpqj1o6261266y.JPG)<figcaption>noscript tag conversion in Firefox</figcaption>

In Chrome the `noscript` tag is still converted to a `span` element with the inline style added to the `span` element.

![noscript tag converted to a span element when placed the after the opening body element in Chrome web browser](https://dev-to-uploads.s3.amazonaws.com/i/nhizlo0zujtugfza31s0.JPG)<figcaption>noscript tag conversion in Chrome</figcaption>

You should know from the preceding images that I placed `p` tags in the `noscript` tag even though the specification clearly states that we should not do this but if you try and put any of the required tags (`link`, `meta`, or `styles`) in it and repeat this experiment, the result is the same.

![The noscript tag with an embedded link tag](https://dev-to-uploads.s3.amazonaws.com/i/3ktefyddhwxnqih30k26.JPG)<figcaption>The link tag inside the noscript tag</figcaption>

##__Conclusion__

If the `noscript` tag is placed inside the `head` element or after the opening `body` tag Firefox and Chrome Web browser convert it to a `span` element when the user has a script blocking extension installed and currently blocking script execution.

In both browsers, any style (external or directly) will have no effect on the `noscript` tag because it no longer exists when the page is rendered. The styles only get applied to the child element if they are rendered by the browser.

_Have fun!_