向HTML元素添加额外属性是不好的做法吗?

时间:2010-04-30 12:27:59

标签: html attributes custom-attributes

有时我会为某些控件添加一个属性。像:

<a href id="myLlink" isClimber="True">Chris Sharma</a>

我知道这不是一个有效的HTML。但在某些情况下它会帮助我。

这被视为不良做法吗?我的一位朋友说Intranet环境没问题,但在互联网上搜索引擎可能找不到它。

如果这不是一个好习惯,那么最佳实践是什么?

由于

6 个答案:

答案 0 :(得分:22)

如果您使用的是HTML5 doctype,则可以添加有效的 data attrbutes

以下内容将有效

<a href id="myLlink" data-isClimber="True">Chris Sharma</a>

答案 1 :(得分:9)

是。这被认为是一种不好的做法。您的HTML(如果它是4.0)将无法成功验证。相反,像这样添加一个类:

<a href id="myLlink" class="climber" >...</a>

请记住,您可以拥有多个班级:

<a href id="myLlink" class="climber girl pretty" >...</a>

您可以使用CSS或JQuery根据这些类选择内容,并根据组合有选择地覆盖样式:

a.climber             { color: brown; }
a.climber.girl        { color: red; }
a.climber.girl.pretty { color: pink; }

答案 2 :(得分:3)

这不是一个好的,也不是一个好的做法。

我猜你需要它来进行一些javascript处理。我通常通过添加自定义“class”属性来解决问题,前缀为“js”。

另一种解决方案是使用JQuery的store data/retrieve data功能,或者相当于任何其他框架,这意味着回显所有生成的HTML。

答案 3 :(得分:2)

这是无效的XHTML,这是一件坏事 - 主要是因为你无法用有效的XHTML炫耀;)每个主流浏览器和搜索引擎都会愉快地忽略额外的属性。您可以添加额外的命名空间,以使您的XHTML再次有效。

<html xmlns:my="http://example.com">
  <!-- SNIP -->
  <a href id="myLlink" my:isClimber="True">Chris Sharma</a>
  <!-- SNIP -->
</html>

这是完全有效的XHTML。但是,W3C Validator仍然会拒绝验证它(我认为)。这是他们的XML解析器的缺点。对于此类非命名空间感知解析器,my:isClimber仍将被视为isClimber。但是你现在可以轻松休息,因为你知道它是有效的XML,最后重要的是,不是吗;)

答案 4 :(得分:0)

使用jquery,

存储:$('#element_id')。data('extra_tag','extra_info');

检索:$('#element_id')。data('extra_tag');

这也发布在@ [http://stackoverflow.com/a/16985773/2458978] [1]

[1]:如何为某些HTML标签存储任意数据

答案 5 :(得分:-2)

我不认为这是不好的做法,它当然非常方便,而且正是你在xml环境中所做的。更重要的是您在这些自定义属性中保存的信息的性质以及它们在您的代码中的使用方式。

更好的替代方法是以不同的方式保存数据,例如jQuery的data()功能。