Семантический HTML для реакции статей - PullRequest
Новая
       18

Семантический HTML для реакции статей

0 голосов
/ 09 января 2019

Мне нужно создать раздел реакции для сообщений в блоге (подумайте, как реакции на Facebook), но мне интересно, является ли выбранная мной разметка семантически правильной. Будут ли реакции попадать под тег <aside> в <article>?

Я решил использовать элемент <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>

1 Ответ

0 голосов
/ 18 января 2019

Вы можете поместить его в элемент footer , так как это «информация о его разделе». Внутри этого footer вы можете продолжать использовать элемент aside, если списки реакций требуют раздела. 

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

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

</article>

Вместо элемента ul можно использовать элемент dl , который сообщает, что каждая запись списка состоит из метки и значения. 

<dl>

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

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

</dl>

Это не позволяет вам использовать figure + figcaption, хотя (за исключением только метки и значка), но я не думаю, что это добавляет полезную семантику в этом контексте в любом случае.

Хотя элемент output , кажется, подходит в соответствии с его определением («результат действия пользователя»), я не думаю, что он хорошо подходит в этом контексте - но это сложно сказать наверняка.

Что может быть полезным, так это предоставление ярлыка, который ясно показывает, что это число реакций. Если ярлык не должен быть виден на странице, вы можете использовать aria-label.

...