参考: winter 的重学前端
语义类标签是什么？
语义是我们说话表达的意思，多数的语义实际上都是由文字来承载的。语义类标签则是纯文字的补充，比如标题、自然段、章节、列表，这些内容都是纯文字无法表达的，我们需要依靠语义标签代为表达。
为什么要用语义?
- 正确的标签做正确的事情
- 页面内容结构化
- 语义类标签增强了可读性，无CSS样子时也容易阅读，便于阅读维护和理解，对开发者友好
- 便于浏览器、搜索引擎解析。 利于爬虫标记、利于SEO
- 语义类可以支持读屏软件，根据文章可以自动生成目录
什么情况下不需要使用语义？
在产品里，HTML用于描述软件界面多过富文本时，因为软件界面里的东西，实际上几乎是没有语义的。比如说，我们做了一个购物车功能，购物车这个按钮，我们一定要用Button吗？实际上我觉得没必要，因为这个场景里面，跟表单中的Button，其实已经相差很远了，所以，在任何软件界面的场景中，可以直接使用div和span。
语义化的三个常见使用场景
自然语言表达能力的补充
作为自然语言和纯文本的补充，用来表达一定的结构或者消除歧义
比如使用 em 标签去消除歧义
我今天吃了一个苹果
我们看看这句话，看上去它很清楚，但是实际上，这句话放到不同上下文中，可能表达完全不同的意思。
昨天我吃了一个香蕉。
今天我吃了一个苹果。
再比如：
昨天我吃了两个苹果。
今天我吃了一个苹果。
在读这两段里面的“今天我吃了一个苹果”，发现读音不自觉地发生了变化。
实际上，不仅仅是读音，这里的意思也发生了变化。前一段中，表示我今天吃的是苹果，而不是别的什么东西，后一段中，则表示我今天只吃了一个苹果，没有多吃。
当没有上下文时，如何消除歧义呢？这就要用到我们的em标签了。em表示重音：
今天我吃了一个<em>苹果</em>。
今天我吃了<em>一个</em>苹果。
通过em标签，我们可以消除这样的歧义。
一些文章常常会拿em和strong做对比，实际上，我们只要理解了em的真正意思，它和strong可谓天差地别，并没有任何混淆的可能。
文章标题摘要
一篇文档会有一个树形的目录结构，它由各个级别的标题组成。这个树形结构可能不会跟HTML元素的嵌套关系一致。
h1-h6是最基本的标题，它们表示了文章中不同层级的标题。有些时候，我们会有副标题，为了避免副标题产生额外的一个层级，我们使用hgroup标签。
我们来看下有/无hgroup的对比：
<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被视为同一标题的不同组成部分。
从HTML 5开始，我们有了section标签，这个标签可不仅仅是一个“有语义的div”，它会改变h1-h6的语义。section的嵌套会使得其中的h1-h6下降一级，因此，在HTML5以后，我们只需要section和h1就足以形成文档的树形结构：
适合机器阅读的整体结构
随着越来越多的浏览器推出“阅读模式”，以及各种非浏览器终端的出现，语义化的HTML适合机器阅读的特性变得越来越重要。
应用了语义化结构的页面，可以明确地提示出页面信息的主次关系，它能让浏览器很好地支持“阅读视图功能”，还可以让搜索引擎的命中率提升，同时，它也对视障用户的读屏软件更友好。
我们正确使用整体结构类的语义标签，可以让页面对机器更友好。比如，这里一个典型的body类似这样：
<body>
<header>
<nav>
...
</nav>
</header>
<aside>
<nav>
...
</nav>
</aside>
<article>
<header>...</header>
<section>...</section>
<section>...</section>
<section>...</section>
<footer>...</footer>
</article>
<article>
...
</article>
<article>
...
</article>
<footer>
<address></address>
</footer>
</body>
在body下面，有一个header，header里面是一个nav，跟header同级的有一个aside，aside里面也有一个nav。接下来是多个独立的文章，也就是一个一个的article。每一个article里面都有自己的header、section、footer。section里面可能还有嵌套，但是我们就不管了，最后是一个footer，这个footer里面可能有address这样的内容。
在这个结构里，我们看到了一些新标签，我也来逐个介绍一下。
- header，如其名，通常出现在前部，表示导航或者介绍性的内容。
- footer，通常出现在尾部，包含一些作者信息、相关链接、版权信息等。
header和footer一般都是放在article或者body的直接子元素，但是标准中并没有明确规定，footer也可以和aside，nav，section相关联（header不存在关联问题）。
- aside表示跟文章主体不那么相关的部分，它可能包含导航、广告等工具性质的内容。
aside很容易被理解为侧边栏，实际上二者是包含关系，侧边栏是aside，aside不一定是侧边栏。
aside和header中都可能出现导航（nav标签），二者的区别是，header中的导航多数是到文章自己的目录，而aside中的导航多数是到关联页面或者是整站地图。
最后footer中包含address，这是个非常容易被误用的标签。address并非像date一样，表示一个给机器阅读的地址，而是表示“文章（作者）的联系方式”，address明确地只关联到article和body。
总结
本篇中我们介绍了一些基本原则和HTML文档的整体结构，从整体上了解了HTML语义。
分一些场景来看语义，把它用在合适的场景下，可以获得额外的效果。
网友评论