HTML5中的语义用法与搜索表单元素

前端之家收集整理的这篇文章主要介绍了HTML5中的语义用法与搜索表单元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
对于 <nav>标签,W3C定义似乎有点模糊:
@H_403_3@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.

@H_403_3@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.

@H_403_3@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.

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

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

@H_403_3@例如:

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

解决方法

nav元素应该用于站点的主要导航项目,而不仅仅是所有导航项目.它也不必包含ul,但由于大多数时候它确实包含一个列表,因此它通常是有意义的,但不是必需的. @H_403_3@如果您的搜索是您网站的主要导航方法,那么无论如何都要将其放在导航中,尽管从上面给出的示例中,列表似乎是主导航,而不是您的搜索.

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

原文链接:https://www.f2er.com/html5/168434.html

猜你在找的HTML5相关文章