2

This works:

<link rel="stylesheet" type="text/css" href="xxx.css" />

But this doesn't:

<script type="text/javascript" src="xxx.js"/>

You actually need:

<script type="text/javascript" src="xxx.js"></script>

Why this inconsistency? Is there a rationale behind this that can help me remember it?

I understand that link never has content, and that script can have an in-line script between <script> and </script> (and no src then).

But still: the <script ... /> syntax would have enough information to tell the parser: no content here, I am closing this right now

So, why is that not supported?

blueFast
  • 41,341
  • 63
  • 198
  • 344

2 Answers2

4

Self-closing tags are only used, when there can not be Child-Elements in the Tag.

For example <script type="text/javascript">...</script> could have some code in it.

But <link rel="stylesheet" type="text/css" href="xxx.css" /> could not ever have any sub-elements, so it's self-closing.

Find a list of self-closing Elements here: http://www.w3.org/TR/html5/syntax.html#void-elements

  • area
  • base
  • br
  • col
  • embed
  • hr
  • img
  • input
  • keygen
  • link
  • meta
  • param
  • source
  • track
  • wbr

... only these tags are allowed to be self-closing.

The rule to remember would be almost no tags, except the ones in the list above. Just remember the most important ones for yourself.

CoderPi
  • 12,985
  • 4
  • 34
  • 62
  • That's the same reason I give in my question, but this does not clarify why `` (as en extra syntax version of the script tag) is not supported. Why not allow for self-closing tags each and every time that there is no content? – blueFast Jan 06 '16 at 11:38
  • I added a link to the w3 website. It's meant to be like that by definition. – CoderPi Jan 06 '16 at 11:38
  • Related question: is there a way to target those self-closing tags in css? (without having to loop through them all) – Max May 01 '23 at 17:17
2

HTML was built on top of SGML. SGML uses DTDs to describe elements.

DTDs can restrict what sort of content elements have. This includes "empty" elements which can never have content (the elements you are referring to as "self-closing").

This is different to an element that can have content, but that happens not to.

Hence: <p></p> is a paragraph that has zero-length content while <img> is an empty element which can never have content.

Having a strict difference between the two simplifies things and removes ambiguity. In particular there are some elements whose closing tag can be inferred from context (which is what I would think of as "self-closing"). So for example <div><p>Paragraph 1<p>Paragraph 2</div> is valid HTML and exactly equivalent to <div><p>Paragraph 1</p><p>Paragraph 2</p></div> (though I recommend being explicit). Allowing and element to be either empty or not would confuse the difference between an empty example of that element and one that doesn't have an explicit closing tag but which does have content.

As such allowing you to leave out the </script> would be a bad idea.

You are using the form /> which is the XML form for an empty or content-less element. It has been possible to serialise HTML as XML for some time now, and here the rules are a bit different. XML does not allow any closing tags to be omitted (so the 2-paragraph example I gave above is not valid) and does allow /> to both end an empty element (can't have content) and an element which could have content but doesn't (as in your case). As such by the XHTML rules <script src="someScript.js"/> is indeed allowed. If the content-type is such as to describe the entity as application/xhtml+xml rather than text/html then the browser should accept that form.

The XML-based rules can allow it because they don't have the optional-end-tag rule on some elements that the SGML-based (and later forms that built on that but aren't strict in SGML compliance) forms have.

(The form /> with a space before the / is a form used to be compatible with both forms, the / is needed for an empty element in the XML forms while the other form treats the / combination as something it can ignore).

Jon Hanna
  • 110,372
  • 10
  • 146
  • 251