序
曾几何时，前端页面布局总是用div，但是div本身没有实际意义，它只是定义了一个区域，做这个区域的浏览器并不知道是什么，不利于页面的SEO优化。
因此，HTML5中新的语义标签很好地解决了这个问题。当然，它还有其他好处。让我们一起来看看。
HTML5
语义标签的优势
即使没有CSS的支持，浏览器依然可以呈现出很好的内容结构。
语义标签有利于SEO，更有利于爬虫解析更有效的信息。
跨设备体验，不同的设备支持语义标签，所以即使在不同的设备下，你仍然可以有无缝的体验。
便于代码开发和维护。语义可以增加代码的可读性，让团队成员更好地理解彼此的代码意图。
HTML5新语义标签
那么HTML5中加入了哪些有利于页面布局的HTML5标签呢？
先来看看这张图。
HTML5增加了语义标签
标题标签
标题标签表示页面或部分的标题部分，通常包含h1-h6标签以供使用。
让我们直接通过代码来看看对浏览器的影响。
标题效应
页脚标签
页脚标签类似于页眉标签，代表页面或版块的页脚部分，通常放置网站的证书、许可证、版权协议等内容。
页脚标签
组标签
Hgroup标签一般用于h1-h6标签的组合，如主标题、副标题、三级标题的组合。
让我们通过下面的代码片段来看看它的代码组织形式。
组标签
需要注意的是，如果需要hgroup标签，那么hgroup标签中至少要有两个H标签。如果只有一个H标记，则应该删除该组标记。
导航标签
nav标签主要用来定义页面的导航部分，比如页面或者版块中的侧边栏。
下面的代码片段显示了用法。
导航标签
侧标签
侧边标签一般指定网页的相关内容、友情链接等备注。类似于广告，也可以使用侧边标签。
主要标签
main标签定义了页面的主要内容，在页面中只能使用一次。
文章标签
文章标签代表一个独立完整的内容区域，如报纸的独立版块。
文章标签可以包含其他语义标签，其基本用法如下。
文章标签
部分标签
章节标签是指文档中内容的章节或段落。上面提到的文章、nav或者旁白，其实都可以看作是特殊的版块标签。如果可以使用文章、导航和侧边标签，最好不要使用版块标签。
根据具体情况，节标签和文章标签可以相互嵌套。
结束语
如果你的布局还是只有div，看完今天的文章就可以尝试新的HTML5标签了。
感兴趣的同学可以加入我自己创建的Q群，大家可以互相学习交流。我会尽最大努力维护团队环境。组号如下。
数字