html5语义与结构元素
前言
本文所讨论的html5新标签仅限于语义与结构类的元素，也就是在html5.0规范中新增的用于提供解释意义的元素。
div 与语义化新标签对于
平日里偶尔能看到一些谈论 html5 新特性的文章或是面试题。对于2008年就发布的 html5 而言，这些特性其实并不新鲜，只是相对前代的新。所以 html5 的标签语义与结构化也已经是一个老生常谈的问题了。作为一个深受 div + span 体系熏陶的前端开发，加之项目中可引入的html5新标签极少，所以个人接触新标签的机会也并不多，那么就趁此机会来学习一下语义标签。
时至今日，通过审查元素可以发现，至少在我日常浏览的网页中，只有极少数html5新加入的标签。放眼望去几乎都是 <div> 标签，偶尔能看到超链接地方的 <a> 标签，亦或是内联元素 <span> 标签。个人认为<div>标签好用的原因有以下几点
通过为
<div>标签加类名的形式，分离dom与样式代码，提高了代码的可读性，也让开发人员写代码变的更加快速高效。同时对于整个系统来说，提高了扩展与可维护性，当类名进行有序维护后，样式改版或是多皮肤样式的推进将变的十分简单。使用
div页面结构层次更为清晰，降低代码的复杂程度，提高加载速度。在开发环境下，对于dom元素的调试与调整也可以在控制台更为方便的进行。<div>标签作为一个块级元素，友好程度自然高于一些内联元素，配合flex容器能够解决大部分基本的样式问题。
当然了，<div>标签所拥有的优势，html5新标签同样也有，那么相比前者而言，新标签的优势在于
更优的可读性，对于一些重用较少或者只在一处使用的类而言，不同开发人员的命名方式往往是不同的。所以在阅读他人代码，或是隔一段时间读自己代码的时候，对于dom结构往往会有一些懵逼，第一反应可能会是，诶？这个class写的是什么意思？而对于新标签来说，看到标签的第一时刻，至少能够大致明白其子元素所拥有的大致功能。
SEO(Search Engine Optimization)，意为搜索引擎优化，是一种利用搜索引擎的搜索规则来提高目的网站的自然排名的方式。对Google、Bing等搜索引擎而言，语义化的html5新标签对于其解析来说更为的友好，换句话说，就是新标签对于爬虫而言是更加友好的。这对于一些需要提高知名度的网页来说是极为重要的。
直接可使用的样式效果，部分语义化标签并不是只是
div换个名称而已，比如<meter>、<ruby>等标签，就提供了一定的默认样式实现与功能，进而可以在其基础上更快捷的实现所需要的功能。
新增语义与结构元素
标签 | 说明 |
| 定义文档的头部区域 |
| 定义页面的侧边栏内容 |
| 定义 section 或 document 的页脚 |
| 定义文档中的节（section、区段），一般通过是否包含一个标题 |
| 定义页面独立的内容区域，如文章或贴子的内容等 |
| 规定独立的流内容（图像、图表、照片、代码等等） |
| 定义 |
| 定义导航链接的部分，一般作为多个 |
| 允许设置一段脱离其父元素的文本方向的文本，换句话说就是可以加上类似 |
| 定义命令按钮，比如单选按钮、复选框或按钮，用于做button的功能，但没有默认的样式 |
| 用于描述文档或文档某个部分的细节 |
| 标签包含 |
| 用于定义弹窗的标签，本身并不具有弹窗样式 |
| 定义带有记号的文本，会有一些不同于周围字的样式 |
| 定义度量衡，仅用于已知最大和最小值的度量，具有默认样式，类似于一个不会动的进度条 |
| 定义任何类型的任务的进度，默认样式是一个会动的进度条 |
| 定义 ruby 注释（中文注音或字符） |
| 与 |
| 与 |
| 定义日期或时间，没有什么特殊样式，单纯的表明其内容是个时间 |
| 规定在文本中的何处适合添加换行符，比如 |
结语
html5新标签拥有许多优势，但新标签的使用与否，其实完全看所在团队产品的需要与工程的架构规范。
从兼容性的角度来看，html5新标签并不支持IE8及以前的浏览器版本，且个别标签兼容性还有特定的差别，所以会存在一定程度的兼容问题。
新标签本身能够覆盖的含义依旧是比较少的，以我平时浏览的网页来说，确实不存在太多可以使用新标签的场景，往往布局元素才是唯一所需。某些特定场景下的选择使用 <div> 配合一个class的形式反而让语义更加明朗。
另外，对于一些to B的产品来讲，并不需要什么营销推广，进而也没有SEO的意义。
所以合理使用新标签，提高团队效率才是是否使用问题的本质所在。
最后更新于