我可以将 HTML5 中的微数据添加到 XHTML Strict 站点并且仍然符合要求吗？答案

【问题标题】：Can I add Microdata from HTML5 to a XHTML Strict site and still be compliant?我可以将 HTML5 中的微数据添加到 XHTML Strict 站点并且仍然符合要求吗？
【发布时间】：2010-09-07 14:52:00
【问题描述】：

我有一个用 XHTML 1.0 Strict 编码的网站。我想使用新的微数据将面包屑添加到我的网站（Google will understand them）。

我的旧的非微数据标记面包屑如下所示：

<ul>
  <li><a href="...">Level 1</a></li>
  <li><a href="...">Level 2</a></li>
  <li><a href="...">Level 3</a></li>
</ul>

根据 Google 的说法，要使用 Microdata 标记面包屑，您可以像这样扩展上述代码：

<ul>
  <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="..." itemprop="url">
      <span itemprop="title">Level 1</span>
    </a>
  </li>
  ...
</ul>

但这不是有效的 XHTML 1.0 Strict。

我该怎么办？
我应该忽略验证冲突吗？
我应该写itemscope="itemscope" 而不仅仅是itemscope（这将是有效的XML，但仍然不是有效的XHTML）？
我应该将 Doctype 更改为 HTML5 而不是 XHTML 1.0 Strict？

我希望它可以一直工作到 IE6！

请指教:)

【问题讨论】：

为什么选择微数据？使用 RDFa 方言看起来应该是有效的 XHTML。
在我看来，Microdata 是 HTML5 的未来。所以这对我来说既是一种接触 HTML5 的方式 - 但它也使以后随着 HTML5 的成熟而更容易添加它。
W3C HTML5 工作组平等对待 HTML5+RDFa 和 HTML5+Microdata。两者都适用于 HTML 和 XHTML。 WHATWG 偏爱微数据，因为它是由 Ian Hickson (Hixie) 发明的，而 WHATWG 是 Hixie 的个人领地。

标签： validation html breadcrumbs xhtml-1.0-strict microdata

【解决方案1】：

是的，如果您想在 XHTML 中使用 itemscope，则需要编写 itemscope="itemscope" 并使用 XHTML5（与 HTML5 相同的 DOCTYPE，但使用 XML 语法）。

itemscope 不包含在 W3 HTML5 中，但存在于 WHATWG 的版本中，因此验证可能仍然是一个困难。在这个问题上似乎有很多political argument，我没有关注，因为它看起来相当乏味。

目前，如果您想在最终确定的、可验证的文档格式中使用面包屑注释，您可以改用 RDFa：替代（但较旧的）提案，该提案的全部内容，并使用现有的文档类型：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

【讨论】：

为了明确 W3C HTML5 中 Microdata 的状态，它仍然是 HTML5 工作组工作的一部分，但在单独的文档中定义。你可以在这里找到它：dev.w3.org/html5/md。这背后的理由很简单。 RDFa 和 Microdata 存在于相同的问题空间中，尚不清楚哪一个会受到网络作者的欢迎，因此 WG 的许多成员认为，在主要规范中没有任何一个最有可能为两者提供一个公平的竞争环境扩展机制来竞争。

【解决方案2】：

自从主要搜索引擎在去年六月（2011 年）决定将schema.org 作为实现丰富 sn-ps 的方式以来，这个问题变得更加重要，因为 XHTML5 还没有工作 DTD（顺便说一句，http://www.html5dtd.org/ 正在开发 XHTML5 DTD，当您阅读本文时可能已经准备好了，如果是这样，请忽略我要说的内容）。我要说的总结了几周前我在http://www.nedprod.com/programs/portable/XHTMLwithHTML5microdata/ 放置的一个页面，如果你想要的话，还有更多的细节，包括一个丰富的 sn-ps 演示。

我需要使用 schema.org/HTML5 微数据扩展 XHTML 1.x Strict 并使其全部正确验证以更新 nedprod，而 Microsoft Expression Web 偶尔会吃掉它编辑的 HTML，因此验证是方便在它borks时捕捉。因此，我创建了这些扩展标准 XHTML 1.0 的 DTD：

要使用，请复制一份您想要的 DTD（不要使用 nedprod 的原件，我负担不起带宽）并按如下方式使用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict with HTML5 microdata//EN" "xhtml1-strict-with-html5-microdata.dtd">

或者...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional with HTML5 microdata//EN" "xhtml1-transitional-with-html5-microdata.dtd">

...或者更有可能的是，覆盖您的特定 XML 验证设置用于验证的 DTD。

顺便说一句，这里有一些有趣的东西，我只包括它是因为在回答问题时知道它很有用。老实说，我认为使用上述文档类型会在渲染时调用 quirks 模式。结果让我大吃一惊的是，IE8、Chrome 14、Firefox 5 和 Opera 11.50 都在标准模式下呈现这样的文档类型。谁曾想到！因此，如果您愿意，您可以使用自定义 doctype 将 XHTML 页面上传到公共 Internet，并且更新的浏览器至少会做正确的事情。

希望这对某人有所帮助，
尼尔

【讨论】：

【解决方案3】：

