Наиболее подходящий элемент HTML5 для этого бизнес-заявления - PullRequest
Новая
       25

Наиболее подходящий элемент HTML5 для этого бизнес-заявления

0 голосов
/ 29 июня 2018

Странный вопрос, но я борюсь за семантику против доступности против появления. Обратите внимание, что этот вопрос относится не к CSS, а к основному коду HTML5. Обычно я бы не стал публиковать подобные вопросы, но это действительно переросло в дискуссию.

У меня есть бизнес-заявление на веб-сайте, в котором указано, почему моя организация является лучшей (на самом деле пример заявления ...):

Power statement

TL; DR Какой элемент HTML5 лучше всего использовать для отображения этого с точки зрения семантики / доступности?

Наше первоначальное предположение состояло в том, что простого списка будет достаточно: 

<ul>
    <li>Footballs:</li>
    <li>Rounder</li>
    <li>Better</li>
    <li>Stronger</li>
</ul>

Но тогда аргумент в том, что структура предложения была более важной, поэтому, возможно: 

<div>
    <span>Footballs:</span>
    <span>Rounder,</span>
    <span>Better,</span>
    <span>Stronger</span>
</div>

Однако этот подход затем отображается в запятых, что неприглядно. Тем не менее, контр-аргумент в моей голове говорит, что запятые должны быть там для программ чтения с экрана ...

Мы даже рассмотрели DataList, но он не выглядит совершенно правильным ... 

<dl>
    <dt>Footballs:</dt>
    <dd>
        <span>Rounder</span>
        <span>Better</span>
        <span>Stronger</span>
    </dd>
</dl>

Существует ли определенный элемент HTML5, который охватывает этот тип операторов?

Ответы [ 2 ]

0 голосов
/ 29 июня 2018

У вас есть список чего-то (в данном случае, преимущества), и HTML предлагает четыре способа передать это. Вы описываете три способа, а четвертый использует ol, но это уместно, только если порядок уместен, что, похоже, не так, поэтому мы можем его игнорировать.

Естественный язык

Просто предложение с пунктуацией: 

<p>Footballs: rounder, better, stronger.</p>

Вы можете добавить элемент span для стилизации. И вы можете даже визуально скрыть запятые, но нет необходимости идти по этому пути, просто используйте вместо этого одну из альтернатив разметки.

Разметка: ul

Включение "мячей" в список не имеет смысла. Этот «ярлык» должен быть вне списка. 

<p>Footballs:</p>
<ul>
  <li>Rounder</li>
  <li>Better</li>
  <li>Stronger</li>
</ul>

Разметка: dl

Три преимущества должны быть либо ul в одном dd, либо каждое из них должно быть dd. Существует семантическая разница , но в данном примере это не совсем четкое решение. 

<dl>
  <dt>Footballs</dt>
  <dd>
    <ul>
      <li>Rounder</li>
      <li>Better</li>
      <li>Stronger</li>
    </ul>
  </dd>
</dl>

<dl>
  <dt>Footballs</dt>
  <dd>Rounder</dd>
  <dd>Better</dd>
  <dd>Stronger</dd>
</dl>

Какой из них выбрать?

Если у вас все в порядке с отображением знаков пунктуации, используйте решение на естественном языке.

Если не должно быть знаков препинания, используйте ul. Он менее сложен, чем dl, и поскольку у вас нет дополнительных групп имен и значений, dl на самом деле не «стоит» этого.

0 голосов
/ 29 июня 2018

Если вы хотите перейти со списком, напишите: 

Footballs:
<ul>
  <li>Rounder</li>
  <li>Better</li>
  <li>Stronger</li>
</ul>

Потому что Footballs не является частью списка. Вы можете добавить Footballs в некоторые h теги.

Элементы второго не имеют смыслового значения и выглядят так, как если бы вы написали: 

Footballs: Rounder, Better, Stronger

Так что это правильно, если вы думаете, что запятые необходимы.

Третий будет, как если бы вы написали: 

Footballs: Rounder Better Stronger

Так что, если вы считаете, что это непонятно, и вам понадобятся запятые, вы не сможете использовать этот подход.

Я бы выбрал версию ul li для бизнес-статистики, потому что я вижу dl в словаре, подобном контексту.

...