对于 <nav>标签,W3C定义似乎有点模糊:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. 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 footer element alone is sufficient for such cases; while a nav element can be used in such cases,it is usually unnecessary.

User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering,or who can benefit from navigation information being immediately available,can use this element as a way to determine what content on the page to initially skip and/or provide on request.

基于对其定义的非常严格的解释以及我通过验证遇到的内容,它看起来好像是< nav>应该只包含列表元素.但是,不应该将搜索视为一系列页面中的导航形式吗?

虽然我知道它的主要用途是用户代理,但是使用< nav>这似乎仍然是多余的.在< ul>之前标签,如果前者仅作为后者的容器.如果< nav>会更有意义.可以包含与导航相关的其他元素,不限于链接列表.

例如:

<nav role="navigation">
  <form action="http://google.com/search" method="get">
    <fieldset role="search">
       <input type="hidden" name="q" value="site:mysite.com" />
       <input class="search" type="text" name="q" results="0" placeholder="Search"/>
    </fieldset>
  </form>

  <ul class="top-navigation">
     <li><a href="/">Home</a></li>
     <li><a href="/about.html">About Me</a></li>
     <li><a href="/archive.html">Archives</a></li>
  </ul>
</nav>

除了验证之外,这不是< nav&gt ;?的可接受用途吗?与确保屏幕阅读器和其他辅助工具可以正确呈现页面相比,对于较少关注验证的人会产生什么影响呢?

解决方法

nav元素应该用于站点的主要导航项目,而不仅仅是所有导航项目.它也不必包含ul,但由于大多数时候它确实包含一个列表,因此它通常是有意义的,但不是必需的.

如果您的搜索是您网站的主要导航方法,那么无论如何都要将其放在导航中,尽管从上面给出的示例中,列表似乎是主导航,而不是您的搜索.

我已经写了一些关于在to nav or not to nav?使用nav标签的内容,虽然它没有提到搜索,这是一个有趣的观察.

HTML5中的语义用法与搜索表单元素的更多相关文章

  1. HTML5新增form控件和表单属性实例代码详解

    这篇文章主要介绍了HTML5新增form控件和表单属性实例代码详解,需要的朋友可以参考下

  2. wordpress添加Html5的表单验证required方法小结

    这篇文章主要介绍了wordpress添加Html5的表单验证required方法小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. HTML5表单验证特性(知识点小结)

    这篇文章主要介绍了HTML5表单验证特性的一些知识点,本文通过实例代码截图的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. android – 有没有办法阻止Mobile Safari在HTML表单的数字字段中插入逗号?

    我有一个网站,其中包含一个表单,允许用户输入信用卡详细信息.卡号,发行号,CVC号和他们希望存入的金额的字段使用HTML形式的输入框,类型为“数字”.iOS5附带的更新的MobileSafari会自动在“数字”输入字段中将逗号插入数字中.这不仅在CC编号中看起来很愚蠢,而且会破坏我的验证.有办法阻止这个吗?

  5. jquery validate表单验证的基本用法入门

    这篇文章主要为大家介绍了jquery validate表单验证的基本用法入门,jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求,感兴趣的小伙伴们可以参考一下

  6. jQuery插件Validation表单验证详解

    这篇文章主要为大家详细介绍了jQuery插件Validation表单验证的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  7. AngularJS实现表单验证功能详解

    这篇文章主要为大家详细介绍了AngularJS实现表单验证功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  8. jQuery插件formValidator实现表单验证

    这篇文章主要为大家详细介绍了jQuery插件formValidator实现表单验证的相关资料,需要的朋友可以参考下

  9. AngularJS学习笔记之表单验证功能实例详解

    这篇文章主要介绍了AngularJS学习笔记之表单验证功能,结合实例形式分析了AngularJS针对表单的校验、监控等相关操作技巧,需要的朋友可以参考下

  10. validationEngine 表单验证插件使用实例代码

    本文通过实例代码给大家介绍了jquery validationEngine 表单验证插件效果,非常不错,具有参考借鉴价值,需要的的朋友参考下吧

随机推荐

  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拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部