制作搜索结果列表(如Google)不是很难,如果您只需要有用的东西。然而,现在,我想用完美的方式,使用HTML5语义的好处。目标是定义标记可能被任何未来搜索引擎使用的搜索结果列表的违反方式。

对于每个命中,我想

>通过增加订单
>显示可点击的标题
>显示一个简短的总结
>显示类别,发布日期和文件大小等附加数据

我的第一个想法是这样的:

<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)我认为你应该坚持文章元素,as

[t]he article element represents a
self-contained composition in a
document,page,application,or site
and that is intended to be
independently distributable or
reusable 07000

你只有一份单独的文件,所以我认为这是完全适当的。博客的首页也同样如此,其中包含几个带有标题和大纲的帖子,每个帖子都在一个单独的文章元素中。此外,如果您打算引用文章的几句话(而不是提供摘要),您甚至可以使用blockquote元素,例如the example of a forum post显示用户正在回复的原始帖子。

2)如果您想知道是否允许在li元素中包含文章元素,只需将其提供给验证器即可。正如你所看到的,允许这样做。而且,正如Working Draft所说:

Contexts in which this element may be
used:

Where 07003 is expected.

3)我不会为这些类别使用​​导航元素,因为这些链接不是页面主导航的一部分:

only sections that consist of major navigation blocks are appropriate for the 07004 element. In particular,it is common for footers to have a short list of links to varIoUs pages of a site,such as the terms of service,the home page,and a copyright page. The 07005 element alone is sufficient for such cases,without a nav element. 07006

4)不要使用细节和/或概要元素,因为它们作为interactive elements的一部分使用,不适用于简单文档。

更新:关于如果使用(un)有序列表来呈现搜索结果是个好主意:

The ul element represents a list of
items,where the order of the items is
not important — that is,where
changing the order would not
materially change the meaning of the
document. 07008

作为搜索结果的列表实际上是一个列表,我认为这是适当的元素使用;然而,在我看来,顺序很重要(我希望最好的匹配结果在列表的顶部),我认为你应该使用有序列表(ol):

The ol element represents a list of
items,where the items have been
intentionally ordered,such that
changing the order would change the
meaning of the document. 07009

使用CSS可以简单地隐藏数字。

编辑:哎呀,我只是意识到你已经使用了一个(由于我的脾气,我以为你使用了一个ul)。我会离开我的’更新’原样;毕竟,这可能对某人有用。

用HTML5语义标记搜索结果列表的更多相关文章

  1. 基于EJB技术的商务预订系统的开发

    用EJB结构开发的应用程序是可伸缩的、事务型的、多用户安全的。总的来说,EJB是一个组件事务监控的标准服务器端的组件模型。基于EJB技术的系统结构模型EJB结构是一个服务端组件结构,是一个层次性结构,其结构模型如图1所示。图2:商务预订系统的构架EntityBean是为了现实世界的对象建造的模型,这些对象通常是数据库的一些持久记录。

  2. js中‘!.’是什么意思

  3. InnoDB 和 MyISAM 引擎恢复数据库,使用 .frm、.ibd文件恢复数据库

  4. Error: Cannot find module ‘node:util‘问题解决

    控制台 安装 Vue-Cli 最后一步出现 Error: Cannot find module 'node:util' 问题解决方案1.问题C:\Windows\System32>cnpm install -g @vue/cli@4.0.3internal/modules/cjs/loader.js:638 throw err; &nbs

  5. yarn的安装和使用(全网最详细)

    一、yarn的简介:Yarn是facebook发布的一款取代npm的包管理工具。二、yarn的特点:速度超快。Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。超级安全。在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。超级可靠。使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。三、y

  6. 前端环境 本机可切换node多版本 问题源头是node使用的高版本

    前言投降投降 重头再来 重装环境 也就分分钟的事 偏要折腾 这下好了1天了 还没折腾出来问题的源头是node 使用的高版本 方案那就用 本机可切换多版本最终问题是因为nodejs的版本太高,导致的node-sass不兼容问题,我的node是v16.14.0的版本,项目中用了"node-sass": "^4.7.2"版本,无法匹配当前的node版本根据文章的提

  7. 宝塔Linux的FTP连接不上的解决方法

    宝塔Linux的FTP连接不上的解决方法常见的几个可能,建议先排查。1.注意内网IP和外网IP2.检查ftp服务是否启动 (面板首页即可看到)3.检查防火墙20端口 ftp 21端口及被动端口39000 - 40000是否放行 (如是腾讯云/阿里云等还需检查安全组)4.是否主动/被动模式都不能连接5.新建一个用户看是否能连接6.修改ftp配置文件 将ForcePassiveIP前面的#去掉 将19

  8. 扩展element-ui el-upload组件,实现复制粘贴上传图片文件,带图片预览功能

  9. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  10. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部