时间戳

首页 > 解决方案 > 用于文章反应的语义 HTML

html - 用于文章反应的语义 HTML

问题描述

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

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

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

我不确定我的选择在语义上是否正确，并且很想得到一些反馈。<output>我对在标签中使用犹豫不决，<figure>但它在MDN 中声明标签中允许流内容<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>

标签： htmlsemantic-markup

解决方案

您可以将它放在一个footer元素中，因为它用于“有关其部分的信息”。在 this中，如果反应列表需要一个部分footer，您可以继续使用该元素。aside

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

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

</article>

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

<dl>

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

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

</dl>

但是，这不允许您使用figure+ figcaption（仅标签和图标除外），但我认为它无论如何都不会在这种情况下添加有用的语义。

虽然该output元素似乎符合其定义（“用户操作的结果”），但我认为它不适合这种情况——但很难确定。

可能有用的是提供一个标签，清楚地表明这些是反应的数量。如果标签不应该在页面上可见，您可以考虑使用aria-label.

推荐阅读