OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

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


分享到
分类 编程技巧   关键字 Html5   发布 ourjs  1400053330828
注意 转载须保留原文链接,译文链接,作者译者等信息。  
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显示。




原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 编程是一个没有前途的工作
  2. 你已经毁了JavaScript
  3. 为什么我不建议你将JavaScript作为主力语言
  4. 你用什么工具开发JavaScript?
  5. 现在,你为什么应该学Node.js
  6. 将JavaScript 作为第一编程语言
  7. 什么是最优秀的JavaScript框架?Angular or Backbone?
  8. 使用Backbone构建精美应用的7条建议
  9. 抛弃jQuery,深入原生的JavaScript
  10. 干嘛不在企业中使用Node.js呢?
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 编程技巧
  1. PHP开发者常犯的10个MySQL错误
  2. 一些达成共识的JavaScript编码风格约定
  3. 写给 Node.js 学徒的 7 个建议
  4. 优秀工具推荐:超实用的 CSS 库,样板和框架
  5. NodeJS on Nginx: 使用nginx反向代理处理静态页面
  6. 高级JavaScript调试—— console.table()
  7. 技术干货:Nginx 战斗准备 — 优化指南
  8. 性能测评:Ngix_Lua, Node.JS Python三者性能相当,均比php快近一倍
  9. 代码审查:写出好的 commit message
  10. 永远不要在Linux执行的10个最危险的命令

 关键字 - Html5
  1. 用纯CSS实现的箭头
  2. 让Select选择框可编辑可输入可自动补全可下拉选择
  3. HTML5的TCP和UDP Web Socket API草案定稿
  4. 传统广告与H5广告的差别在哪里?
  5. WeMall微信商城源码插件代金券部分代码
  6. WeMall微信商城源码插件会员卡代码详情
  7. WeMall微信商城源码插件大转盘代码详情
  8. 你应该使用HTML5的header和footer标签吗?
  9. 5个实用Web界面设计工具 | 附开发案例
  10. 从PDF转换到HTML5的三种方法,你用过吗?

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号