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="https://stackoverflow.com/questions/46939538/foo.js"/>:
<!doctype html>
<html>
<head>
<script src="https://stackoverflow.com/questions/46939538/doesntmatter.js" />
<title>Hello</title>
</head>
<body>
<h1>Do you see me?</h1>
</body>
</html>And now the correct version <script src="https://stackoverflow.com/questions/46939538/foo.js"></script>:
<!doctype html>
<html>
<head>
<script src="https://stackoverflow.com/questions/46939538/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.