用于文章反应的语义 HTML答案

【问题标题】：Semantic HTML for article reactions用于文章反应的语义 HTML
【发布时间】：2019-01-09 04:40:01
【问题描述】：

我需要为博客文章创建一个反应部分（像 Facebook 反应一样思考），但我想知道我选择的标记在语义上是否正确。反应是否属于<article> 中的<aside> 标签？

我决定使用<figure> 元素和<figcaption> 作为反应名称。现在它只是一个使用表情符号的模拟，但在未来它可能是一个 svg/img 元素。

对于做出反应的人数，我决定使用<output> 元素。当用户点击反应时，这个数字会增加。

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

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

<article>
  <header>
    <h1>Me article heading</h1>
  </header>
  <section>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta quos, voluptatem ab aliquam perspiciatis magnam a ullam aspernatur neque unde similique omnis doloremque at, sit dolorum natus velit dolores. Illo.</p>
  </section>
  <aside>
     <ul class="reactions">
          <li>
            <figure>
              <figcaption>Like</figcaption>
              ????
              <output>16</output>
            </figure>
          </li>
          <li>
            <figure>
              <figcaption>Sad</figcaption>
              ????
              <output>50</output>
            </figure>
          </li>
          <li>
            <figure>
              <figcaption>Angry</figcaption>
              ????
              <output>0</output>
            </figure>
          </li>
          <li>
            <figure>
              <figcaption>Wow</figcaption>
              ????
              <output>234</output>
            </figure>
          </li>
          <li>
            <figure>
              <figcaption>LOL</figcaption>
              ????
              <output>9</output>
            </figure>
          </li>
        </ul>
      </aside>
</article>

【问题讨论】：

您只是显示交互，而不是为用户提供添加自己的交互的方式吗？ Facebook 的方法两者兼而有之。

标签： html semantic-markup

【解决方案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。

【讨论】：