Html 为元素编写自关闭标签不是传统上空的坏习惯吗？

Is writing self closing tags for elements not traditionally empty bad practice?

提问by alex

I have noticed jQuery (or is it Firefox) will turn some of my <span class="presentational"></span> into <span class="presentational" />

我注意到 jQuery（或者是 Firefox）会改变我的一些 <span class="presentational"></span> into <span class="presentational" />

Now my question is, is this okay to write my markup like this? Will any browsers choke on it?

现在我的问题是，这样写我的标记可以吗？任何浏览器都会窒息吗？

Personally, I think it looks cleaner to do <span class="presentational" />if it's going to be empty.

就个人而言，我认为<span class="presentational" />如果它是空的，它看起来更干净。

回答by Alan Storm

I'm assuming your question has to do with the red trailing slash on self-closing elements when you view source in Firefox. If so, you've stumbled into one of the most vehement, yet simultaneously passive aggressive debates in the browser maker vs. web developer wars. XHTML is NOT just about a document's markup. It's also about how documents are meant to be served over the web.

我假设您的问题与在 Firefox 中查看源代码时自关闭元素上的红色斜杠有关。如果是这样，您就陷入了浏览器制造商与 Web 开发人员之间最激烈但同时也是被动的激进辩论之一。XHTML 不仅仅是关于文档的标记。它还涉及如何通过网络提供文档。

Before I begin; I'm trying hard not to take sides here.

在我开始之前；我正在努力不在这里偏袒任何一方。

The XHTML 1.1 spec says that a web server should serve XHTML with a Content-Type of application/xhtml+xml. Firefox is singling out those trailing slashes as invalid because your document is being served as text/html rather than application/xhtml+xml. Take these two examples; identical markup, one served as application/xhtml+xml, the other as text/html.

XHTML 1.1 规范规定，Web 服务器应提供内容类型为 application/xhtml+xml 的 XHTML。Firefox 将那些尾部斜杠挑出无效，因为您的文档是作为 text/html 而不是 application/xhtml+xml 提供的。拿这两个例子来说；相同的标记，一个作为 application/xhtml+xml，另一个作为 text/html。

http://alanstorm.com/testbed/xhtml-as-html.php

http://alanstorm.com/testbed/xhtml-as-html.php

http://alanstorm.com/testbed/xhtml-as-xhtml.php

http://alanstorm.com/testbed/xhtml-as-xhtml.php

Firefox flags the trailing slash in the meta tag as invalid for the document served with text/html, and valid for the document served with application/xhtml+xml.

Firefox 将元标记中的尾部斜杠标记为对 text/html 提供的文档无效，而对 application/xhtml+xml 提供的文档有效。

Why this is Controversial

为什么这是有争议的

To a browser developer, the point of XHTML is you can treat your document as XML, which means if someone sends you something that's not valid, the spec says you don't have to parse it. So, if a document is served as application/xhtml+xml and has non-well formed content, the developer is allowed to say "not my problem". You can see that in action here

对于浏览器开发人员来说，XHT​​ML 的重点是您可以将您的文档视为 XML，这意味着如果有人向您发送了无效的内容，规范说您不必解析它。所以，如果一个文档作为 application/xhtml+xml 并且有格式不正确的内容，开发人员可以说“不是我的问题”。你可以在这里看到它的实际效果

http://alanstorm.com/testbed/xhtml-not-valid.php

http://alanstorm.com/testbed/xhtml-not-valid.php

When a document is served as text/html, Firefox treats it as a plain old HTML document and uses the forgiving, fix it for you, parsing routines

当文档以 text/html 形式提供时，Firefox 会将其视为普通的旧 HTML 文档并使用宽容、为您修复它、解析例程

http://alanstorm.com/testbed/xhtml-not-valid-as-html.php

http://alanstorm.com/testbed/xhtml-not-valid-as-html.php

So, to a browser maker, XHTML served as text/html is ludicrous, because it's never treated as XML by the browser's rendering engine.

因此，对于浏览器制造商来说，作为 text/html 的 XHTML 是荒谬的，因为浏览器的渲染引擎从未将它视为 XML。

A bunch of years ago, web developers looking to be more than tag monkeys (Disclaimer: I include myself as one of them) started looking for ways to develop best practices that didn't involved thrice nested tables, but still allowed a compelling design experience. They/We latched onto XHTML/CSS, because the W3C said this was the future, and the only other choice was a world where a single vendor (Microsoft) controlled the defacto markup spec. The real evil there being the single vendor, and not so much Microsoft. I swear.

几年前，希望不仅仅是标记猴子的 Web 开发人员（免责声明：我也将自己包括在内）开始寻找开发最佳实践的方法，这些方法不涉及三次嵌套表，但仍然允许提供引人注目的设计体验. 他们/我们选择了 XHTML/CSS，因为 W3C 表示这是未来，唯一的选择是单一供应商（微软）控制事实上的标记规范的世界。真正的邪恶是单一供应商，而不是微软。我发誓。

