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 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 noscript
tag
The HTML specification categorizes the noscript
tag as a metadata content 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
(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.
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.
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 noscript
tag in the head
element with JavaScript disabled
When the noscript
tag is placed in the head
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 span
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.
In addition, Chrome adds an inline style to the newly created span
element.
The noscript
tag in the body
element with JavaScript disabled
When the noscript
tag is placed immediately after the opening body
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 span
element but this time its content is rendered. Any inline styles applied directly to the noscript
tag is stripped out by the browser.
In Chrome the noscript
tag is still converted to a span
element with the inline style added to the span
element.
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.
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!