有哪些方法可以关闭 HTML5 中 等 void 元素的自关闭标签？答案

【问题标题】：What are the allowed ways to close self-closing tags for void elements such as in HTML5?有哪些方法可以关闭 HTML5 中 等 void 元素的自关闭标签？
【发布时间】：2012-05-22 19:59:23
【问题描述】：

在 HTML5 中，用   关闭   标记是否仍然合适？

这显然也适用于所有其他单个标签。我意识到这实际上并不会影响事物的工作方式，但这里的最佳做法是什么？

someLines of txt <br>            // How you see a lot of people doing it
and then some <br />             // XHTML style! Should I still be doing this? 
ow im not done yet.. <br> </br>  // No one does this right? RIGHT?!

【问题讨论】：

HTML Validation Service 告诉你什么？
在  和  之间并不重要，用  表示你发送了一个被浏览器忽略的额外字符。那么，为什么还要费心使用带宽呢？这一切都加起来了。
@Greg 不正确，请参阅我在已接受答案下方的评论。至于带宽 - 使用 gzip 压缩的内容并尝试是否可以看到差异。或者你碰巧在谷歌或亚马逊工作，单位差异实际上很重要？
@Brad — W3C 验证器还没有为 HTML5 做好准备。在验证直接输入时，Validate HTML fragment 选项只有这两个选择：HTML 4.01、XHTML 1.0。这可能是件好事。 ;-)

标签： html

【解决方案1】：

在从链接文章中了解self-closing tags 后，我知道 、  或  在HTML5 中都是有效的。

但是如果你写 或 ，那么它们最终会被浏览器转换为HTML5中的 。

另外，如果你写 ，它们的浏览器不会产生一些错误，但它会读作2个 标签。

someLines of txt <br>            // This is completly valid and recommended
and then some <br />             // XHTML style! should be written like this in XHTML but in HTML5 you can just write <br>
ow im not done yet.. <br> </br>  // Even if you do this then no error will generate. Instead browser will read it as 2 <br> tags

方法如下：

<p>This is paragraph with &lt;br&gt;<br> and &lt;br/&gt;<br/> and then &lt;br /&gt;<br />.</p>
<p>closing br is wrong way <br></br> but browser read it as 2 br.</p>

它在浏览器中的外观：

【讨论】：

【解决方案2】：

来自W3C specification for HTML：

以下是 HTML 中 void 元素的完整列表：
- area，base，br，col，command，embed，hr，img，input，keygen，link，meta，param、source、track、wbr
Void 元素只有一个开始标签；不得为 void 元素指定结束标记。
开始标签由以下部分组成，完全按照以下顺序：
- < 字符。
- 元素的标签名称。
- 可选地，一个或多个属性，每个属性前面必须有一个或多个空格字符。
- （可选）一个或多个空格字符。
- （可选）/ 字符，仅当元素为 void 元素时才会出现。
- > 字符。

由此看来，我们可以使用  或 。但是，结束标记无效有效，所以不要使用 。

通过HTML Validation Service 运行以下命令表示同样多。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Testing void elements</title>
</head>
<body>
    some lines of txt <br>
    and then some more <br />
    I'm not done yet... <br> </br> <!-- This line generates an error -->
</body>
</html>

所以请使用  或 ，只要确保始终使用它们即可。

编辑：正如 Brad 所说，  也是有效的 XHTML，所以也许最好选择这种形式。

【讨论】：

