「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」
到了本篇终于进入了页面主体内容了，渲染到页面上的内容位于 body 中，这一节来看内容分区相关的一系列元素，也就是经常提到的语义化标签。
语义化的概念是 html5 开始引入的，但是实际上在 html5 之前已经存在带有语义的标签了，学习 html 最初肯定会接触到 h1 - h6，多级标题就是一种语义标签。
html5 支持的全部语义化标签如下：
- header
- nav
- main
- aside
- section
- article
- h1 - h6
- address
- footer
这些标签看名字就可以知道是做什么的，因此这里不做展开介绍了，这里看一下为什么要使用语义化标签。
首先可以明确地说，没有语义化标签表面上完全不会影响到构建一个完整的页面，事实上我们也确实经常使用 <div class="header"></div> 这样的实现，从表现上来看它与 <header></header> 完全相同，这些语义化标签完全可以换成 div。与 div 相比，有几个比较重要的区别：
- 对于传统的页面，语义化的描述可以明确地描述页面结构，html 最初设计就是为了描述结构的，在不关注样式之前只看 html 就可以清晰的看出内容的组织关系。
- 清晰的 html 关系带来的另一个好处就是更有利于 SEO，可能人对于 html 不敏感，但是对于爬虫和搜索引擎来说，一个清晰的结构更有助于抓取有效信息。
- 另一个比较重要的是有助于 a11y，原因还是 html 信息更有助于被机器识别，同时把不具备语义的 div 标签换成有意义的区块标签在使用阅读器时体验会更好。
上面介绍了语义化标签存在的价值，但是讨论技术一定要结合所处的时代背景。前端发展至今天，已经不是一个 html 文件可以解决问题的，我们倾向于构建很多组件，一个页面是多个组件构成的，而非在单个页面上放置多个区块，在这种场景下这些区块往往并不能带来更好的效果，盲目追求语义化带来的收益实际上很小。因此现在使用 div 也未尝不是一个好的选择。
页面区块标签内容就这么多，这部分实际应用有限，了解一下背景，按需使用，能更好解决问题的方案才是最佳方案。
