Question

我需要为博客帖子创建一个反应部分（就像Facebook的反应一样），但是我想知道我选择的标记在语义上是否正确。反应会落在<aside>中的<article>标签下吗？

我决定使用带有<figure>的{{1}}元素作为反应的名称。现在，它只是一个使用表情符号的模拟游戏，但将来可能会是svg / img元素。

对于做出反应的人数，我决定使用<figcaption>元素。用户单击反应时，此数字将增加。

我不确定我的选择在语义上是否正确，是否希望获得一些反馈。我很犹豫在<output>标签中使用<output>，但在<figure>标签中允许在MDN that flow content中使用。

<figure>

.reactions {
  list-style: none; 
  display: flex;
  justify-content: center;
  text-align: center;
}
figure {
    display: flex;
    flex-direction: column;
  }

Answer 1

您可以将其放在footer element中，因为它是“有关其部分的信息”。在此footer内，如果反应列表中有必要说明，您可以继续使用aside元素。

<article>
  <h1>Me article heading</h1>

  <footer>
    <aside>
      <h2>Reactions</h2>
      <!-- reaction list -->
    </aside>
  </footer>

</article>

您可以使用dl element代替ul元素，它表示每个列表条目都包含一个标签和一个值。

<dl>

  <dt>Sad <span></span></dt>
  <dd>50</dd>

  <dt>Angry <span></span></dt>
  <dd>0</dd>

</dl>

尽管，这不允许您使用figure + figcaption（仅用于标签和图标），但我认为无论如何都不会在此上下文中添加有用的语义。

尽管output element似乎符合其定义（“用户操作的结果”），但我认为在这种情况下不适合它-但很难确定。

提供一个标签可以清楚地表明这些是反应的编号，这可能会有所帮助。如果标签在页面上不可见，则可以考虑使用aria-label。

语义HTML用于文章反应

1 个答案: