前言
本来很早前我就自认为对前端语义化有了一些了解，但在看完winter大大的专栏后才发现，自己对语义化的理解并不是很透彻，只存在于表面的理解而已，因此决定在学习winter老师的专栏后结合自己的一些理解，好好对其进行进行一个总结。
一、语义化是什么
从维基百科所得到的结果：
The Semantic Web provides a common framework that allows data to be shared and reused across application, enterprise, and community boundaries. --Wikipedia
Web语义化提供了一个通用框架，允许跨应用的程序，企业和社区共享和复用数据。简单来说，Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。
我们都知道，对于Web来说，HTML就是负责联系大部分的Web资源的承载体和纽带，也就是我们常说的内容的载体。但在web刚被设计出来之初，设计者也没想到web会达到现在如此巨大的规模，因此早期的的HTML标准中所提供的元素也并不多，只有常见的h1-h6、ul、ol等标签。但随着Web的快速发展，网页的数量以及开发规模越来越大，为了能让用户在使用搜索引擎时能够更快、更精确的定位所要查询的网页，以及减少一些开发的维护余合作的成本，HTML在后面又提供了诸多的语义化标签，从而让页面有更为良好的结构，让搜索引擎可以更好的去查询定位网页，同时也使人更易于去理解网页的结构，这在团队协作开发中很重要。
二、为什么要语义化
既然知道了上面是语义化，也大概的知晓的语义化为我们带来的一些好处，但这些好处对于我们来说好像并不够具体。因为好像我们在平常进行开发的时候就只使用了div和span，也能写出一个完整的页面出来，简称span、div一把嗦，这也是我平时的做法（当然，现在在使用react的时候更加如此了）。我一直觉得这种做法其实挺不好的，至少挺low的，毕竟很多类似的文章都告诉我们，要做好web语义化，做好SEO。但在winter老师的专栏中又对此进行了分析：
这样做行不行呢？毫无疑问答案是行。那这样做好不好呢？按照正确的套路，我应该说不好，但是在很多情况下，答案其实是好。
这是因为在现代互联网产品里， HTML 用于描述 “ 软件界面 ” 多过于 “ 富文本 ” ，而软件界面里的东西，实际上几乎是没有语义的。比如说，我们做了一个购物车功能，我们一定要给每个购物
车里的商品套上 ul 吗？比如说，加入购物车这个按钮，我们一定要用 Button 吗？
实际上我觉得没必要，因为这个场景里面，跟文本中的列表，以及表单中的 Button ，其实已经相差很远了，所以，我支持在任何 “ 软件界面 ” 的场景中，直接使用 div 和 span 。
但话虽这样说，winter老师所说的前提是在软件界面的条件下如此，如果是其他的工作场景，语义类的标签就拥有其自身的优点了：
- 增强代码可读性，有利于团队协作与维护。
- 有利于SEO
- 支持读屏软件，可以自动生成目录。
- 无CSS的情况下也容易阅读，便于用户阅读和理解
三、如何“正确”的进行语义化
前面提到，语义化是好的。但winter老师在专栏中也提到了，对于语义标签来说：“用对”比“不用”好，“不用”比“用错”好。因此如何正确的使用语义标签，是我们进行web语义化的重中之重。下面是winter老师所提到的比较重要的语义标签的使用场景。
3.1 作为自然语言延伸的语义类的标签
所谓的作为自然语言延伸的语义类的标签，就是为自然语言和纯文本的补充，用来表达一定的结构或者消除歧义。比较常见的就是是em和strong这两者了。我们可以通过使用类似的标签来消除一些歧义，让读者与机器都能更为准确的把握我们一句话的意思。至于具体的区别可以看下面这篇文章，作者对em和strong的区别做了一个较为全面和详细的探讨：
em和strong的区别
3.2 作为标题摘要的语义类标签
此类标签的用途是用于表现文章的结构，让文章的目录结构显得更加清晰有序。在HTML里，我们通常使用h1-h6来作为最基本的标题，而当我们需要副标题的时候，我们就需要使用hgroup，以免让副标题也产生一个层级。
这是一个主标题
这是一个副标题
此外在HTML5也提供了section标签，它会改变 h1-h6 的语义。section 的嵌套会使得其中的 h1-h6 下降一级。
3.3 作为整体结构的语义类标签
最后一个比较常见的场景就是很多浏览器所推出的“阅读模式”，以及各种非浏览器终端的出现，这让web语义化变得越来越重要。
而应用语义化标签来表现网页的结构，可以明确的表现出页面信息的主次关系，从而能更为精确的表现出阅读视图功能。也能让SEO更好。
……
……
……
上面这一块HTML就是一个语义化标签构成的body。其中 header 元素
代表“网页”或者“section”的页眉，通常包含h1-h6 元素或者 hgroup, 作为整个页面或者某个内容块的标题。也可以包裹一小节的目录，一个搜索框，一个nav等。需要注意的是：
- 没有数量的限制
- 可以使“网页”或者任意“section”的头部部分
至于nav元素则代表页面的导航链接区域，用于定义页面的主要导航部分。
aside 元素经常被包含在article元素中，作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料，标签，名词解释等。
在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。值得注意的是，aside 很容易被理解为侧边栏，实际上二者是包含关系，侧边栏是 aside ， aside 不一定是侧边栏。aside 和 header 中都可能出现导航（ nav 标签），二者的区别是， header 中的导航多数是到文章自己的目录，而 aside 中的导航多数是到关联页面或者是整站地图。
footer元素代表“网页”或任意“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。在这里它包含了 address ，这也是个非常容易被误用的标签。 这里的address 并非像 date 一样，表示一个给机器阅读的地址，而是表示 “ 文章（作者）的联系方式 ” ， address 明确地只关联到 article 和 body 。
除此之外，还有 article ，article 代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。所以， article 和 body 具有相似的结构，除了它的内容，article通常也会有一个标题(通常会在header里)，一个footer页脚等。同时，一个 HTML 页面中，可能有多个 article 存在。
一个典型的场景是多篇新闻展示在同一个新闻专题页面中，这种类似报纸的多文章结构适合用 article 来组织。
web 语义化的那些事儿
文章内容..
评论
评论者: 太平洋水军
楼下真帅
评论者: 黄海水军
楼上长得帅
参考链接：
- https://segmentfault.com/a/1190000002481725
- https://www.zhihu.com/question/20455165
- https://time.geekbang.org/column/intro/154