一、语义类标签
语义类标签则是纯文字的补充，比如标题、自然段、章节、列表，这些内容都是纯文字无法表达的，我们需要依靠语义标签代为表达。
<ruby>
牛<rp>(</rp> <rt>zha</rt> <rp>)</rp>
逼<rp>(</rp> <rt>zha</rt> <rp>)</rp>
</ruby>
复制代码二、语义类标签是什么，使用它有什么好处？
语义是我们说话表达的意思，多数的语义实际上都是由文字来承载的。语义类标签则是纯文字的补充，比如标题、自然段、章节、列表，这些内容都是纯文字无法表达的，我们需要依靠语义标签代为表达。
- 语义类标签对开发者更为友好，使用语义类标签增强了可读性，即便是在没有 CSS 的时候，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护。
- 除了对人类友好之外，语义类标签也十分适宜机器阅读。它的文字表现力丰富，更适合搜索引擎检索（SEO），也可以让搜索引擎爬虫更好地获取到更多有效信息，有效提升网页的搜索量，并且语义类还可以支持读屏软件，根据文章可以自动生成目录等等。
section嵌套会使得其中的h1-h6下降一级
- 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。
- dfn 标签是用来包裹被定义的名词。
- abbr 标签表示缩写。
- cite 标签作品名称。
- figure 标签用于表示与主文章相关的图像、照片等流内容。
- pre 标签表示这部分内容是预先排版过的，不需要浏览器进行排版。
！！！如果你有把握把它用对那你就用，要不要你还是用div和span吧！
转载于:https://juejin.im/post/5ceb8d606fb9a07ed136b3dc