一文快速上手HTML5语义化页面结构

title	date
HTML5 结构元素介绍	2019-10-15

HTML5 结构元素介绍

　　刚开始学习 HTML 时，总是对 HTML5 新增的语义化标签的使用情景有所迷糊，在小实战中纠结于到底应该什么时候使用这些标签元素才是合理的。虽然使用这些标签使得页面对搜索引擎来说更加具有可读性，但是错误地使用这些标签，反而会误导搜索引擎，从而影响了页面的SEO。于是，清楚地认识这些标签的使用范围并合理地使用它们是非常有必要的，尽管它们并不会为我们带来什么样式上的变化。

header

　　header 元素通常用来包含放在页面的头部的内容，除此之外也可以用来作为一个内容区块（如 artice）的顶部内容。

nav

　　nav 即 navigator 导航栏，用来定义导航链接。将页面具有导航性质的链接元素（如站内导航、页内导航、翻页导航等）归纳于 nav 元素区域内。

article

　　article 元素往往定义的是一篇比较独立的文章、日志、评论之类的内容，其内部常常包含 header 元素、section 元素与 h1~h6 元素。所谓独立便是页面其他内容与该 article 元素内容无直接关联，在此处更换内容性质类似的 article 并不会影响整个页面的布局。

section

　　section 元素经常被新手与 div 元素混用。section 元素用于对页面中的某些内容进行“分块”，但