So where's the controversy? There are two problems with application/xhtml+xml. The first is Internet Explorer. There's a legacy bug/feature in IE where content served as application/xhtml+xml will prompt the user to download the document. If you tried to visit the xhtml-as-xhtml.php listed above with IE that's likely what happened. This means if you want to use application/xhtml+xml, you have to browser sniff for IE, check the Accepts header and only serve application/xhtml+xml to those browsers that accept it. This is not as trivialas it sounds to get right, and also went against the "write once" principle that the web developers were striving for.

那么争议点在哪里呢？application/xhtml+xml 有两个问题。第一个是 Internet Explorer。IE 中有一个遗留错误/功能，其中作为 application/xhtml+xml 的内容将提示用户下载文档。如果您尝试使用 IE 访问上面列出的 xhtml-as-xhtml.php，那很可能会发生这种情况。这意味着如果你想使用 application/xhtml+xml，你必须浏览器嗅探 IE，检查 Accepts 标头，并且只向那些接受它的浏览器提供 application/xhtml+xml。这并不像听起来那么简单，而且也违背了 Web 开发人员所追求的“一次编写”原则。

The second problem is the harshness of XML. This is, again, one of those flame prone issues, but there's some people who think a single bad tag, or single character improperly encoded shouldn't result in a user not seeing the document they want to. In other words, yes, the spec says you should stop processing XML if it's not well formed, but the user doesn't care about the spec, they care that their cat's website is broken.

第二个问题是 XML 的严酷性。这又是一个容易引发问题的问题，但有些人认为单个错误标签或未正确编码的单个字符不应导致用户看不到他们想要的文档。换句话说，是的，规范说如果 XML 格式不正确，你应该停止处理它，但用户并不关心规范，他们关心他们的猫的网站被破坏了。

Adding even more gasoline to the issue is the XHTML 1.0 (not 1.1) spec says that XHTML documents maybe served as text/html, assuming certain compatibility guidelinesare followed. Things like the img tag being self closing and the like. The key word here is may. In RFC speak, may means optional. Firefox has chosen NOT to treat documents served with an XHTML doctype but a content type of text/html as XHTML. However, the W3C validator will happily report these documents as valid.

XHTML 1.0（而不是 1.1）规范说，XHT​​ML 文档可以作为 text/html 提供，假设遵循某些兼容性指南，给这个问题增加了更多的动力。诸如 img 标签会自动关闭之类的东西。这里的关键词是可能。在RFC 中，可能意味着可选。Firefox 选择不将使用 XHTML doctype 提供的文档，而是将 text/html 内容类型视为 XHTML。但是，W3C 验证器很乐意将这些文档报告为有效。

I'll leave the reader to ponder the simultaneous wonder/horror of a culture that writes a document to define what they mean by the word may.

我会让读者去思考同时写出一份文件来定义“可能”这个词的含义的文化的奇迹/恐怖。

Moving Forward

向前进

Finally, this is what the whole HTML 5thing is about. XHTML became such a political hot potato that a bunch of people who wanted to move the language forward decided to go in another direction. They produced a spec for HTML 5. This is currently being hashed out in the W3C, and expected to finish sometime in the next decade. In the meantime, browser vendors are picking and choosing features from the in-progress spec and implementing them.

最后，这就是整个HTML 5的内容。XHTML 变得如此烫手山芋，以至于一群想要推动语言发展的人决定转向另一个方向。他们为 HTML 5 制定了规范。目前正在 W3C 中讨论，预计将在未来十年的某个时候完成。与此同时，浏览器供应商正在从正在进行的规范中挑选功能并实施它们。

Updates from the Comments

来自评论的更新

In the comments, Alexpoints out that if you're going to sniff for something, you should check the Accept header to see if application/xhtml+xml is accepted by the user agent.

在评论中，Alex指出如果您要嗅探某些东西，您应该检查 Accept 标头以查看 application/xhtml+xml 是否被用户代理接受。

This is absolutely correct. In general, if you're going to sniff, sniff for the feature, not for the browser.

这是完全正确的。一般来说，如果你要嗅探，嗅探是为了功能，而不是浏览器。

回答by Tim Down

An addition to the other answers: in IE, having elements such as <span />in your mark-up will cause all kinds of problems with DOM traversal methods in JavaScript. Have a look at the following XHTML document:

其他答案的补充：在 IE 中，<span />在标记中包含元素会导致 JavaScript 中的 DOM 遍历方法出现各种问题。看看下面的 XHTML 文档：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test</title>
    <script type="text/javascript">
        function show() {
            var span = document.getElementById("span");
            alert(span.innerHTML);
        }
    </script>
</head>
<body onload="show();">
<p id="p1">Paragraph containing some text followed by
           an empty span<span id="span"/></p>
<p id="p2">Second paragraph just containing text</p>
</body>
</html>

The idea is that when the page loads, the JavaScript will get a reference to the empty span and display its HTML contents. That will be an empty string, right? Not in IE it won't. In IE, you get all the content after the span in the whole document:

