为什么有些HTML5标签必须有一个起始和结束标签，而不是用/>自行关闭它们？

Question

In HTML5 there are tags that must have a starting and an ending tag even when their content is empty:

<script></script>   <!-- Right way. -->
<div></div>         <!-- Right way. -->
<content></content> <!-- Right way. -->

<script/>  <!-- Wrong way. -->
<div/>     <!-- Wrong way. -->
<content/> <!-- Wrong way. -->

In XML this difference doesn't exist: <node/> and <node></node> are the same entity.

Why tags like script , div and content can't be defined simply as: <script/> , <div/> and <content/> ?

Answer 1

From the w3c :

A Self-closing tag is a special form of start tag with a slash immediately before the closing right angle bracket. These indicate that the element is to be closed immediately, and has no content. Where this syntax is permitted and used, the end tag must be omitted. In HTML, the use of this syntax is restricted to void elements and foreign elements. If it is used for other elements, it is treated as a start tag. In XHTML, it is possible for any element to use this syntax. But note that it is only conforming for elements with content models that permit them to be empty.

The examples you listed would generally contain content, JavaScript, or other elements, so having a proper start and end tag would delimit the scope of those elements/tags.

Answer 2

Simply because they are basically some "container" for other elements.

There are elements which are didn't used as parent elements for others, like img or base for example, this one can be closed without an closing tag with a trailing />, but it is not necessary.

Answer 3

These (void elements) may be terminated with />

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

However its optional and irrelevant:

This character has no effect on void elements

MathML/SVG tags may terminate with /> to indicate a self closing tag.

( HTML5 Ref )

Answer 4

In the HTML5 specifications, some tags are declared as "self closing", and some tags are not.

The script tag is special for that. When a browser request a javascript file (given in the src attribute of the tag), it will copy the javascript file content in the script tag. And if you self close the tag, the browser can't copy any content in the tag so the javascript will not be executed.

Since a few years now, HTML (and especially with HTML5) try to get away from XML "borders". That's why we have attributes boolean values (like disabled or checked ).

Answer 5

<script></script>   <!-- Right way. -->
<div></div>         <!-- Right way. -->
<content></content> <!-- Right way. -->

In all 3 of those cases, there is an indefinite amount of content that could reside within the tag.

With something like:

<input type="text" velue="Hello" />
<img src="image.jpg" />

There is no more content that you could possibly add to these. So you can simply close the tags at the same point that they are generated.

So, it's not a matter of "right or wrong". It's a matter of what the tag is actually used for.