碎碎念
这两天正好看到一个经典面试题『HTML语义化是什么意思？』，心想正好在梳理HTML知识，为了不心虚，遂想写一篇博客来尝试说清楚语义化。
随着资料越看越多，最后终于翻墙看到W3C对标签的定义，越发觉得人类的语言是一门艺术，HTML5推动下的标签语义化也是在适应越来越多的具体使用场景，换句话说，标签语义化协助下的内容语义化表达，会推动自然语言处理，AI智能，进而提高机器处理分析WEB的能力。
上述纯属扯淡，以下的内容也均为学习过程中的个人理解，若有误解，恳请指出，谢谢！
什么是语义化
网络上关于语义化的定义和说明很长很杂，看过了很多答案后，我尝试一句话说清什么是语义化…
语义化，指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发者阅读，维护和写出更优雅的代码的同时，让浏览器的爬虫和辅助技术更好的解析。
为什么要关注语义化
通过使用恰当语义的HTML标签，让页面具有良好的结构与含义，可以有效提高：
可访问性：帮助辅助技术更好的阅读和转译你的网页，利于无障碍阅读；
可检索性：有了良好的结构和语义，可以提高搜索引擎的有效爬取，提高网站流量；
国际化：全球只有13%的人口是英语母语使用者，因此通用的语义化标签可以让各国开发者更容易弄懂你网页的结构；
互用性：减少网页间的差异性，帮助其他开发者了解你网页的结构，方便后期开发和维护；
被滥用的语义化标签
以下是一些广泛被滥用的语义化标签：
blockquote：一些人通过使用
标签使文本达到缩进的目的，因为引用默认会进行文本缩进。如果你仅仅是想使文本达到缩进目的，而文本自身并非引用，那么就用CSS
margin来代替；
p：一些开发者用
来为标签自检增加额外的空白段落，这里应该使用CSS
margin/padding来实现；
ul：一些开发者往
中添加文本来达到文本缩进的目的，这种做法即不符合语义化要求，同样也是非法的HTML实践。标签中只能有- 标签。
~：该标签可以使文本字体变大，变粗，但如果文本并非是标题，应该使用CSS
font-weight font-size；
总结：其实上面四个例子都是为了说明一点，用正确的标签做正确的事。
语义化标签介绍
在HTML5出来之前，我们习惯于用div来表示页面的章节或者不同模块，但是div`本身是没有语义的。但是现在，HTML5中加入了一些语义化标签，来更清晰的表达文档结构。
一个没有用div标签布局的页面
如上图，这个页面结构中摒弃了所有div元素，取而代之的是HTML5语义化标签（用哪些标签取决于你的设计目的）。
同样，W3C制定了这些语义化标签，不可能完全符合我们的设计目标。我们的目标是为了能够让开发者或是爬虫读懂各个模块的语义化内容，因此，div作为一个没有任何语义，仅仅是用来构建结构的元素，是最适合做容器的标签。
下面就让我们把HTML5语义化标签过一遍：