1. HTML5新特性
什么是HTML5？维基百科表示：HTML5是HTML最新的修订版本，由万维网联盟（W3C）于2014年完成标准制定。相比之前的版本，HTML5添加了一系列新语法特征，主要包括：
- 音视频以及更语义化的标签；
SVG和canvas标签；- 存储：
localStorage、sessionStorage以及indexedDB； Web Worker、WebSocket、Shadow DOM、Web Component等；
HTML5中新增的语义化标签主要包括：
| 标签名 | 含义 |
|---|---|
| header | 页面头部 |
| nav | 导航区 |
| section | 组、部 分 |
| article | 文章区 |
| aside | 侧边栏 |
| footer | 页脚 |
2. 语义化标签的理解
- 在HTML中，语义化可以理解为标签名和对应的功能相关，比如按钮用
button、标题用h1~h6、input的文本用label等。但div几乎是万能的，而且相比上面的具体标签，div纯净到了啥也没有的地步，没有默认的样式和交互特征，需要手动添加； - 和标签名
div相比，HTML5中新的语义化标签更能代表标签所处位置和拥有的功能，一看便知：
- 不同语义化标签的语义化程度不同，比如从
section可以得知这是一个组或者一块区域、一个部分，但article表示这不单是一个部分，还是写文章的部分； - 对于语义化标签的使用，建议是用对比不用好、不用比用错好，如果对使用场景不太了解，写一堆
div也未尝不可，防止产生反向的效果；
3. 语义化标签的优点
- 有利于SEO：爬虫可以根据标签名确定权重等，以抓取更多的有效信息；
- 便于开发和维护：HTML结构更清晰，可读性更高；
- 便于其他设备的解析：如屏幕阅读器、盲人阅读器等，通过识别具体语义化标签可以解析文章结构，进行不同的处理；
4. 语义化案例分析
简书
简书主页对自己的介绍是：“简书是一个优质的创作社区，在这里，你可以任性地创作，一篇短文、一张照片、一首诗、一幅画……我们相信，每个人都是生活中的艺术家，有着无穷的创造力”。
找一篇文章点进去看看，可以发现页面头部、导航栏使用了header和nav标签：
文章详情页也使用了较多的语义化标签：
以及文章底部：
然后再来看看head标签：
可以看出简书在SEO优化、用户体验方面做了很多适配，其实这在大部分用户生产内容（UGC）模式的网站或社区中很常见，除非部分项目太老。
Medium
Medium也是一个用户生产内容模式的网站，可以看作一个博客平台或微信公众号，界面也是非常的干净，只有内容（就不放对比图了），同时语义化做的也是比较不错的：
5. 总结
在有时间精力、追求SEO优化和用户无障碍（来自MDN）使用时，尽量使用语义化标签，但同时也不建议随意使用，在不合适的地方使用反而会起到负面作用，此时不如直接用div，用对比不用好、不用比用错好。
