Разметка списка результатов поиска с семантикой HTML5 - PullRequest
24 голосов
/ 15 июля 2010

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

Для каждого попадания я хочу

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

MyПервая идея примерно такая:

<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/> внутри этого?

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

Ответы [ 4 ]

27 голосов
/ 19 июля 2010

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

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

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

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

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

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

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

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

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

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

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

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

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

Используя CSS, вы можете просто скрыть цифры.

РЕДАКТИРОВАТЬ: Ой, я только что понял, что вы уже используете ol (из-за моего усталости, я думал, что вы использовали ul). Я оставлю свое «обновление» как есть; в конце концов, это может быть кому-то полезно.

6 голосов
/ 15 августа 2012

Я бы разметил это таким образом (без использования словарей или микроформатов RDFa / микроданных; поэтому используйте только то, что дает простая спецификация 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

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

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

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

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

Удалите 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: используйте blockquotecite attribute) вместо p, если поисковая система сама не создает сводку, а использует мета-описание или фрагмент страницы.
  • title / link description: use q (с атрибутом cite), если описание ссылки в точности соответствует названию на связанной веб-странице
1 голос
/ 27 июля 2013

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

1 голос
/ 19 июля 2010

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

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

...