你应该使用HTML5的header和footer标签吗？

2014年5月6日

Matt Wilcox说：

“我现在还没有用例如<header>和<footer>这样的标签。我非常惊奇现在有那么多的浏览器开始支持它们了，但是我仍然不知道它们到底比div好在哪了？”

这是个好问题。我的回答是“应该用”。这两个元素（包括<nav>和<main>）是在某些浏览器上给用户带来一些便利的辅助技术。


在HTML的规范中，HTML元素会被映射到ARIA。有一些可能被作者重写了，如果还没有变，他们只是实现了ARIA默认的语法。一个<header>元素不是继承或映射自role=banner的文章或段落；它仅是被包含的，自由的HTML元素；


这些不是每处都需要实现的； Steve Faulkner的 html5accessibility.com 采用tabs的实现。例如，<footer>会让chrome在IA2中将其解析成一个<footer>，Firefox会解析成ARIA标签role="contentinfo"。（当不是一篇文章或段落中的元素时）


这些对用户是有用的，我们可以看看 WebAIM的第五次年度用户调查， （它显示出，相比第一次，用户在访问网站的时侯比之前的调查更加积极了。）


当问到“你在屏幕上滑到这个地标/区域的频率有多高？”（例如："contentinfo", "banner", "main", "navigation"), 26%的人回答： “当它们可见时”。


20%的人认为每页1~3个标签/区域，是极好的；29%的人认为4~6个是合适的数字。


所以我的建议是： 对的，使用它们－特别是主要的几个，如<header>, <footer>, <nav> 还有 （每页一个的） <main>。在不支持它们的浏览器或设备上，它们不会引起问题。但是不要滥用。




更新：  5月13号


当你内容需要的时侯，尽可能多的使用<header>, <footer> － 只有当主header/footer用来实现banner和contentinfo的角色时。至少要使用它们一次（就像你有一个页眉、页脚一样）。

对首要的导航使用<nav>标签。

使用<main>，但每页仅使用一次。


补充* nav, footer, header 这些标签可以让手机浏览器/webview等更好地适配，用户体验更好。但IE8以下浏览器并不原生支持，纯桌面应用并不适合；也可使用 html5shiv 兼容支持，它原理是将这些html5标签转换为DIV显示。