Разметка списка результатов поиска с использованием семантики HTML5

Создание списка результатов поиска (например, в Google) не очень сложно, если вам просто нужно что-то, что работает. Теперь, однако, я хочу сделать это с совершенством, используя преимущества семантики HTML5. Цель состоит в том, чтобы определить defacto способ маркировки списка результатов поиска, который потенциально может быть использован любой будущей поисковой системой.

Для каждого удара я хочу

  • закажите их, увеличив число
  • отобразить кликабельный заголовок
  • показать краткую сводку
  • отображать дополнительные данные, такие как категории, дату публикации и размер файла

Моя первая идея выглядит примерно так:

<ol>
  <li>
    <article>
      <header>
        <h1>
          <a href="url-to-the-page.html">
            The Title of the Page
          </a>
        </h1>
      </header>
      <p>A short summary of the page</p>
      <footer>
        <dl>
          <dt>Categories</dt>
          <dd>
            <nav>
               <ul>
                  <li><a href="first-category.html">First category</a></li>
                  <li><a href="second-category.html">Second category</a></li>
                </ul>
            </nav>
          </dd>
          <dt>File size</dt>
          <dd>2 kB</dd>
          <dt>Published</dt>
          <dd>
            <time datetime="2010-07-15T13:15:05-02:00" pubdate>Today</time>
          </dd>
        </dl>
      </footer>
    </article>
  </li>
  <li>
    ...
  </li>
  ...
</ol>

Я не очень-то доволен <article/> в <li/>. Во-первых, результат поиска - это не статья сама по себе, а просто краткое резюме. Во-вторых, я даже не уверен, что вам разрешено помещать статью в список.

Возможно, теги <details/> и <summary/> более подходят, чем <article/>, но я не знаю, могу ли я добавить <footer/> внутри этого?

Все предложения и мнения приветствуются! Я действительно хочу, чтобы каждая деталь была идеальной.

Ответы

Ответ 1

1) Я думаю, что вы должны придерживаться элемента article, поскольку

Элемент

[t] he article представляет собой автономная композиция в документ, страница, приложение или сайт и это должно быть независимо распределяемые или reusable [источник]

У вас есть только список отдельных документов, поэтому я считаю, что это вполне уместно. То же самое можно сказать и для первой страницы блога, содержащей несколько сообщений с заголовками и контурами, каждый в отдельном элементе article. Кроме того, если вы намереваетесь процитировать несколько предложений статей (вместо предоставления резюме), вы можете даже использовать элементы blockquote, например, в пример сообщение форума, показывающее исходные сообщения, на которые пользователь отвечает.

2) Если вам интересно, разрешено ли включать элементы article внутри элемента li, просто подайте его в валидатор. Как вы можете видеть, это разрешено. Более того, поскольку Рабочий проект говорит:

Контексты, в которых этот элемент может быть используется:

Где ожидается поток содержимого.

3) Я бы не использовал элементы nav для этих категорий, так как эти ссылки не являются частью основной навигации по странице:

только те разделы, которые состоят из основных блоков навигации, подходят для элемента nav. В частности, для нижних колонтитулов обычно имеется короткий список ссылок на различные страницы сайта, такие как условия обслуживания, домашняя страница и страница с авторскими правами. Для таких случаев достаточно элемента footer без элемента nav. [источник]

4) Не используйте элементы details и/или summary, поскольку они используются как часть interactive элементов и не предназначены для простых документов.

ОБНОВЛЕНИЕ: Относительно того, полезно ли использовать (un) упорядоченный список для представления результатов поиска:

Элемент ul представляет список пунктов, где порядок позиций не важно - то есть, где изменение порядка не будет существенно изменить смысл документ. [источник]

Как список результатов поиска на самом деле является списком, я думаю, что это подходящий элемент для использования; однако, поскольку мне кажется, что порядок важен (я ожидаю, что наилучший результат совпадения будет в верхней части списка), я думаю, что вместо этого вы должны использовать упорядоченный список (ol):

Элемент ol представляет список предметы, где предметы были преднамеренно упорядоченным, так что изменение порядка изменит смысл документа. [источник]

С помощью CSS вы можете просто скрыть числа.

EDIT:. Я просто понял, что вы уже используете ol (из-за моей усталости, я думал, что вы использовали ul). Я оставлю свое "обновление как есть"; в конце концов, это может быть полезно кому-то.

Ответ 2

Я бы разметил его таким образом (без использования каких-либо словарей или микроформатов RDFa/microdata, поэтому используйте только то, что дает простая спецификация HTML5):

<ol start="1">

  <li id="1">
    <article>
     <h1><a href="url-to-the-page.html" rel="external">The Title of the Page</a></h1>
     <p>A short summary of the page</p>
     <footer>
       <dl>
         <dt>Categories</dt>
         <dd><a href="first-category.html">First category</a></dd>
         <dd><a href="second-category.html">Second category</a></dd>
         <dt>File size</dt>
         <dd>2 <abbr title="kilobyte">kB</code></dd>
         <dt>Published</dt>
         <dd><time datetime="2010-07-15T13:15:05-02:00">Today</time></dd>
        </dl>
      </footer>
    </article>
  </li>

  <li id="2">
    <article>
     …
    </article>
  </li>

</ol>

start для ol

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

id для каждого li

Каждый li должен получить атрибут id, чтобы вы могли ссылаться на него. Значение должно быть ранг/позиция.

Можно подумать, что id следует указывать на article вместо этого, но я думаю, что это было бы неправильно: ранжирование/порядок могли меняться со временем. Вы не имеете в виду конкретный результат, а результат.

Удалите header

Он не нужен, если он содержит только заголовок (h1).

Добавьте rel="external" в ссылку

Ссылка на каждый результат поиска - внешняя ссылка (приводящая к другому веб-сайту), поэтому она должна получить значение rel external.

Удалите nav

Ссылки категории не являются навигацией в области article. Поэтому удалите nav.

Каждая категория в dd

Вы использовали:

<dt>Categories</dt>
<dd>
 <ul>
  <li><a href="first-category.html">First category</a></li>
  <li><a href="second-category.html">Second category</a></li>
 </ul>
</dd>

Вместо этого вы должны перечислить каждую категорию в своем собственном dd и удалить ul:

<dt>Categories</dt>
<dd><a href="first-category.html">First category</a></dd>
<dd><a href="second-category.html">Second category</a></dd>

abbr для размера файла

Блок в "2 кБ" должен быть помечен abbr:

2 <abbr title="kilobyte">kB</code>

Удалить атрибут pubdate

Это больше не в спецификации.

Другие действия, которые могут быть выполнены

  • присвоить ссылку hreflang ссылке, если связанный результат имеет другой язык, чем поисковая система
  • укажите атрибут lang для описания ссылки и сводки, если он находится на другом языке, чем поисковая система
  • summary: используйте blockquote (с атрибутом cite) вместо p, если поисковая система не создает сама сводка, но использует мета-описание или фрагмент со страницы.
  • описание заголовка/ссылки: используйте q (с атрибутом cite), если описание ссылки - это точно название со связанной веб-страницы.

Ответ 3

Я нашел хороший ресурс для HTML5 HTML5Doctor. Проверьте архив статей для практических реализаций новых тегов. Не полная ссылка ума, но достаточно приятная, чтобы облегчить это:)

Как показано на странице Footer element, разделы могут содержать нижние колонтитулы:)

Ответ 4

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