问题描述
我发现一个网站有一个向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}
- 我发现没有资源可以证明自定义标签对搜索引擎有任何负面影响。事实上,谷歌发布了,它提供了自定义标签(
< pane>
中的示例中添加了code>< tab> - 大多数HTML编辑器会将您的自定义代码标记为无效的HTML,因为它们不在官方规范中。
总结:
- 当有重要元素的
意味着< div>
且有不存在HTML 4/5
等价。这对于
解析特殊标签/属性/类的DOM来创建
组件(例如Angular.js)的Web应用程序尤其如此。 - 构建是具有正常内容的简单网站,将
粘贴到标准HTML。 - 如果您构建了一个网络应用程序,其中自定义标签真的可以
帮助使源代码更清晰,并表达特殊语义,使用
。上面提到的所有负面影响(JavaScript必须是
打开/ CSS声明)对这些情况无关紧要。相同的
规则适用于自定义属性。
有关此主题的更多详细信息:
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 ascustom-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 moremeaning than
<div>
and there is no existing HTML 4/5equivalent. This is especially true for web applications whichparse the DOM for special tags/attributes/classes to createcomponents (like Angular.js). - If all you build is a simple website with normal content, stickto standard HTML. You will want your website to work also withoutJavaScript turned on.
- If you build a web application where custom tags could reallyhelp to make the source cleaner and express special semantics, usethem. All negative implications mentioned above (JavaScript has to beturned on / CSS declaration) won't matter for these cases. The samerules apply to custom attributes.
For more details on this topic: IE compatibility for Angular.js
这篇关于自定义标签...为什么不?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!