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

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

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

<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?


html semantics schema.org microformats
person TarranJones    schedule 11.05.2013    source источник
comment
Вопрос не определяет, что означает «семантическая разметка» (распространенное модное слово с очень расплывчатой ​​семантикой) и чего предполагается достичь. Первый пример кода является недопустимой разметкой, а второй - нелогичным (заголовки без содержимого, для которого они были бы заголовками), поэтому на самом деле невозможно сделать вывод, в чем может заключаться цель.   -  person Jukka K. Korpela    schedule 12.05.2013

Ответы (2)


arrow_upward
2
arrow_downward

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

strong element представляет "большую важность за его содержание ". Вы увеличиваете важность, используя несколько 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>
person unor    schedule 11.05.2013
comment
Избегайте сложного содержания в <li>. См. здесь. - person Ian Y.; 18.05.2013
comment
@IanY .: Я не согласен с Ричардом в этом случае. Пример. Представьте себе страницу результатов поисковой системы. Каждый результат будет article и может содержать заголовок, фрагмент, фотографию, дополнительные ссылки и т. Д. И все эти результаты (→ articles) должны быть в ol (отсортированы по рангу). Этот пример был бы даже сложнее, чем список желаний. - Однако я не думаю, что вам придется использовать список в моем последнем примере со списком желаний, но я бы не сказал, что этого следует избегать. - person unor; 25.05.2013
comment
Я опубликовал идею о результатах поиска страница. И здесь - ответ. - person Ian Y.; 26.05.2013
comment
@IanY .: Опять же, я с ним не согласен. article не только для полных текстов. Однако это не относится к делу: вы все равно захотите использовать секционирующий элемент. Поэтому, если Ричард не хочет использовать article, он может использовать section (или вообще не использовать секционный элемент, чего я бы не советовал) → но это не меняет аргументации сложности, который он делал раньше. Контент по-прежнему будет сложным (заголовок + аннотация + фото + теги + автор + дата +…), независимо от того, какой элемент вы используете. - person unor; 26.05.2013

arrow_upward
1
arrow_downward

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

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

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

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

person sourcejedi    schedule 11.05.2013