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
headelement - Outside the
headelement
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:
linkstylemeta
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!
Top comments (0)