Как я могу подчеркнуть важность отдельных элементов в неупорядоченном списке

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

Вот пример того, что я имею в виду.

<ul itemscope itemtype="http://schema.org/ItemList">
  <h2 itemprop="name">Wish List</h2><br>
  <li itemprop="itemListElement">Google glass</li>
  <li itemprop="itemListElement">Galaxy S4</li>
  <li itemprop="itemListElement">MacBook Pro</li>
</ul>

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

<ul itemscope itemtype="http://schema.org/ItemList">
  <li itemprop="itemListElement"><h6>Least Important</h6></li>
  <li itemprop="itemListElement"><h1>Most Important</h1></li>
</ul>

Я просто ищу маленький совет о том, есть ли ПРАВИЛЬНЫЙ способ сделать это? возможно микроданные, микроформаты или RDFa?

Источник

2 ответа

Решение

Вы не должны использовать заголовки таким образом. Содержание заголовка важно, да, но это не значит, что важным содержанием должен быть заголовок. Ваш первый пример неверен (список может содержать только li элементы), ваш второй пример портит схему документа.

strong элемент представляет "сильную важность для его содержания". Вы увеличиваете важность, используя несколько strong элементы для того же контента:

Относительный уровень важности содержимого определяется числом его предков. strong элементы; каждый strong элемент увеличивает важность его содержимого.

Спецификация HTML5 также имеет пример для такого использования:

<p>
  <strong>Warning.</strong> This dungeon is dangerous.
  <strong>Avoid the ducks.</strong> Take any gold you find.
  <strong><strong>Do not take any of the diamonds</strong>,
  they are explosive and <strong>will destroy anything within
  ten meters.</strong></strong> You have been warned.
</p>

(Обратите внимание, что <strong>Do not take any of the diamonds</strong> вложено в другое strong элемент)

Так что это правильный путь в HTML5.

Относительно вашего примера: если у вас есть список пожеланий, отсортированный от наименее важного до (или наоборот), вы должны использовать ol скорее, чем ul, так как порядок является значимым и важным. Таким образом, ваш список пожеланий может выглядеть так:

<ol reversed>
  <li><!-- least important item --></li> 
  <li><!-- another not-soo-very important one --></li>
  <li><strong><!-- important --></strong></li>
  <li><strong><!-- more important than the previous one, but not that much of a difference --></strong></li>
  <li><strong><strong><!-- most important item --></strong></strong></li> 
</ol>

(Если это не отсортировано таким образом, перейдите с ul и использовать strong элементы соответственно.)

Теперь вы можете улучшить это с помощью RDFa или Microdata, конечно. Поэтому вам нужен соответствующий словарь. Я не знаю ни одного. Может быть, вы могли бы использовать какую-то рейтинговую лексику? Вы можете дать каждому предмету оценку / оценку, например, сколько вы хотите получить.

Теоретический пример в Turtle:

myWishlistItems:1 ex:hasImportance 0.9
myWishlistItems:2 ex:hasImportance 0.85
myWishlistItems:3 ex:hasImportance 0.7
myWishlistItems:4 ex:hasImportance 0.7
myWishlistItems:5 ex:hasImportance 0.7
myWishlistItems:6 ex:hasImportance 0.2

Альтернатива: укажите семантику в контенте, например, сгруппируйте уровни важности.

Вы могли бы использовать dlНапример:

<section>
  <h1>My wishlist</h1>

  <dl>
    <dt>MUST HAVE!</dt>
      <dd>…</dd>
      <dd>…</dd>
    <dt>Would be very cool</dt>
      <dd>…</dd>
      <dd>…</dd>
    <dt>I like that, sometimes</dt>
      <dd>…</dd>
      <dd>…</dd>
  </dl>

</section>

или ol с section элементы, так что вы можете использовать заголовки группировки, например:

<section>
  <h1>My wishlist</h1>

  <ol>

    <li>
      <section>
        <h2>MUST HAVE!</h2>
        <ul>
          <li>…</li>
          <li>…</li>
        </ul>
      </section>
    </li>

    <li>
      <section>
        <h2>Would be very cool</h2>
        <ul>
          <li>…</li>
          <li>…</li>
        </ul>
      </section>
    </li>

    <li>
      <section>
        <h2>I like that, sometimes</h2>
        <ul>
          <li>…</li>
          <li>…</li>
        </ul>
      </section>
    </li>

  </ol>

</section>
Источник

Если вам нужна шкала с несколькими уровнями приоритета, в html это сделать невозможно. Использование заголовков загромождает контур, что явно "не семантически". Скорее всего, не стоит пытаться выразить это в RDF. Что бы это потреблять? Возможно, вы имеете в виду больше деталей, которые бы пролили больше света на это...

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

Вы можете упростить это до упорядоченного списка - элементы в порядке приоритета. Или два уровня важности, где несколько важных элементов выделены с помощью <strong>,

(Если вы воспринимаете спецификацию HTML5 буквально, вы можете <strong> несколько раз для более высоких уровней приоритета. Но это вряд ли будет поддерживаться для вашего варианта использования. Не в текущих программах чтения с экрана и не в таблице стилей по умолчанию для браузера. Так что я не считаю это законным использованием).

Источник
Другие вопросы по тегам