Question

虽然我已经问过自己这个问题，但是对于在桌子外工作的不同情况（你可以使用标题等），这里有一个例子：我有一个带有不同颜色的条形图形的页面，这是主要内容和上面我有一些内容（现在标记为<aside>）描述所有颜色，就像一个“图例”。

那么，语义学的最佳选择是什么？如果有很多选择并且“最佳”含糊不清，那就让搜索引擎称为“数据相关性”。

进一步大声思考： <legend>标签应该用于表单，这是一个很小的问题。角色属性？但是这么多的可能性我仍然找不到合适的可能性。

Answer 1

<figcaption>可能是你的元素。

根据HTML5规范：

The figcaption element represents a caption or legend for a figure

使用方法如下：

<figure>
    <figcaption>
        <dl>
            <dt class="yellow">Yellow</dt>
            <dd>Whatever yellow represents</dd>
        </dl>
    </figcaption>
    <img alt="Totally semantic representation of a bar chart" src="/chart.svg" />
</figure>

我冒昧地把你的个人传说放在一个定义列表中，因为它们充满了有趣的语义含义。

Answer 2

如果我正确理解您的示例，则不应使用aside。颜色图例对于理解内容非常重要，而不仅仅是“tangentially related”。

对于某些其他内容，HTML5并未提供表示某些内容是图例（以及其他内容！）的方法。

如果您认为自己的内容适合figure，则可以使用figcaption element作为图例。

如果您认为自己的内容适合table，则可以使用caption element作为图例。

否则，请使用header element的切片元素（或body作为独立文档），其中“通常包含一组介绍性或导航帮助”。介绍似乎已接近尾声。

<article><!-- or section -->
  <h1><!-- heading for your bar graphics --></h1>
  <div><!-- bar graphics --></div>
  <header><!-- color legend --></header>
</article>

如果颜色图例很复杂，并且它应该出现在文档大纲中，那么在主要内容的切片元素中给它自己的section可能是合适的。

<article><!-- or section -->
  <h1><!-- heading for your bar graphics --></h1>
  <div><!-- bar graphics --></div>
  <header>
   <section>
     <h1>Color legend</h1>
     <!-- color legend -->
   </section>
  </header>
</article>

这三种方式都适用于标记传奇;但他们并没有表示它确实一个传奇。 figcaption，caption和header也可用于其他事项。

是否有图例（外部表格或表格）的语义标签或属性（带值）？

2 个答案: