自定义标签...为什么不？ [英] Custom tags... why not?

问题描述

我发现一个网站有一个向html添加自定义标签的指南，就像人们使用新的HTML5标签一样。我必须承认，我认为添加自己的标签将是巨大的，将更容易扫描的代码，并找到你要找的。
但是每个网站我发现，人们说这不好....但是为什么不好呢？

示例html类： / p>

 < ul class =commentlist> 
< li class =comment odd> 
< div class =1> 
< div class =avatar> 
< img src =http://placehold.it/60x60width =60height =60/> 
< / div> 
< div class =metadata> 
< div class =name> Name< / div> 
< p> response1< / p> 
< / div> 
< / div> 
< ul class =children> 
< li class =comment even> 
< div class =2> 
< div class =avatar> 
< img src =http://placehold.it/60x60width =60height =60/> 
< / div> 
< div class =metadata> 
< div class =name> Name< / div> 
< p> response1a< / p> 
< / div> 
< / div> 
< / li> 
< li class =comment odd> 
< div class =3> 
< div class =avatar> 
< img src =http://placehold.it/60x60width =60height =60/> 
< / div> 
< div class =metadata> 
< div class =name> Name< / div> 
< p> response1b< / p> 
< / div> 
< / div> 
< / li> 
< / ul> 
< / li> 
  

与自定义标签，我认为这将更容易找到我的方式，所以为什么不：

 < clist> 
< ccommentbox class =odd> 
< ccomment class =1> 
< cavatar> 
< img src =http://placehold.it/60x60width =60height =60/> 
< / cavatar> 
< cdata> 
< cname>名称< / cname> 
< ctext> response1< / ctext> 
< / cdata> 
< / ccomment> 
< cchildren> 
< ccommentbox class =even> 
< ccomment class =2> 
< cavatar> 
< img src =http://placehold.it/60x60width =60height =60/> 
< / cavatar> 
< cdata> 
< cname>名称< / cname> 
< ctext> response1a< / ctext> 
< / cdata> 
< / ccomment> 
< / ccommentbox> 
< ccommentbox class =odd> 
< ccomment class =3> 
< cavatar> 
< img src =http://placehold.it/60x60width =60height =60/> 
< / cavatar> 
< cdata> 
< cname>名称< / cname> 
< ctext> response1b< / ctext> 
< / cdata> 
< / ccomment> 
< / ccommentbox> 
< / cchildren> 
< / ccommentbox> 
  

解决方案>

自定义标签不是邪恶

只需考虑以下情况：

• 默认情况下，它们不能在IE 6-8中识别 - >您必须使用JavaScript来介绍您在页面上使用的每个自定义标记，例如： document.createElement（'


• 在大多数浏览器中，您的自定义标签将被视为内联元素如< span> ，这意味着您必须编写CSS才能将它们声明为 custom-tag {display：block}


• 我发现没有资源可以证明自定义标签对搜索引擎有任何负面影响。事实上，谷歌发布了 Angular.js ，它提供了自定义标签（< pane> 首页 中的示例中添加了code>< tab>


• 大多数HTML编辑器会将您的自定义代码标记为无效的HTML，因为它们不在官方规范中。

总结：

• 当有重要元素的
  意味着< div> 且有不存在HTML 4/5
  等价。这对于
  解析特殊标签/属性/类的DOM来创建
  组件（例如Angular.js）的Web应用程序尤其如此。


• 构建是具有正常内容的简单网站，将
  粘贴到标准HTML。


• 如果您构建了一个网络应用程序，其中自定义标签真的可以
  帮助使源代码更清晰，并表达特殊语义，使用
  。上面提到的所有负面影响（JavaScript必须是
  打开/ CSS声明）对这些情况无关紧要。相同的
  规则适用于自定义属性。

有关此主题的更多详细信息： Angular.js的IE兼容性

I found a site with an guide to add custom tags to html, the same way people make ie work with the new HTML5 tags. I must admit I think it would be great to add my own tags, would make it easier to "scan" the the code, and find what you are looking for. But every site I found about it, people say it's not good.... but why isn't it good?

Example html with class:

<ul class="commentlist">
    <li class="comment odd">
    <div class="1">
        <div class="avatar">
            <img src="http://placehold.it/60x60" width="60" height="60" />
        </div>
        <div class="metadata">
            <div class="name">Name</div>
            <p>response1</p>
        </div>
    </div>
    <ul class="children">
        <li class="comment even">
            <div class="2">
                <div class="avatar">
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </div>
                <div class="metadata">
                    <div class="name">Name</div>
                    <p>response1a</p>
                </div>
            </div>
        </li>
        <li class="comment odd">
            <div class="3">
                <div class="avatar">
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </div>
                <div class="metadata">
                    <div class="name">Name</div>
                    <p>response1b</p>
                </div>
            </div>
        </li>
    </ul>
</li>

And here what I could do with custom tags, I think that would be much easier to find my way around, so why not:

<clist>
<ccommentbox class="odd">
    <ccomment class="1">
        <cavatar>
            <img src="http://placehold.it/60x60" width="60" height="60" />
        </cavatar>
        <cdata>
            <cname>Name</cname>
            <ctext>response1</ctext>
        </cdata>
    </ccomment>
    <cchildren>
        <ccommentbox class="even">
            <ccomment class="2">
                <cavatar>
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </cavatar>
                <cdata>
                    <cname>Name</cname>
                    <ctext>response1a</ctext>
                </cdata>
            </ccomment>
        </ccommentbox>
        <ccommentbox class="odd">
            <ccomment class="3">
                <cavatar>
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </cavatar>
                <cdata>
                    <cname>Name</cname>
                    <ctext>response1b</ctext>
                </cdata>
            </ccomment>
        </ccommentbox>
    </cchildren>
</ccommentbox>

解决方案

Custom tags are not evil

just consider this:

• They are not recognized in IE 6-8 by default -> you have to use JavaScript to introduce each custom tag you use on the page e.g: document.createElement('custom-tag') This means your website will only render correctly with JavaScript turned on
• In most browsers your custom tags will be treated as inline elements like <span>, this means you have to write CSS to declare them as custom-tag { display: block }
• There is no resource I found that could proof that custom tags have any negative impact on search engines. In fact Google released Angular.js which promotes custom tags (<pane> and <tab>) in its examples on the front page.
• Most HTML Editors will mark your custom tags as invalid HTML, because they are not in the official spec.

To summarize:

• Use custom tags when there are important elements that have more meaning than <div> and there is no existing HTML 4/5 equivalent. This is especially true for web applications which parse the DOM for special tags/attributes/classes to create components (like Angular.js).
• If all you build is a simple website with normal content, stick to standard HTML. You will want your website to work also without JavaScript turned on.
• If you build a web application where custom tags could really help to make the source cleaner and express special semantics, use them. All negative implications mentioned above (JavaScript has to be turned on / CSS declaration) won't matter for these cases. The same rules apply to custom attributes.

For more details on this topic: IE compatibility for Angular.js

这篇关于自定义标签...为什么不？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！