有效的 HTML 5 示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example page</title>
</head>
<body>
    <div itemscope="" itemtype="http://schema.org/MediaObject">
        <div itemprop="video" itemscope="" itemtype="http://schema.org/VideoObject">
           <meta itemprop="name" content="Breast Augmentation Video Diary">
           <meta itemprop="duration" content="PT12M54S">
           <meta itemprop="thumbnailUrl" content="http://www.plastic-surgery-estonia.com/new-assets/images/thumbnails/breast-augmentation.jpg">
           <meta itemprop="contentURL" content="http://www.youtube.com/watch?v=BwPN6eCpxTk">
           <meta itemprop="embedURL" content="http://www.youtube.com/watch?feature=player_embedded&amp;v=BwPN6eCpxTk">
           <meta itemprop="uploadDate" content="2010-11-09">
           <iframe src="http://www.youtube.com/embed/BwPN6eCpxTk?rel=0&amp;autohide=1&amp;modestbranding=1&amp;showinfo=0"></iframe>
           <span itemprop="description">Video Diary</span>
        </div>
   </div>
</body>
</html>

发现这些链接很有帮助：
- http://support.google.com/webmasters/bin/answer.py?hl=en&answer=2413309&topic=1088474&ctx=topic
- http://www.reelseo.com/embedded-youtube-indexed-google/

【讨论】：

【解决方案4】：

使用application/ld+json MIME 类型和microdata generator 将标记转换为数据：

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>microdata.xhtml</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
    </head>
    <body>
      <div>
      <script type="application/ld+json">
      {"items": [{
        "type": ["https://schema.org/breadcrumb"],
        "properties":{ 
        "url": ["..."],
        "title": ["Level 1"]
        }
       }]
      }
      </script>
      </div>
    </body>
    </html>

或对象标签中的data:uri：

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>microdata.xhtml</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
    </head>
    <body>
      <div>
        <object data="data:text/html;charset=utf-8;base64,PHVsPiA8bGkgaXRlbXNjb3BlIGl0ZW10eXBlPSJodHRwOi8vZGF0YS12b2NhYnVsYXJ5Lm9yZy9CcmVhZGNydW1iIj4gICAgICAgICA8YSBocmVmPSIuLi4iIGl0ZW1wcm9wPSJ1cmwiPiAgICAgICAgICAgPHNwYW4gaXRlbXByb3A9InRpdGxlIj5MZXZlbCAxPC9zcGFuPiAgICAgICAgIDwvYT4gICAgICAgICA8L2xpPiAgICAgICA8L3VsPg==">

          <?microdata
          <ul>
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
             <a href="..." itemprop="url">
               <span itemprop="title">Level 1</span>
             </a>
            </li>
          </ul>
          ?>

        </object>
      
        <!--[if lt IE 8]>
        <object data="mhtml://#foo">

          <?microdata
          <ul>
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
             <a href="..." itemprop="url">
               <span itemprop="title">Level 1</span>
             </a>
            </li>
          </ul>
          ?>
          <div id="foo">
              PHVsPiA8bGkgaXRlbXNjb3BlIGl0ZW10eXBlPSJodHRwOi8vZGF0YS12b2NhYnVsYXJ5Lm9yZy9CcmVhZGNydW1iIj4gICAgICAgICA8YSBocmVmPSIuLi4iIGl0ZW1wcm9wPSJ1cmwiPiAgICAgICAgICAgPHNwYW4gaXRlbXByb3A9InRpdGxlIj5MZXZlbCAxPC9zcGFuPiAgICAgICAgIDwvYT4gICAgICAgICA8L2xpPiAgICAgICA8L3VsPg==
          </div>
       </object>
       <![endif]-->
      </div>
    </body>
    </html>

我希望它可以一直工作到 IE6！

使用application/xhtml+xmlXSLT shim 支持IE6 并对其进行扩展以获得标记的副本。

参考文献

【讨论】：

【解决方案5】：

尝试验证一些 google 的页面...他们不验证。验证是一种工具，一个很棒的工具，但仅此而已，尽管我确实为您的决心鼓掌。如果您担心验证，我会切换到 HTML5 。

【讨论】：

我使用的模板引擎需要有效的 XML（并输出 XML 序列化的 HTML5）。 <div itemscope> 会导致错误，因此这个问题并不像您的回答所暗示的那样毫无意义。
问题不在于发布者是否需要使用 xHtml，而在于是否可以使用微数据标签属性创建有效的 xHtml - xHtml 确实可以用作验证的有效 xml不仅仅是装饰性的打勾。
您在我的帖子中哪里看到了有关 xhtml 的信息？我可以阅读，但感谢您为我阅读。我是 xhtml 和验证的忠实粉丝。
只看到了这个 ;) 您的帖子中没有关于 xhtml 的具体内容，但您建议切换到 html 并且发帖人的问题明确指出他想将微数据添加到 xhtml 严格站点（即因此也关于xml）。
太神奇了，你们没有人可以阅读，而是为其他用户阅读。他问他应该怎么做。我给了他一个适合我的选择。你不喜欢那个选项，酷。我会少担心。他特别说“我该怎么做”。很抱歉抽出时间来提供对我有用的建议。