语义类标签是什么，使用它有什么好处？
首先来说说为什么要使用语义？相信很多刚入门的前端开发工程师，写起HTML就是ul+div+span之类，不用复杂的语义标签就走天下了。这种写法，按照实际情况确实很难去区别是好还是不好，因为各有优劣。在现代互联网产品里，HTML多用于“描述界面”，而软件界的东西，实际上是几乎没有语义的。
当然，正确使用语义标签可以带来很多好处，语义标签也有他们无可替代的优点！
好处一：语义标签增强可读性，没有css的情况你通过语义标签就能看出整个网页的结构，利于团队的开发和维护。
好处二：语义标签也很适合机器阅读。它的文字表现力丰富，适合搜索引擎检索（SEO），也可以让搜索引擎爬虫更好的获取到更多有效信息，有效提升网页的搜索量，并且语义类还可以支持读屏软件，根据文章自动生成目录等等。
不过，不恰当的使用语义标签，也会造成负面影响。比如ul与ol的混淆使用，开发者应了解ul与ol的的概念和具体用法。
winter老师建议：对于语义标签，“用对”比“不用”好，“不用”比”用错“好，有理想的前端工程师还是应该去追求”用对“它们。
其实HTML语言更接近我们平常说话的自然语言，我们说话没有唯一标准的措辞，语义标签也是一样。
作为自然语言延伸的语义类标签
语义标签使用的第一个场景，也是最自然的场景，就是：作为自然语言和纯文本的补充，用来表达一定的结构或消除歧义。
比如HTML5的ruby标签，它由ruby、rt、rp三个标签来实现。当微信聊天的时候，不能用ruby标签的形式，只有加个括号去注释，明显没ruby标签更为直观，效果差了不少。又或者用div+span去实现ruby的效果，显然ruby标签更为直观，可读性强。
还有一种情况就是，HTML有些标签实际上就是必要的，甚至必要的程度可以达到：如果没有这个标签，文字会产生歧义的程度。
例如em标签，我们都知道em标签用来呈现被强调的文本。
以下举例三段话，尝试发现自己哪读音会发生变化，会加重。
今天我吃了一个苹果
昨天我吃了一个香蕉
今天我吃了一个苹果
昨天我吃了两个苹果
今天我吃了一个苹果
实际上，不仅仅是读音，这里的意思也发生了变化。第一个例子中，表示我今天吃的是苹果，而不是别的什么东西，后边例子中，则表示我今天只吃了一个苹果，没有多吃。
那么当没有上下文的时候，怎么去消除歧义呢？这是em标签的用处就展示出来啦~
今天我吃了一个<em>苹果</em>
今天我吃了<em>一个</em>苹果
而em标签与strong标签又有区别，在HTML4.01中，strong标签定义为加粗的强调的文本，而在HTML5中，strong标签定义为重要的文本，区别显而易见。
作为标题摘要的语义类标签
首先我们需要形成一个概念，一篇文档会有一个树形的目录结构，它由各个级别的标题组成。这个树形结构可能不会跟HTML元素的嵌套关系一致。
例如：
<h1>HTML 语义 </h1>
<p>balah balah balah balah</p>
<h2> 弱语义 </h2>
<p>balah balah</p>
<h2> 结构性元素 </h2>
<p>balah balah</p>
......
这段HTML几乎是平铺的元素，h1 ~ p ~ h2
h1-h6是最基本的标题，它们表达了文章中不同层级的标题。有些时候，我们会有副标题，为了避免副标题产生额外的一个层级，我们使用hgroup标签，接下来看有/无group标签的对比：
<h1>JavaScript 对象 </h1>
<h2> 我们需要模拟类吗？</h2>
<p>balah balah</p> ......
此段的标题结构为：
JavaScript 对象
我们需要模拟类吗？
......
<hgroup>
<h1>JavaScript 对象 </h1>
<h2> 我们需要模拟类吗？</h2>
</hgroup>
<p>balah balah</p> ......
此段的标题结构为：
JavaScript 对象——我们需要模拟类吗？
......
一对比就不难看出，标题结构的不同，在hgroup标签中的h1-h6被视为同一标题的不同组成部分。
还有另一个HTML5的section标签，<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。这个标签可不仅仅是一个“有语义的div”，它会改变h1-h6的语义。section的嵌套会使得其中的h1-h6下降一级，因此在HTML5以后，我们只需要section和h1就足以形成文档的树形结构。
作为整体结构的语义类标签
随着越来越多浏览器推出“阅读模式”，以及各种非浏览器终端的出现，语义化的HTML适合机器阅读的特性变得越来越重要。
应用了语义化结构的页面，可以明确的提出页面信息的主次关系，它能让浏览器很好的支持“阅读试图功能”，还可以让搜索引擎的命中率提升，同时，它也对视障用户的读屏软件更为友好。
我们正确的使用整体结构的语义类标签，可以让页面对机器更为友好。举例：
在body下面，有一个header，header里边是一个nav，跟header同级有一个aside，aside里边也有一个nav。接下来就是文章的整体了，也就是一个一个的section的堆砌。section里边可能也有嵌套，然后最后一个是footer，footer里边有一个address这样的内容。
除此之外，还有article标签，article是一种特殊的结构，它表示具有一定独立性质的文章。所以，article和body具有相似的结构，同时，一个HTML页面中可能有多个article存在。
比如一个典型的场景就是多篇新闻展示在同一个新闻专题页面中，这种类似报纸的多文章适合用article来组织。
body里边有自己的header和footer，然后里边是竖篇的article，每一个article里边都有自己的header、section、footer。这是一个经典的多文章结构。
在这个结构里，我们看到了一些新标签。
header，如其名，通常出现在前部，表示导航或介绍性的内容。
footer，通常出现在尾部，包含一些作者信息、相关链接、版权信息等。
header和footer一般放在article或者body的直接子元素，但是标准中并没有明确规定，footer也可以和aside、nav、section相关联（header不存在关联问题）。
aside表示跟文章主体不那么相关的部分，它可能包含导航、广告等工具性质的内容。
aside很容易被理解成侧边栏，实际上二者是包含关系，侧边栏是aside，aside不一定是侧边栏。
aside和header中都可能出现导航，二者的区别是，header中的导航多数是到文章自己的目录，而aside中的导航多数是关联页面或者是整站地图。
最后footer中包含adderss，这是个非常容易被误用的标签。address并非像date一样，表示一个给机器阅读的地址，而是表示“文章（作者）的联系方式”，address明确的只关联到article和body。
网友评论