html5:如何标记专有名称和通用名称?

时间:2012-06-28 13:53:13

标签: html html5 accessibility semantic-markup

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

第一个“紫色”是公司的名称,第二个是颜色名称,

我应该如何根据html5规范标记这个?

提前谢谢

2 个答案:

答案 0 :(得分:4)

您有多种选择:

  1. 保持原样,HTML并不真正关心语义,而不是描述文档结构(段落,标题,列表等)。如果您想表达更详细的文档或应用程序语义,请查看WAI-ARIA
  2. 如果您将“紫色”这两个词用作网站或应用的一部分,请务必使用class属性或data-* attributes
  3. 如果单词具有规范的机器可读形式,并且您希望计算机以某种方式解析这些值,请使用the data element
  4. 如果区分这两种用途对于使用网站内容的用户或系统非常重要,请使用HTML5的语义可扩展性功能:Microdata。 (如果您使用的是HTML方言,请参阅:RDFa
  5. 根据您的直接需求,结合上述任何一种方法。
  6. 在你应该问自己的方法之间做出决定:

    • 我需要扩展HTML的语义词汇?
    • 是我自己使用的,还是我试图发布供他人使用的信息?
    • 如果我要为他人出版,我将使用什么共享词汇?

    代码示例:

    类属性

    他们的目的是为您的标记添加其他信息,请记住HTML规范中的class属性, CSS规范:

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

    话虽如此,当你以这种方式标记事物时,显而易见的事情是在页面工具中提供诸如“突出显示所有公司”之类的事情。人们已经使用class属性作为通用语义扩展机制的基础,但是,这种方法被极端地看作microformats

    数据属性

    data-*属性允许您向标记添加自定义属性,以便使用脚本进行处理,以确保您不会意外使用自定义属性,然后在未来的HTML版本中使用该属性:

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

    页面上的脚本可以使用data-*属性执行一些有用的操作,浏览器和其他Web客户端会忽略它们。

    自定义数据元素

    数据元素用于具有不精确的自然语言表达但也具有精确的机器可读表达的事物。假设公司可以通过股票代码符号唯一标识,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>
    

    我所知道的颜色没有任何颜色,但如果它对您很重要,您可以随时发布自己的模式。如果存在某种共享词汇,这种方法对任何人都有好处。

答案 1 :(得分:0)

哪个元素?

第一项任务是决定应该使用哪个元素来包含“实体”(公司名称和颜色名称)。很可能你想在这里使用span。如有疑问,请使用span。在某些情况下(取决于内容)可以使用其他元素:

  • b element 可能会被使用,如果该实体是某种关键字(“为了实用目的而引起注意的一段文字,而没有传达任何额外的重要性,也没有另一种声音或情绪的含义“)
  • 如果实体是作品的标题(书籍,电影,歌曲等),则应使用 cite element
  • 如果实体在同一段落或最近的祖先切片元素中定义,则可能会使用 dfn element
  • 在某些情况下, i element 可能是合适的

如果该术语是缩写/首字母缩略词,请使用 abbr element 而不是span resp。添加到 / em> b / dfn / i)。

一个好主意可能是使用 a element 将实体名称链接到相关网页。 rel属性可能会提供其他元数据(您可以使用rel values listed in the HTML5 specregistered rel values in the microformats wiki),具体取决于内容/上下文。

哪些属性?

查看global attributes

如果您想使用microformats,则会使用class属性。您当然可以使用其他class名称,但它们仅对您自己(文档,CSS,JS)或其他读取您的标记(文档,抓取)的人有用。

对于个人/公司名称等实体名称,您可能希望将translate属性与no关键字一起使用,因为不应翻译此类名称。

title可能会提供其他信息(请注意,它具有dfn / abbr的特殊语义),但不要依赖它来获取重要信息。

如果实体名称是外语,请使用lang

如何用含义注释内容?

有三种流行的选择,也可以一起使用(有关差异的简短摘要,请参阅this answer (the "third step")):

  • RDFa的
  • 微数据

您可能需要其他元素;如果是,请使用span