HTML5语义化标签

很多同学一提到语义化就觉得这只是一种规范，既然是规范，遵不遵循也没有多大影响，这种想法是错误的，如果你仍然是那种div标签跑遍整个页面的，请务必看看接下来我们要将的关于HTML语义化的知识

定义

使用正确的标签做正确的事情，即使是源码也是有意义的，也是可读的，理解起来很简单，人眼能看到的某个标签长什么样，做什么用，但是阅读设备智能阅读源码结构，所以必须要让这个结构是有意义的组织。

目的和效果

1. 方便其他设备如屏幕阅读器、盲人阅读器、移动设备解析
2. 提升用户体验
3. SEO优化
4. 便于团队开发和维护

怎么做

1. 尽可能少的使用无语义的标签，比如<div>和<span>
2. 不要使用纯样式用途的标签，<b> <font>而是该用css来实现，原则就是HTML负责内容和结构，而样式则交由CSS全权负责
3. 每个input都应该配备一个label标签说明其用途，并使用for属性关联
4. 请勿使用非表单元素来实现表单功能，比如用div来实现按钮，虽然样式上可以看上去一致，但是你会失去表单元素原生的一些功能，比如键盘的可访问性，无法通过tab键获取焦点
5. 确保按钮和链接文本标签是可以理解的，不要使用 点击这里 类似的文本，因为屏幕阅读器用户有时会列出按钮和表格控件列表
6. 使用表格时，标题要用caption，表头用thead，主体部分用tbody,尾部用tfoot，表头和一般单元格要区分开，表头用th,单元格用td
7. 图片img标签始终添加alt属性，其内容提供图像的直接表示以及他在视觉上传达的内容，任何个人说明或额外描述都不应该包含在这里，而应该放到title属性中
8. img标签中的图片应该是内容，具有意义，如果纯粹是为了视觉装饰，则应该作为css背景图像，
9. 使用HTML5的新标签
     

• <header> 代表整个网页和section的页眉
• <footer>代表整个网页和section的页脚
• <hgroup>组合标题
• <nav>页面导航链接
• <aside>附属信息
• <article>文档内容
• <mark>突出显示文本