有没有办法在 HTML5 中创建自己的 html 标签？

Is there a way to create your own html tag in HTML5?

提问by Raanan Avidor

I want to create something like

我想创建类似的东西

<menu>
    <lunch>
        <dish>aaa</dish>
        <dish>bbb</dish>
    </lunch>
    <dinner>
        <dish>ccc</dish>
    </dinner>
</menu>

Can it be done in HTML5? I know I can do it with

可以在 HTML5 中完成吗？我知道我可以做到

<ul id="menu">
    <li>
        <ul id="lunch">
            <li class="dish">aaa</li>
            <li class="dish">bbb</li>
        </ul>
    </li>
    <li>
        <ul id="dinner">
            <li class="dish">ccc</li>
        </ul>
    </li>    
</ul>

but it is so much less readable :(

但它的可读性要低得多:(

回答by Timothy Perez

You can use custom tags in browsers, although they won't be HTML5 (see Are custom elements valid HTML5?and the HTML5 spec).

您可以在浏览器中使用自定义标签，尽管它们不是 HTML5（请参阅自定义元素是否有效 HTML5？和HTML5 规范）。

Let's assume you want to use a custom tag element called <stack>. Here's what you should do...

假设您要使用名为 的自定义标记元素<stack>。这是你应该做的...

STEP 1

第1步

Normalize its attributes in your CSS Stylesheet (think css reset) - Example:

在 CSS 样式表中标准化其属性（想想 css reset） - 示例：

 stack{display:block;margin:0;padding:0;border:0; ... }

STEP 2

第2步

To get it to work in old versions of Internet Explorer, you need to append this script to the head (Important if you need it to work in older versions of IE!):

要让它在旧版本的 Internet Explorer 中工作，您需要将此脚本附加到头部（如果您需要它在旧版本的 IE 中工作，这很重要！）：

 <!--[if lt IE 9]> 
 <script> document.createElement("stack"); </script>
 <![endif]-->

---

---

Then you can use your custom tag freely.

然后您可以自由使用您的自定义标签。

<stack>Overflow</stack>

Feel free to set attributes as well...

也可以随意设置属性...

<stack id="st2" class="nice"> hello </stack>

回答by mario

I'm not so sure about these answers. As I've just read: "CUSTOM TAGS HAVE ALWAYS BEEN ALLOWED IN HTML."

我不太确定这些答案。正如我刚刚读到的：“自定义标签一直被允许在 HTML 中使用。”

http://www.crockford.com/html/

http://www.crockford.com/html/

The point here being, that HTML was based on SGML. Unlike XML with its doctypes and schemas, HTML does not become invalid if a browser doesn't know a tag or two. Think of <marquee>. This has not been in the official standard. So while using it made your HTML page "officially unapproved", it didn't break the page either.

这里的重点是，HTML 基于 SGML。与具有文档类型和模式的 XML 不同，如果浏览器不知道一两个标签，HTML 不会变得无效。想想<marquee>。这在官方标准中是没有的。因此，虽然使用它使您的 HTML 页面“正式未经批准”，但它也没有破坏页面。

Then there is <keygen>, which was Netscape-specific, forgotten in HTML4 and rediscovered and now specified in HTML5. And also we have custom tag attributes now, like data-XyZzz="..." allowed on all HTML5 tags.

然后是 <keygen>，它是 Netscape 特定的，在 HTML4 中被遗忘并重新发现，现在在 HTML5 中指定。而且我们现在有自定义标签属性，比如 data-XyZzz="..." 允许在所有 HTML5 标签上。

So, while you shouldn't invent a whole custom unspecified markup salad of your own, it's not exactly forbidden to have custom tags in HTML. That is however, unless you want to send it with an +xml Content-Type or embed other XML namespaces, like SVG or MathML. This applies only to SGML-confined HTML.

因此，虽然您不应该自己发明一个完整的自定义未指定标记沙拉，但并不完全禁止在 HTML 中使用自定义标签。但是，除非您想使用 +xml Content-Type 发送它或嵌入其他 XML 命名空间，例如 SVG 或 MathML。这仅适用于受 SGML 限制的 HTML。

回答by Dan Menes

As Michael suggested in the comments, what you want to do is quite possible, but your nomenclature is wrong. You aren't "adding tags to HTML 5," you are creating a new XML document type with your own tags.

正如迈克尔在评论中所建议的那样，您想要做的事情很有可能，但是您的命名法是错误的。您不是“向 HTML 5 添加标签”，而是使用您自己的标签创建新的 XML 文档类型。

I did this for some projects at my last job. Some practical advice:

我在上一份工作中为一些项目这样做了。一些实用的建议：

1. When you say you want to "add these to HTML 5," I assume what you really mean is that you want the pages to display correctly in a modern browser, without having to do a lot of work on the server side. This can be accomplished by inserting a "stylesheet processing instruction" at the top of the xml file, like <?xml-stylesheet type="text/xsl" href="menu.xsl"?>. Replace "menu.xsl" with the path to the XSL stylesheet that you create to convert your custom tags into HTML.

2. Caveats: Your file must be a well-formed XML document, complete with XML header <xml version="1.0">. XML is pickier than HTML about things like mismatched tags. Also, unlike HTML, tags are case-sensitive. You must also make sure that the web server is sending the files with the appropriate mime type "application/xml". Often the web server will be configured to do this automatically if the file extension is ".xml", but check.

3. Big Caveat: Finally, using the browsers' automatic XSL transformation, as I've described, is really best only for debugging and for limited applications where you have a lot of control. I used it successfully in setting up a simple intranet at my last employer, that was accessed only by a few dozen people at most. Not all browsers support XSL, and those that do don't have completely compatible implementations. So if your pages are to be released into the "wild," it's best to transform them all into HTML on the server side, which can be done with a command line tool, or with a button in many XML editors.

1. 当您说要“将这些添加到 HTML 5”时，我假设您真正的意思是您希望页面在现代浏览器中正确显示，而不必在服务器端做很多工作。这可以通过在 xml 文件的顶部插入“样式表处理指令”来完成，例如 <?xml-stylesheet type="text/xsl" href="menu.xsl"?>。将“menu.xsl”替换为您创建的 XSL 样式表的路径，以将自定义标记转换为 HTML。

2. 警告：您的文件必须是格式良好的 XML 文档，并带有 XML 标头 <xml version="1.0">。对于不匹配的标签等问题，XML 比 HTML 更挑剔。此外，与 HTML 不同，标签区分大小写。您还必须确保 Web 服务器使用适当的 MIME 类型“application/xml”发送文件。如果文件扩展名是“.xml”，Web 服务器通常会被配置为自动执行此操作，但请检查。

3. 大警告：最后，正如我所描述的那样，使用浏览器的自动 XSL 转换真的只适用于调试和具有大量控制权的有限应用程序。我成功地使用它在我的上一个雇主建立了一个简单的内部网，最多只有几十人访问。并非所有浏览器都支持 XSL，那些没有完全兼容实现的浏览器。因此，如果您的页面要发布到“野外”，最好在服务器端将它们全部转换为 HTML，这可以使用命令行工具或许多 XML 编辑器中的按钮来完成。

回答by LukeN

Creating your own tag names in HTML is not possible / not valid. That's what XML, SGML and other general markup languages are for.

在 HTML 中创建您自己的标签名称是不可能的/无效的。这就是 XML、SGML 和其他通用标记语言的用途。

What you probably want is

你可能想要的是

<div id="menu">
    <div id="lunch">
        <span class="dish">aaa</span>
        <span class="dish">bbb</span>
    </div>
    <div id="dinner">
        <span class="dish">ccc</span>
    </div>
</div>

Or instead of <div/>and <span/>something like <ul/>and <li/>.

或者代替<div/>and 之类的<span/>东西<ul/>and <li/>。

In order to make it look and function right, just hook up some CSS and Javascript.

为了使它看起来和功能正确，只需连接一些 CSS 和 Javascript。

回答by long-lazuli

I just want to add to the previous answers that there is a meaning to use only two-words tags for custom elements. They should never be standardised.

我只想在之前的答案中补充一点，对于自定义元素只使用两个词的标签是有意义的。它们永远不应该被标准化。

---

---

For example, you want to use the tag <icon>, because you don't like <img>, and you don't like <i>neither...

例如，你想使用标签<icon>，因为你不喜欢<img>，你也不喜欢<i>......

Well, keep in mind that you're not the only one. Maybe in the future, w3c and/or browsers will specify/implement this tag.

好吧，请记住，您不是唯一一个。也许在未来，w3c 和/或浏览器会指定/实现这个标签。

At this time, browsers will probably implements native style for this tag and your website's design may break.

此时，浏览器可能会为此标签实现原生样式，您的网站设计可能会中断。

So I'm suggesting to use (according to this example) <img-icon>.

所以我建议使用 (根据这个例子) <img-icon>.

---

---

As a matter of fact, the tag <menu>is well defined ie not so used, but defined. It should contain <menuitem>which behave like <li>.

事实上，标签<menu>是明确定义的，即不是这么使用的，而是定义的。它应该包含<menuitem>行为像<li>.

回答by Chas

Custom tags can be used in Safari, Chrome, Opera, and Firefox, at least as far as using them in place of "class=..." goes.

自定义标签可以在 Safari、Chrome、Opera 和 Firefox 中使用，至少就使用它们代替“class=...”而言是这样。

green {color: green} in css works for

css 中的绿色 {color: green} 适用于

<green>This is some text.</green>

回答by Ionu? G. Stan

For embedding metadata, you could try using HTML microdata, but it's even more verbose than using class names.

对于嵌入元数据，您可以尝试使用HTML microdata，但它比使用类名更冗长。

<div itemscope>
    <p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>

<div itemscope>
    <p>My name is <span itemprop="name">Daniel</span>.</p>
</div>

回答by Dan Menes

Besides writing an XSL stylesheet, as I described earlier, there is another approach, at least if you are certain that Firefox or another full-fledged XML browser will be used (i.e., NOT Internet Explorer). Skip the XSL transform, and write a complete CSS stylesheet that tells the browser how to format the XML directly. The upside here is that you wouldn't have to learn XSL, which many people find to be a difficult and counterintuitive language. The downside is that your CSS will have to specify the styling very completely, including what are block nodes, what are inlines, etc. Usually, when writing CSS, you can assume that the browser "knows" that <em>, for instance, is an inline node, but it won't have any idea what to do with <dish>.

除了编写 XSL 样式表，正如我之前所描述的，还有另一种方法，至少如果您确定将使用 Firefox 或其他成熟的 XML 浏览器（即，不是 Internet Explorer）。跳过 XSL 转换，编写一个完整的 CSS 样式表，告诉浏览器如何直接格式化 XML。这里的好处是您不必学习 XSL，许多人认为 XSL 是一种困难且违反直觉的语言。缺点是你的 CSS 必须非常完整地指定样式，包括什么是块节点，什么是内联等。 通常，在编写 CSS 时，你可以假设浏览器“知道”<em>，例如，是一个内联节点，但它不知道如何处理 <dish>。

Finally, its been a few years since I tried this, but my recollection is that IE (at least a few versions back) refused to apply CSS stylesheets directly to XML documents.

最后，自从我尝试这个已经有几年了，但我记得 IE（至少有几个版本）拒绝将 CSS 样式表直接应用于 XML 文档。

回答by Paul D. Waite

The point of HTML is that the tags included in the language have an agreed meaning, that everyone in the world can use and base decisions on - like default styling, or making links clickable, or submitting a form when you click on an <input type="submit">.

HTML 的要点在于语言中包含的标签具有一致的含义，世界上的每个人都可以使用并根据其做出决定 - 例如默认样式，或使链接可点击，或在您点击<input type="submit">.

Made-up tags like yours are great for humans (because we can learn English and thus know, or at least guess, what your tags mean), but not so good for machines.

像你这样编造的标签对人类很有用（因为我们可以学习英语，因此知道或至少猜测你的标签的含义），但对机器来说不是那么好。

回答by Kirtan

As Nick said, custom tags are not supported by any version of HTML.

正如尼克所说，任何版本的 HTML 都不支持自定义标签。

But, it won't give any error if you use such markup in your HTML.

但是，如果您在 HTML 中使用这样的标记，它不会给出任何错误。

It seems like you want to create a list. You can use unordered list <ul>to create the rool elements, and use the <li>tag for the items underneath.

您似乎想创建一个列表。您可以使用无序列表<ul>来创建 rool 元素，并<li>为下面的项目使用标签。

If that's not what you want to achieve, please specify exactly what you want. We can come up with an answer then.

如果这不是您想要实现的目标，请准确说明您想要实现的目标。到时候我们就可以给出答案了。