html5 : how to markup proper names and common names?

Question

<p>...the favourite color of Purple is purple...</p>

第一个“Purple”是公司名，第二个是颜色名，

我应该如何根据 html5 规范对其进行标记？

提前谢谢你

Answer 1

您有多种选择:

1. 保持原样，HTML 并不真正关心与描述文档结构(段落、标题、列表等)无关的语义。如果您确实想表达更详细的文档或应用程序语义，请查看 WAI-ARIA .
2. 如果区分紫色一词在您的网站或应用中的两种用法对您来说很重要，那么请使用 class 属性或 data-* attributes
3. 如果单词具有规范的机器可读形式并且您希望计算机以某种方式解析这些值，请使用 the data element .
4. 如果区分这两种用途对使用您网站内容的用户或系统很重要，请使用 HTML5 的语义扩展功能:Microdata . (如果您使用的是 HTML 的 XML 方言，另请参阅:RDFa)
5. 根据您的即时需求组合上述任何方法。

要在两种方法之间做出决定，您应该问自己:

• 出于什么目的我需要扩展 HTML 的语义词汇表？
• 它是供我自己使用，还是我试图发布信息以供他人使用？
• 如果我要为其他人发布内容，我将使用哪些共享词汇？

代码示例:

类属性

它们的作用是向您的标记添加附加信息，请记住 class 属性在 HTML 规范中，不是在 CSS 规范中:

<p>...the favourite color of <span class="company">Purple</span>
  is <span class="color">purple</span>...</p>

话虽如此，当然，一旦以这种方式标记了内容，显然要做的事情就是在页面工具中提供“突出显示所有公司”等操作。人们已经使用 class 属性作为通用语义扩展机制的基础，然而，对于这种极端的方法，请参见 microformats .

数据属性

data-* 属性允许您将自定义属性添加到您的标记中以使用脚本进行处理，以保证您不会意外使用自定义属性，然后在HTML 的 future 版本:

<p>...the favourite color of <span data-typeofthing="company">Purple</span>
  is <span data-typeofthing="color">purple</span>...</p>

您页面上的脚本可以使用 data-* 属性做一些有用的事情，浏览器和其他网络客户端将忽略它们。

自定义数据元素

数据元素适用于具有不精确的自然语言表达但也具有精确的机器可读表达的事物。假设公司可以通过股票代码唯一标识，RGB 将用于颜色:

<p>...the favourite color of <data value="purp">Purple</data>
  is <data value="rgb(128,0,128)">purple</data>...</p>

浏览器可能不会对 data 元素做任何特殊的事情。您很可能会将 data 元素与微格式、RDFa 或微数据一起使用。

微数据

使用 Organization schema :

<p>...the favourite color of 
  <span itemscope itemtype="http://schema.org/Organization">
    <span itemprop="name">Purple</span>
  </span>
is purple...</p>

据我所知，没有关于颜色的任何内容，但如果它对您很重要，您可以随时发布自己的架构。只有存在某种共享词汇表时，这种方法才会真正使任何人受益。