Повышение результата поиска перечисляет с семантикой 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/>, но я не знаю, могу ли я добавить a <footer/> в этом?

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

25
задан Adi 15 August 2012 в 13:59
поделиться

2 ответа

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

28
ответ дан 28 November 2019 в 21:27
поделиться

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

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

1
ответ дан 28 November 2019 в 21:27
поделиться
Другие вопросы по тегам:

Похожие вопросы: