Data属性中的HTML标记

Question

在弄乱Twitter标记的同时，我发现他们将HTML标记放在data-expanded-footer中，它看起来像这样：

data-expanded-footer="<div class="js-tweet-details-fixer tweet-details-fixer">
    <div class="js-tweet-media-container "></div>
      <div class="entities-media-container " style="min-height:0px">
    </div>
  <div class="js-machine-translated-tweet-container"></div>
  <div class="js-tweet-stats-container tweet-stats-container ">
  </div>
  <div class="client-and-actions">
    <span class="metadata">
      <span title="12:11 PM - 10 Apr 13">12:11 PM - 10 Apr 13</span>
           &middot; <a class="permalink-link js-permalink js-nav" href="/****/status/****" >Details</a>
    </span>
  </div>
</div>"

1. 这是一个有效的html元素（此属性是div元素的子元素，类推文）

2. 如果这是有效的，这是一个好主意，如果不是为什么？

3. 这对搜索引擎优化是如此糟糕吗？

修改

只是尝试从数据属性解析HTML并且它有效但是如果你想让它像以下那样工作应该有一个引用：

http://jsfiddle.net/burimshala/crEXU/

如果你在标记中使用双引号就像twitter一样离开，如果用双引号打开data-markup属性，它就不起作用：

http://jsfiddle.net/burimshala/crEXU/1/

Twitter如何解析这个？

Answer 1

data-*属性是有效的HTML5，请参阅：

http://ejohn.org/blog/html-5-data-attributes/ 和http://www.w3.org/TR/2010/WD-html5-20101019/elements.html

它的主要用途是用于数据存储（在这种情况下是HTML代码）。这一切都取决于你的情况，如果这是一个好主意，但它绝对有用。我经常在我想克隆时使用它。动态内容。

它是一个“看不见的”＆＃39;因此，SEO不应该真正受到影响，但我不是这方面的专家。

Answer 2

这很好宣告，我不会说它对搜索引擎优化有害，因为其他SEO因素如微搜索引擎优化（hCard，vCard或架构）都使用HTML属性。 只要您的网站对W3C有效，并且没有任何标记错误（请点击此处）：http://validator.w3.org/，而不是您对SEO的好处。

对于SEO友好的唯一小问题是，如果您的HTML标记代码将始终击败网站TEXT。 SEO的Remmeber总是更好，最低51％的网站是Text，而其他HTML则属于。