HTML语义
语义类标签：它们的特点是视觉表现上互相都差不多，主要的区别在于它们表示了不同的语义，比如大家会经常见到的section、nav、p，这些都是语义类的标签。
在很多工作场景里，语义类标签也有它们自己无可替代的优点。正确地使用语义标签可以带来很多好处：
- 语义类标签对开发者更为友好，使用语义类标签增强了可读性，即便是在没有CSS的时候，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护。
- 语义类标签十分适宜机器阅读。它的文字表现力丰富，更适合搜索引擎检索（SEO），也可以让搜索引擎爬虫更好地获取到更多有效信息，有效提升网页的搜索量，并且语义类还可以支持读屏软件，根据文章可以自动生成目录等等。
如果所有并列关系都用ul，会造成大量冗余标签。错误地使用语义标签，会给机器阅读造成混淆、增加嵌套，给CSS编写加重负担。
作为自然语言延伸的语义类标签
作为自然语言和纯文本的补充，用来表达一定的结构或者消除歧义。
- 表达一定的结构：HTML5中引入了这个表示ruby的标签，它由ruby、rt、rp三个标签来实现（注音/注解）
- 消除歧义：em（重音/重点）和strong对比
作为标题摘要的语义类标签
语义化的HTML能够支持自动生成目录结构，HTML标准中还专门规定了生成目录结构的算法。
- h1-h6是最基本的标题，它们表示了文章中不同层级的标题。有些时候，我们会有副标题，为了避免副标题产生额外的一个层级，我们使用hgroup标签。在hgroup中的h1-h6被视为同一标题的不同组成部分。
- section标签：section的嵌套会使得其中的h1-h6下降一级，因此，在HTML5以后，我们只需要section和h1就足以形成文档的树形结构
作为整体结构的语义类标签
随着越来越多的浏览器推出“阅读模式”，以及各种非浏览器终端的出现，语义化的HTML适合机器阅读的特性变得越来越重要。应用了语义化结构的页面，可以明确地提示出页面信息的主次关系，它能让浏览器很好地支持“阅读视图功能”，还可以让搜索引擎的命中率提升，同时，它也对视障用户的读屏软件更友好。
- 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中，有三个跟引述相关的标签blockquote表示段落级引述内容，q表示行内的引述内容，cite表示引述的作品名。
- figure也是我们的一种标签（用于表示与主文章相关的图像、照片等流内容）。这种插入文章中的内容，不仅限图片，代码、表格等，只要是具有一定自包含性（类似独立句子）的内容，都可以用figure。这里面，我们用figcaption表示内容的标题，当然，也可以没有标题。
- dfn标签：dfn标签是用来包裹被定义的名词。
- pre标签，表示这部分内容是预先排版过的，不需要浏览器进行排版。