用于添加自定义注释数据的语义 HTML 元素答案

【问题标题】：Semantic HTML elements for adding custom annotation data用于添加自定义注释数据的语义 HTML 元素
【发布时间】：2016-04-25 23:10:53
【问题描述】：

假设我有一个我感兴趣的 HTML 段落注释（即添加一些不应该显示的上下文，只是为文本添加含义）

<p>The ultimate measure of a man is not where he stands 
in moments of <tag data="some custom annotation">comfort and convenience</tag>,
but where he stands at times of challenge and controversy.</p>

在这种情况下应该使用什么正确的语义标签？

【问题讨论】：

1.谁应该使用注释？只有你？ 2. 注释是否只包含纯文本？ 3. 你用schema.org 标记了这个——为什么？它是否必须以某种方式使用词汇表 Schema.org 中的类型/属性？ 4. 你还用rdfa 标记了它——为什么？解决方案是否需要使用 RDFa？ 5. 当你用semantic-web 标记它时，解决方案是否必须基于RDF？

标签： html semantic-web schema.org rdfa

【解决方案1】：

您不使用特定的 HTML 标记，而是使用语义注释。您有两个选择：Microdata 和 RDFa。

两者都有similar capabilities 并且被搜索引擎爬虫理解。也就是说，Google 是 Microdata 的支持者。

关于即用型示例，您可以参考schema.org website。每个术语定义都显示了两种序列化的用法。您的 HTML 可能是：

微数据

<p itemscope itemtype="http://schema.org/Person">
  The ultimate measure of a man is not where he stands in moments of 
  <span itemprop="description">comfort and convenience</span>,
  but where he stands at times of challenge and controversy.
</p>

RDFa

<p vocab="http://schema.org/" typeof="Person">
  The ultimate measure of a man is not where he stands in moments of 
  <span property="description">comfort and convenience</span>,
  but where he stands at times of challenge and controversy.
</p>

如您所见，我只是使用<span> 来封装带注释的文本。除此之外，RDFa 和 Microdata 并没有什么不同。

另外，请查看RDF Translator app。它将帮助您调整注释。

【讨论】：

您的回答无关紧要，因为它没有解决我对注释的具体需求。这不是人，也不是描述，我只是想给一段文字添加语义注释。
然后我发现您的问题不完整并且使用的标签具有误导性。人只是一个例子。这就是您在语义 Web 中注释标记的方式。您定义了特色对象的边界（itemscope/typeof）并在内部注释对象属性（itemprop/property）。
请扩展您的问题，以便清楚您的意图。

【解决方案2】：

这种情况有一个特定的标签，指定语义而不显示内容。这是通过带有itemprop 和content 属性的meta 标记完成的，并且在schema.org 的入门部分中有很好的解释：

3c。缺失/隐含信息：使用带有内容的元标记

有时，网页包含有价值的信息 up，但信息不能被标记，因为它的方式出现在页面上。信息可以在图像中传达（例如例如，用于表示 4 分（满分 5 分）的图像或 Flash 对象（例如，视频剪辑的持续时间），或者它可能是暗示但未在页面上明确说明（例如，价格的货币）。

在这些情况下，使用 meta 标签和 content 属性指定信息。考虑这个例子——图像向用户展示了一个 5 星评分中的 4 星：
<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <img src="four-stars.jpg" />
  Based on 25 user ratings
</div>
这里又是一个标记了评级信息的示例。
<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating">
    <img src="four-stars.jpg" />
    <meta itemprop="ratingValue" content="4" />
    <meta itemprop="bestRating" content="5" />
    Based on <span itemprop="ratingCount">25</span> user ratings
  </div>
</div>
应谨慎使用此技术。仅将带有内容的元用于无法以其他方式标记的信息。

【讨论】：

【解决方案3】：

您可以考虑使用“自定义数据属性”。例如：<p data-custom-name="any-value">...</p>。

见： https://html5doctor.com/html5-custom-data-attributes/ 和https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

【讨论】：