74

I came across a scenario where giving a script element an id attribute would solve a problem easily. However, after reading about the script element at w3schools and quirksmode, it seems doing so could have some unforeseen consequences.

Has anyone come across any of these issues with browsers such as Chrome, Safari, FF3 up and IE 7 up?

alex
  • 479,566
  • 201
  • 878
  • 984
The Code Pimp
  • 2,196
  • 1
  • 17
  • 16
  • This is an old question, but it looks like Google Tag Manager strips out the 'id' attribute, so it's probably worth investing in a fallback approach (perhaps). – Alan May 24 '13 at 22:02

5 Answers5

111

It's fine in all current browsers.

The only browser that got <script id> wrong was Netscape 4, which we stopped caring about a long, long time ago.

That quirksmode page seems to be badly out of date, what with its use of language attributes, script <!-- hiding, and application/x-javascript. Its advice about avoiding <script> in the <body> (and putting it in <head> instead) is at odds with today's encouraged practices.

If we're talking <script> attribute compatibility problems: defer doesn't work everywhere so don't rely on it; charset doesn't work everywhere, and neither does the charset parameter on the served script's Content-Type, so your script charset had better match the page; type should always be text/javascript and not one of the non-working alternatives the pedants who wrote RFC 4329 would like you to use.

bobince
  • 528,062
  • 107
  • 651
  • 834
22

Keep in mind that setting the id on any element introduces a new global variable with the same name as the id attribute:

id as a global variable

niutech
  • 28,923
  • 15
  • 96
  • 106
  • 10
    This is an incredibly important point! I recently added IDs automatically via a CMS and had to change it to `data-id` because it was overwriting global variables. – joshwhatk Apr 11 '18 at 21:37
  • 4
    One way to avoid overwriting global variables would be to name IDs with dashes (`-`) included since variables cannot contain dashes but IDs can. – Boghyon Hoffmann Oct 02 '18 at 13:57
8

If you're still having to support Netscape 4, you've got a lot of trouble – and the pity and condolences of the rest of the developer world.

Short answer, I wouldn't worry about it.

Robusto
  • 31,447
  • 8
  • 56
  • 77
6

I know a long time has passed, but I thought it would be nice to point that when you look at W3 Schools definition of the script tag, you see at some point that

The tag also supports the Global Attributes in HTML.

and amongst those attributes, ta-da, you will find your lovely id.

The same goes for a whole lot of tags, which will certainly give us a lot of flexibility when pulling those nice trick from the hat.

JBourne
  • 180
  • 2
  • 10
2

I don't think a browser would have a problem by adding an id attribute to a script element.

On some of my sites, that load additional JavaScripts via JavaScript, I have added a class attribute to make referencing them easier. The validator did not complain.

alex
  • 479,566
  • 201
  • 878
  • 984