Difference between <script src="foo.js"></script> and <script src="foo.js"/>? [duplicate]

What's the difference between these two ways of pulling javascript into a page?

<script src="foo.js"></script>

Vs:

<script src="foo.js"/>

The script tag isn't going to have children, so there's no need to separate the start and end tags, right? Like how if you have an empty row in a table, you can do <tr/> instead of <tr></tr>? Or am I way off base here?

Solution 1:

In short, the first one is correct and the second one isn't and will cause your page not to render properly.

The script element is not allowed to be self-terminated. It must have an explicit closing tag. If it is omitted, the browser will believe that everything after it is still JavaScript and not process it properly.

See for yourself with this simple example. Here's the second approach of <script src="foo.js"/>:

<!doctype html>
<html>
 <head>
   <script src="doesntmatter.js" />
   <title>Hello</title>
 </head>
 <body>
   <h1>Do you see me?</h1>
 </body>
</html>

And now the correct version <script src="foo.js"></script>:

<!doctype html>
<html>
 <head>
   <script src="doesntmatter.js"></script>
   <title>Hello</title>
 </head>
 <body>
   <h1>Do you see me?</h1>
 </body>
</html>

The self-terminating (XHTML) syntax of <element /> may only be used on empty elements (elements that forbid a content model - i.e. a closing tag is not defined for them, not elements that could have content, but you've just decided not to give it any).

You may not use this syntax as a convenience with tags that do have a closing tag defined for them.

Examples of tags where self-terminating syntax is allowed are (from MDN):

<area>
<base>
<br>
<col>
<colgroup> when the span is present
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>

On a personal note, I have had several spirited debates with fellow Stack Overflow members over the years (one just today as a matter of fact) about a best-practice relating to the use of self-terminating elements.

The argument I often hear is that using them makes the code clearer. But, how could that be because in order to use them, you must know where it is acceptable to use them. And, if you know that, then the code is just as clear when you see something like <br>, because you already know that <br> doesn't get closed!

Then the argument becomes, "Well, it's not so that the code is clearer for me, it's for others, who might not know that <br> isn't supposed to be closed." The counter-argument here is that if they don't know which tags are and aren't supposed to be closed, they WILL use this syntax in the wrong places (this fact is not in doubt as evidenced by your question and the many others like it)!

The final argument is that using this syntax makes the code valid XML and that is a good way to structure all your HTML, just in case your HTML needs to ever be parsed as XML. Well, that's a valid point. But, for most use-cases these days, are we really using XHTML? Sure, there may be environments where this still makes sense, but certainly not in the main stream thanks to JSON. So, recommending this syntax as a best- practice wouldn't be warranted.

I strongly advocate against the use of self-terminating elements in non-XML applications, period. Using them buys you nothing and, as you have seen, can lead to bugs in the code.

Difference between <script src="foo.js"></script> and <script src="foo.js"/>? [duplicate]

Solution 1:

Related

Recent Posts