Создание списка результатов поиска (например, в 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/>
внутри этого?
Все предложения и мнения приветствуются! Я действительно хочу, чтобы каждая деталь была идеальной.