是什么阻止我在 HTML 中使用任意标签？答案

【问题标题】：What's stopping me from using arbitrary tags in HTML?是什么阻止我在 HTML 中使用任意标签？
【发布时间】：2010-08-29 06:06:26
【问题描述】：

即使是新的 HTML5 标签也不足以描述结构而不回退到divs。是什么阻止我改变：

<div class="post">
    <div class="userinfo">
        <span class="name">Casey</span>
        <img class="avatar" src="..." />
    </div>
    <div class="body">
        <p>blah blah blah</p>
        <p>blah blah blah</p>
        <p>blah blah blah</p>
    </div>
</div>

变成类似：

<post>
    <userinfo>
        <name>Casey</name>
        <img class="avatar" src="..." />
    </userinfo>
    <pbody>
        <p>blah blah blah</p>
        <p>blah blah blah</p>
        <p>blah blah blah</p>
    </pbody>
</post>

对我来说，第二个例子更简洁。有什么（即浏览器支持）阻止我这样做吗？

（我意识到它本质上是 XML，但在这种情况下，问题就变成了，“浏览器对呈现 XML 网页的支持是什么样的？”）

【问题讨论】：

什么阻止了你？规格，呃。
如果您想要在所有浏览器中运行并被搜索引擎抓取的有效页面 - 我真的会远离它。但是，没有什么能阻止您使用 XSLT 将 XML 文档转换为 HTML。 Umbraco 成功地使用了这个非常。
请 Jon Skeet 为您创建一种新语言。
@shamittomar 我不明白你想说什么
浏览器将不知道如何设置新标签的样式，您需要告诉它是否使用 display: block、inline 等。除此之外，我不知道浏览器会有任何原因不接受您提供的语义标签。如果我们要使内容索引/搜索更智能，我们将需要有意义的语义标签，比如您包含的那些。我找不到 HTML5 规范明确禁止可扩展性 (XML) 的参考。我会说尝试一下，测试一下，如果一切顺利，那就去做吧。否则请发起请愿，让 XHTML5 (HTML5+XML) 重回正轨。（内容类型：application/html5+xml）

标签： html xml standards specifications

【解决方案1】：

好消息

没有什么能阻止你
使用尽可能多的自定义标签，浏览器会知道你的意思。不仅是现代的，还有 IE7+。
无默认外观
浏览器会将您的标签视为未知，并且不会对其应用默认样式。没有奇怪的边距，填充，跨客户和平台没有惊喜。 display 属性也不是隐含的，所以给它一个值，但在那之后，一切都照常。 DOM 包含您的节点、querySelector 作品、样式应用等。
超级易读
您会喜欢 HTML 源代码的新外观。

需要考虑的事项

是否自动关闭 - 要使您的标签自动关闭，请使用旧的 <something/> 格式，例如 <br/>。这很重要，否则浏览器会寻找结束标签。我的意思是，他们怎么可能不呢。
未来的冲突 - 这是自定义标签怀疑论者的唯一优点：正如我们在 HTML5 中有很多新标签一样，您有可能将标签命名为“图标”，这意味着下一个 HTML 标准中的一些东西，即使有一堆呈现默认值，可能会严重破坏你的页面。所以我想说，如果您想安全起见，请使用<dashed-names> 作为标签，由于Web Components 的命名，它们永远不会与虚线标签名称混淆。另请查看§ 4.13 in HTML standard 本身。
怪磁铁效应 - 说真的，这是自定义标签的问题，我一直在走这条路。仅在每个从事同一个项目的人都参与的情况下使用自定义标签。否则，每当出现问题时，“因为你愚蠢的自定义标签”都是你的错，你必须将每个实例都更改为通常的 <div class="gurgleburgle">，后来才发现真正的问题完全不相关。

TLDR：

    <custom-tags> Yes you can use them </custom-tags>

【讨论】：

【解决方案2】：

您可以使用自己的标签，但问题是由于它们不是标准的，浏览器不会知道它们可能有匹配的结束标签。当然，该文档不会被验证为正确的 HTML/X-HTML。

<blah>
    This is some <span>test</span> test text with another <bogus>tag</bogus> tag
    within, which ends with a fake self-closing <tag />
</blah>

浏览器将看到<blah>，而不是现在如何处理它，并将其视为本质上“无”并忽略它。然后他们会很高兴地解析到下一位，并看到一些纯文本，里面有一个有效的跨度。最终他们会到达</blah> 并忽略它。

这就是为什么 Javascript 和 CSS 必须支持打开 HTML 注释序列作为其各自语言定义的一部分：

<script type="text/javascript">
<!--  // <--actually a part of the javascript spec, treated as a comment.
     alert('hey!');
//-->
</script>

当首次引入 Javascript 时，仍有许多其他浏览器完全不了解 Javascript，因此它们会忽略标签，并愉快地输出您的 Javascript 代码。 CSS 也是如此。

如果您确实需要自定义标签，您可以将文档生成为 XML 并附加您自己的 DTD，然后使用 XSLT 将其转换为有效的 HTML/X-HTML 文档。

【讨论】：

关于browsers won't know that they may have matching closing tags.这部分我其实不这么认为..你有什么测试可以确认吗？
<html><body><blah>You'll see this text</blah></body></html> 在任何浏览器中尝试。如果未知标签被忽略并检查结束标签，您将看不到文本。
@Marc B 。我在 Chrome / FF / IE / Opera / Safari 的最新版本中看到了文本。我相信它适用于任何你能想到的浏览器，它的互联网用户份额超过 0.1%
是的，这就是我回答的重点。浏览器将未知标签视为单例（如<br />）并简单地输出标签的内部内容，这就是为什么有额外的箍可以跳过以从旧的不知情的浏览器中隐藏该内容。
“浏览器将未知标签视为单例”。这是完全错误的。浏览器将未知标签视为“容器”标签，而不是单例。打开 Web 检查器并查看页面 <html><body><blah>You'll see this text</blah></body></html> 的文档树。如果你不相信，试试这个：<html><body><blah style="color:red;">You'll see this text</blah></body></html>

【解决方案3】：

问题是它不会验证并且新标签会被简单地忽略。

【讨论】：

我的印象是验证实际上没有任何意义，对于忽略新标签的问题，CSS 可以轻松解决这个问题 (post, userinfo, pbody { display: block })。
@Casey，您的印象不正确。 display: block will not fix the missing tags issue in IE: IE 不理解的元素不会应用任何样式。您需要使用另一种解决方案（JavaScript 或 HTC）让 IE 理解标签。它也不能解决早期版本的 Firefox 的问题，它会重新嵌套未知元素。
在这个答案中应该提到它只适用于IE和其他旧浏览器。
需要说明的是，这条评论有9年了，可能老化得不好。

【解决方案4】：

一个原因是 Internet Explorer（和早期版本的 Firefox）没有对未定义的标签的回退，并且最终会在样式和嵌套时忽略它们。 Without a shiv，您的网站会在这些浏览器中严重崩溃。

【讨论】：

不能通过为新标签/任意标签添加诸如“显示”之类的样式规则来克服这个缺点吗？未定义样式不是拒绝使用有效 xml 标签作为 html5 语义扩展的充分理由。如果我们要将文档结构化为有意义且可搜索的格式，则非常需要它。 W3C 添加了许多语义标签，但他们无法预测所有需要的标签。 HTML5 使用 XML 语法，并且应该支持 XML 可扩展性 - 需要注意的是设计者必须告诉浏览器如何设置它的样式。 HTML 是关于标记，而不是样式。

【解决方案5】：

大多数浏览器只会将标签视为任意标签（就像旧浏览器如何对待 HTML5 标签一样）。没有什么能阻止您使用自己的标签，但这并不是一种广为接受的 HTML 编码方式。 HTML 应该使用预定义的标签。

如果您对使用任意标签进行编码感兴趣，则可以使用 XML。您可以使用 XSLT 格式化 XML（以类似于样式表的方式使用，但功能更强大）。看看这里：http://www.w3schools.com/xml/xml_xsl.asp

【讨论】：

【解决方案6】：

您选择标签的目的是什么？如果您的目标是呈现信息，那么使用 div 和其他面向呈现的结构非常棒。您的标签看起来更像是在尝试描述实际数据。如果是这种情况，那么在服务器端使用 XSLT 转换 XML 以输出 HTML 用于表示标记是最好的。请记住，浏览器只是一个渲染引擎，它使用 HTML 规范作为为给定站点渲染内容的蓝图。浏览器不需要理解诸如“post”或“userInfo”之类的信息，因为它没有上下文来理解从渲染角度使用该信息做什么。 CSS 可以帮助浏览器直观地理解您想要做什么，但首先要问自己以这种方式使用标记的目的是什么，以存储您的数据（XML 样式）或呈现它。如果要呈现它，那么如果您想继续使用浏览器作为渲染引擎，则应该遵循标准。祝你好运，如果我们都可以定义我们的演示方案，那就太好了，有趣的想法！

【讨论】：

【解决方案7】：

getElementsByTagName 让我无法使用自定义标签。例如，

<acme:mytag id="mytag">
    <div id ="x">x</div>
    <div id ="y">y</div>
    <div id ="z">z</div>
</acme:mytag>

使用 IE8（Quirks 模式或标准模式）失败

var mytag = document.getElementById('mytag'); // it's found
var mydivs = mytag.getElementsByTagName ('div'); // but this is always 0

除非你的 html 标签读取

<html XMLNS:acme>
...
</html>

【讨论】：