如何在 HTML5 中编码搜索结果页面答案

【问题标题】：How to code Search result page in HTML5如何在 HTML5 中编码搜索结果页面
【发布时间】：2014-01-03 08:05:22
【问题描述】：

我正在尝试寻找用 HTML5 编写搜索结果页面的最佳方式。

这就是我的做法。

<section>

  <header>
    <h2>Results for <kbd>this terms</kbd></h2>
  </header>

  <!-- list of results -->
  <ol>

    <!-- First result -->
    <li>
      <article>
        <header>
          <h3>
            <cite>
              <a href="http://addressofthepage.ch/">This is a result</a>
            </cite>
          </h3>
        </header>
        <blockquote cite="http://addressofthepage.ch/">
          <p>So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.</p>
          <footer>
            <p>Published <time datetime="2010-07-15T13:15:05-02:00">MMMM DDth, YYYY</time> at the <abbr title="Uniform Resource Locator">URL</abbr> <a href="http://addressofthepage.ch/">http://addressofthepage.ch/</a></p>
          </footer>
        </blockquote>
      </article>
    </li>

    <!-- Second result ... and so on -->
    <li>...</li>

  </ol>  
</section>

主要问题是

<header> 提到了搜索词。最好使用什么标签？ <kbd>?
如果<cite>标签位于<header>中，它是否与<blockquote>相关？
将<cite> 放在blockquote > footer 中不是更好，比如<p>[...] at the URL <cite><a href="http://addressofthepage.ch/">http://addressofthepage.ch/</a></cite></p>

所有这些都可以在Gist上获得

【问题讨论】：

标签： html search

【解决方案1】：

是一种显示键的方式。这就是为什么许多网站将标签设置为键盘键的原因。您没有显示键，而是显示了搜索词。 <span> 应该没问题。也许添加一个像<span class="search-term"> 这样的类。
从语义上讲，不，因为它不是孩子，所以不会相关。
使用 cite 和 blockquote 的“正确”HTML 是：

这里引用...
— Foo Bar

这里的 HTML 要点：https://gist.github.com/OscarGodson/5a3e87ce895b3af952de（stackoverflow 在代码标签中呈现 HTML 时似乎有问题？！）

注意引用和页脚标签。根据规范：

blockquote 元素表示从另一个引用的内容来源，可选地带有必须在页脚内的引文或引用元素，并且可以选择使用注释等内联更改和缩写。引用以外的块引用内的内容并且必须从另一个来源引用在线更改，其地址，如果有的话，可以在 cite 属性中引用。

来源：http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-blockquote-element

要记住的主要内容，并且来自长期从事此工作的人，语义很重要，但不要想太多。当然，blockquote 有一些关于如何正确使用它的严格规则，但是浏览器会处理你给它的任何东西。做对你的应用有意义的事情，只要一切都不是跨度和 div，90% 的时间应该是足够语义化的。如果您过度分析这些内容，您将花费更多时间来决定使用哪个标签，而不仅仅是完成任务;)

【讨论】：