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

Question

假设我有一个 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>

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

Answer 1

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

两者都有 similar capabilities 并且被搜索引擎抓取工具理解。也就是说 Google 是 Microdata 的支持。

ready-to-use个例子可以参考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 和微数据并没有什么不同。

此外，请务必查看 RDF Translator app。它将帮助您 fiddle 进行注释。

Answer 2

这个案例有一个特定的标签，在不显示内容的情况下指定语义。这是通过具有 itemprop 和 content 属性的 meta 标记完成的，并且在 schema.org:

的入门部分中有很好的解释

3c. Missing/implicit information: use the meta tag with content

Sometimes, a web page has information that would be valuable to mark up, but the information can't be marked up because of the way it appears on the page. The information may be conveyed in an image (for example, an image used to represent a rating of 4 out of 5) or a Flash object (for example, the duration of a video clip), or it may be implied but not stated explicitly on the page (for example, the currency of a price).

In these cases, use the meta tag along with the content attribute to specify the information. Consider this example—the image shows users a 4 out of 5 star rating:
<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">.95</span>
  <img src="four-stars.jpg" />
  Based on 25 user ratings
</div>
Here is the example again with the rating information marked up.
<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">.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>
This technique should be used sparingly. Only use meta with content for information that cannot otherwise be marked up.

Answer 3

您可以考虑使用 "Custom Data Attributes"。例如：<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

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

Semantic HTML elements for adding custom annotation data

html

semantic-web

schema.org

rdfa

微数据

RDFa