How to add link tag inside noscript tag its showing

I added tag inside the tag as following

<noscript>
    <link type="text/css" rel="stylesheet" href="${staticFilesUrl}/css/noscript-overrule.css" />
</noscript>

but in firefox when the javascript is enabled I see something like this

<noscript>
      &lt; link type="text/css" rel="stylesheet" href="/static/snsbank/css/noscript-overrule.css" /&gt;
</noscript>

event I tried to put style tag inside the noscript tag still in firefox I got the following result

开发者_如何学C<noscript>
    &lt; style &gt; #whiteBox{ width:30%; &lt/style&gt;
</noscript>

can anyone tell me how can I avoid this?

You ask in a comment: "if I want to use one css file only if javascript is disabled then what should I do?"

Two ways at least (probably more):

1. Have a default stylesheet that is for without javascript that always loads. Then, if javascript is enabled, use a <script> tag in the head to load a different stylesheet after the default to override the styles.

2. If you just have a few things that change, have one style sheet and have a class on your body of NoJavascriptEnabled that you use to target those few styles when javascript is not enabled, and then use javascript to remove that class if javascript is enabled.

@Vipul - your solution should work in modern browsers. Your question indicates that with javascript enabled you see the escaped html in the markup - is that also rendering like that in your browser? (it shouldn't if javascript is enabled.) If that isn't the case, the invalid markup you see when JS is enabled shouldn't be a problem because who cares what it looks like if the garbage isn't visible.

@Sarfraz - the tag is used for html (not javascript), to display markup when javascript is not available - disabled or unsupported. Adding link tags there is a common approach to load a specific stylesheet when javascript is not available. Despite it being a non-standard approach as @Geert points out - it does work.

In this case it seems @Vipul was seeing some weird markup in firebug - FF6 supports it though.

In either case you should still take heed of the second point of advice in @Scott's answer - don't use the first as that adds extra (albiet a probably small) load to your server for 99% of internet users who have js enabled. Stick to defaulting a "no-js" class to your html tag and remove it with javascript in the head. Be sure to do that in your head otherwise you'll fouc the browser.

The exception to @Scott's rule is if you need to load a massive amount of CSS for user's without JS enabled. In that situation I would recommend only linking to the css if JS is disabled via the noscript tag. Why punish 99% of users who embrace a dynamic web environment because you need to kludge in style fixes for the remainder of the web?

<link> is only allowed in the head section of an HTML document, not in the body. Are you placing this code in the head of the document?

CSS is not a script, the <noscript> tag is used for javascript in case it is disabled. Why are you doing that? It is not used for CSS like you are doing.