这个想法是当页面加载时，JavaScript 将获得对空跨度的引用并显示其 HTML 内容。那将是一个空字符串，对吧？不是在 IE 中它不会。在 IE 中，获取整个文档中 span 之后的所有内容：

</P>
<P id=p2>Second paragraph just containing text</P>

Also, the second <p>shows up in the span's childNodescollection. That same <p>is also in the body's childNodescollection, meaning a node can effectively have multiple parents. This isn't terribly good news for scripts that rely on traversing the DOM.

此外，第二个<p>出现在跨度的childNodes集合中。这同样<p>也是身在childNodes集合，这意味着一个节点可以有效地有多个父。对于依赖遍历 DOM 的脚本来说，这并不是什么好消息。

I have also blogged about this.

我也写了关于这个的博客。

回答by Mehrdad Afshari

Yes. It is. It'll cause problems in certain cases for old browsers.

是的。这是。在某些情况下，它会导致旧浏览器出现问题。

<script type='text/javascript' src='script.js' />

In this case, the old browser might not understand that <script>tag has ended.

在这种情况下，旧浏览器可能无法<script>识别标记已结束。

回答by Alohci

Served as application/xhtml+xml, <span /> means create a span element with no content.

作为 application/xhtml+xml，<span /> 表示创建一个没有内容的 span 元素。

Served as text/html, <span /> means create a span element where the contents of the element follow this tag until the </span> tag is encountered, or another tag (or EOF) that implicitly closes the element is encountered. i.e. in this case <span /> means the same as <span>.

作为 text/html，<span /> 表示创建一个 span 元素，其中元素的内容跟随这个标签，直到遇到 </span> 标签，或者遇到另一个隐式关闭元素的标签（或 EOF）。即在这种情况下 <span /> 与 <span> 的意思相同。

Aside: HTML 5 defines both and HTML and XHTML serializations, so it doesn't affect this issue one way or another. It does require, like XHTML 1.1, that XHTML be served as application/xhtml+xml, unlike XHTML 1.0. In effect though, this changes nothing as all browsers treat any version of XHTML served as text/html as tag soup.

旁白：HTML 5 定义了 HTML 和 XHTML 序列化，因此它不会以任何方式影响这个问题。与 XHTML 1.0 不同，它确实需要像 XHTML 1.1 一样将 XHTML 用作 application/xhtml+xml。但实际上，这没有任何改变，因为所有浏览器都将任何版本的 XHTML 视为 text/html 作为标签汤。

回答by Quentin

See the note on the subject form the XHMTL working group: http://www.w3.org/TR/xhtml-media-types/

请参阅 XHMTL 工作组关于该主题的说明：http: //www.w3.org/TR/xhtml-media-types/

In short — it is fine if your XHTML is going to be treated as XHTML. If you are going to pretend it is HTML (which you need to do if you want it to be loaded by Internet Explorer (including version 8, latest at the time of writing) then you have to jump through hoops).

简而言之——如果您的 XHTML 将被视为 XHTML，那很好。如果您要假装它是 HTML（如果您希望它由 Internet Explorer 加载，您需要这样做（包括在撰写本文时最新的版本 8），那么您必须跳过箍）。

The hoops are sufficiently annoying that I would recommend most people stick to HTML 4.01.

圈子很烦人，我建议大多数人坚持使用 HTML 4.01。

回答by eyelidlessness

Also worth noting is that an <?xml ...?>declaration before the doctype throws IE into quirks mode.

另外值得注意的是，<?xml ...?>在 doctype 之前的声明将 IE 置于 quirks 模式。

回答by Erich Kitzmueller

It should be explicitely said that there are no self-closed tags in HTML, so whenever a browser decides to treat your XHTML as HTML, it will not recognize that the tag is closed. Not a problem for tags that don't have to be closed in HTML, like <img>, but obviously bad with tags like <span>.

应该明确指出，HTML 中没有自闭合标签，因此每当浏览器决定将您的 XHTML 视为 HTML 时，它都不会识别出该标签是闭合的。对于不必在 HTML 中关闭的标签（例如 ）来说不是问题<img>，但对于<span>.

回答by Derek H

Generally it's not a problem to use shorthand for empty elements, but there are some exceptions where it can cause problems.

一般来说，对空元素使用简写不是问题，但有一些例外可能会导致问题。

<script>is an important one that needs to be closed with </script>to avoid issues.

<script>是一个重要的，需要关闭</script>以避免问题。

Another is <meta>which works much better with spiders written as <meta></meta>instead of <meta />

另一个是<meta>用蜘蛛写成<meta></meta>而不是<meta />

Not exactly the question, but related, in terms of formatting, versions of IE have problems with just empty elements such as <div></div>or <div />. In this case, <div>&nbsp;</div>is required to maintain the formatting.

不完全是问题，但相关的是，在格式方面，IE 版本仅存在空元素的问题，例如<div></div>或<div />。在这种情况下，<div>&nbsp;</div>需要保持格式。