前端语义化———对div的细分
我个人理解的语义化就是通过对div的细分，达到对整个页面结构的细分。方便搜索引擎爬虫等对页面信息的抓取，利于门户网站的推广。
问题是在如今前端组件化开发的的时代，前端语义化作用并不大。用的不好反而会造成歧义，适得其反。不如组件化清晰明了。即使为了变现语义化也多半通过 div+span用语义化的类名来实现功能的划分。但是语义化的概念还是要知道的。
结构性HTML标签
<article>/<section>
两者都表示文档中的一个独立区域(独立单元)。arcticle比section要大一级
<article>中可以包含<section><article>中可以包含<article><section>中不可以包含<section>
section是最小一级的独立单元标签。
<header>/<footer>
两者表示文章的页头（一般包含网站LOGO、BANNER、顶级导航等）和页尾（网站本身的信息，包括版权信息、联系方式等）。
但实际上这两标签也可以作为其他独立单元中的头部和尾部。（<article>/<section>/<aside>/<nav>等）
<main>
是整个页面的主体部分。跟header /footer 不一样，一个页面只能有一个 main，不能放进其它独立单元里。 main仅包括一个页面最核心的内容，比如说一篇文章，其它旁枝末节，比如搜索栏、菜单等内容不应被包含其中。
<aside>
一般表示页面主体内容以外的侧边栏，比如上文提到的“相关文章”，又或者是“作者个人资料”，如果是这些情况的话，一般会被包含在article中。另外，aside也可以表示一些工具功能，比如说“分享文章”、“回到顶部”等功能。
<nav>
表示网站的导航，但不一定所有的导航都需要用
<h1> - <h6>
表示标题，共有6级，其中h1的权重最高，h6的权重最低，其它的则依次递减。一般来说，h1需要分配给网站名/LOGO，如果有设置二级域名，也可以分配给分站的网站名/LOGO。对于搜索引擎来说，h1-h3是了解网页的重要途径，因此一定要恰当地分配，比如：给文章的标题用上h2，给文章中的各个小标题用上h3。
文本级别语义HTML标签
<a>
表示一个通向其它页面或当前页面其它位置的入口。<p>
表示一个段落，使用p来表示一段纯文本，而不是利用p来呈现某个样式。<em> / <strong>
这俩标签都是用来强调某个词/句，从语气上来说，strong比em的语气更重，也就起到更强的强调作用。据说，这俩标签是用来在语义上取代i和b。那么，em跟i，有什么不一样呢？答案是，i现在已经不用来表示“强调”，而仅仅只是把一些专有名词（比如人名、书名等）跟普通的字词区分开来。b的情况与i类似，也不再表示强调了，从某种程度上来说已经失去语义了，仅仅作为完成css样式的辅助标签。<time>
用来表示24小时制时间或者公历日期，若表示日期则也可包含时间和时区。对于time，尽量用机器能识别的时间格式，而不要用一些模糊的表达，比如说“一小时前”、“两天前”等。
组合型HTML标签
<figure>
figure表示一段富文本，可以是一个文章插图、一段代码、一个表格，通常搭配figcaption来表述这段富文本的描述/标题，当然，一个figure下只能有一个figcaption。figure的一个典型运用，那就是瀑布流文块。 https://juejin.im/post/5a9c8866f265da23741072bf