只是好奇为什么有效的 XML 会是一个优势？
我应该说有效的 XHTML。有些人喜欢特别严格。我已经更新了对 XTML 的回答，而不是 XML。
@Greg 因为那时您可以使用更严格的解析器来告诉您您的标记是否有效。由于错误的嵌套或类似的事情，我无法计算我被有效但逻辑上错误的 HTML 标记咬伤的频率，这是 XML 验证器会告诉我的。我的最后一个项目 iN HTML5 使用 HTML 而不是 XHTML，这将是我的最后一个项目。浪费时间——不仅仅是为自闭标签写一些额外的字符。
我同意@Konrad。这就是为什么我的回答在使用 XHTML/XML 时提到“更好的工具支持”
@NicolasBarbulesco 它已经为 HTML5 做好了准备。在验证我在答案中发布的代码标记时，我收到一条错误消息“在检查此文档为 HTML5 时发现错误！”。实际上，doctypes 的下拉列表包含大约 26 个选项，因此不止您所说的两个选项。但是，W3C 验证服务警告说 HTML5 一致性检查器是一个实验性功能。所以它已经为 HTML5 做好了准备，但 HTML5 本身可能会发生变化，验证器可能与最新的标准不匹配。如果你注意到它没有，then report it

【解决方案3】：

更重要的是你要保持一致，如果你使用<!DOCTYPE html>，那么解析器将为你处理无效或自闭的标签。

决定采用一种方法并坚持下去，我们决定使用 xhtml 样式语法，但我们并没有真正使用 xhtml。即使解析器对其他需要能够理解您的标记的人更加宽容，所以如果您有一个标准并且每个人都认同这一点，那么每个人都在同一张赞美诗中唱歌。

为什么我们需要约定？因为以下所有内容都是有效的：

<META CHARSET=UTF-8>        
<META CHARSET=UTF-8 />      
<META CHARSET="UTF-8">      
<META CHARSET="UTF-8" />        
<meta charset=utf-8>        
<meta charset=utf-8 />      
<meta charset="utf-8">      
<meta charset="utf-8" />        
<MeTa CHARset=utF-8>

要考虑的另一件事是 html5 属性，我们决定在一组属性的末尾使用布尔样式属性，并始终在其他属性周围使用引号，例如：

<video id=“vid1” data-someting="my_val" controls>

这样我们就不必使用多余的语法（在我看来）：

<video id=“vid1” controls="controls">

仅仅因为 html5 允许我们省略结束标记，即使是  标记，它并不能使它正确。

我希望您决定使用 xhtml 'sytle' 语法来保持理智！

【讨论】：

简单有助于我的理智。简单并不总是意味着缺乏严谨性。这在数学和物理中很常见。我认为 HTML5 的出现是开始（或继续）简化网站规范的所有文本方面的绝佳时机。例如，将段落指定为 TEXT
而不是

TEXT
。只有当我们真的需要一个块时（或者在页面上移动它，或者用 JS 操作它），我们才将文本包含在一个块中。
与其说是一个语义段落，不如说是视觉元素之后/之前的视觉空间。

【解决方案4】：

恕我直言，我认为最好遵守 XHTML 标准，甚至关闭 @Alex 所指出的所谓的 void 元素。如果您的代码也是有效的 XML，那么您可能会找到更好的工具支持来管理您的代码

<br>  // not valid XML without a closing tag

<br /> // valid XML and I prefer this

<br></br>  // valid XML but unnecessary clutter

无论如何，如果您应该通过HTML Validation Service 运行您的代码。只要它是有效的，那么你就只处理编码风格，每个人都会对这个问题有自己的个人倾向。

[编辑]

为了澄清我的回答，我建议使用这些 XHTML 标头中的任何一个...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果您正在为 HTML5 编码，那么客户端/浏览器应该支持严格的标准

【讨论】：

  不是有效的 HTML。
如果您使用XHTML 1.0 Transitional，它将验证 。您是正确的，使用HTML 无法验证

【解决方案5】：

/ 在 html 5 中对void elements 有效且被忽略，其中br 是其中之一，所以这完全取决于你，尽管我个人会改掉这个习惯，因为它是一个遗留问题。（事实上它是一个 void 元素意味着正如你所说的那样；  是荒谬的）

【讨论】：

根据您链接到的规范：“void 元素只有一个开始标签；不能为 void 元素指定结束标签”，所以我猜答案是使用  或@987654326 @.