一、HTML语义化
1、语义化
“语义”即为“意义”，“语义元素”即为“有意义的元素”。一个语义元素能够清楚地描述其意义给浏览器和开发者。Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持语义元素，Internet Explorer 8 及更早版本不支持该元素，但也有兼容方法。
但值得注意的是，HTML语义化包括但不限于HTML5新增加的语义化标签，form、table、img等标签也清楚地定义了他们的内容。但本文章着重分析HTML5新增的语义化标签。
2、HTML5新增的语义化标签
包括header、nav、section、article、aside、figcaption、figure、footer。
（1）、header：元素描述了文档的头部区域，主要用于定义内容的介绍展示区域.
（2）、nav：定义导航链接的部分，元素用于定义页面的导航链接部分区域
（3）、section：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分
（4）、article：定义独立的内容
（5）、aside：标签定义页面主区域内容之外的内容（比如侧边栏），标签的内容应与主区域的内容相关
（6）、footer：描述了文档的底部区域，通常包含文档的作者，著作权信息，链接的使用条款，联系信息等
3、如何使用
一句话总结就是：要用就用得规范准确，否则不如不用。
二、语义化标签的优点
1、根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好的解析。
2、为了在没有CSS的情况下，页面也能呈现出很好的内容结构和代码结构。
3、有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息（爬虫依赖于标签来确定上下文和各个关键字饿权重）
4、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
5、便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化
三、HTML语义化案例分析
此小节选择了两个例子来进行语义化标签的分析。
1、 WolframAlpha网站
（1）、使用header作为该页面的头部，且header里面嵌套了nav定义了页面的外部链接。
（2）、main标签展示了网站的主体内容，而且main标签里面嵌套了多个section，用section划分出不同的区域。
（3）、页脚用footer来制作，包含了此网站的作者，著作权信息，链接的使用条款，联系方式等信息。
2、vite官网
（1）、使用aside规定了网页的侧边栏，其中嵌套了nav。在header或者aside中嵌套nav是很多语义化网站的常用做法。
（2）、main标签是网页的主要展示内容，main标签中嵌套了header标签，其中header标签在该页面中就是vite的logo。
（3）、footer同样是网页的页脚，其中包含了网页的赞助商，作者，联系方式等信息。
