HTML5中新标签和常用标签详解_html5教程技巧

今天先介绍下 html5 新增的结构元素，有的经常使用到，有的用不上，虽然说它们的出现是更促进页面更有语义，更好的 seo，但其实当页面禁用样式后，它们的展现跟 div 是没撒差别，有同学可能会说，既然一样，又不影响页面的最终展现，不管是 article 还是 section 能用就好了。如果考虑实际项目的针对用户，我也是这么认为的，但作为一个重构仔，我们还是得专业点，再考虑到无障碍这块，那么 html5 标签的作用就更明显了。于是复习下内容并记录在博客上，顺便分享给大家，也方便自己以后查找。

HTML5 新增结构元素分为主体结构元素和非主体结构元素

1.主体结构元素包括 article、section、nav、aside、time
2.非主体结构元素包括 header、hgroup、footer、address
一、主体结构元素
article
article 标签，从语义化上看为文档、页面，其用法如下：

通常是一篇文章、一个页面、一个独立完整的内容模块
一般会带个标题，并放在 header 标签中
article 元素可以互相嵌套
使用频率极高，强调独立性，多注意下与 header 标签的使用。

section
section 标签，从语义化上看为部分，其用法如下：

用于页面内容的独立分块，往往是文章的一段
通常由内容和标题组成，没有标题的内容不推荐使用 section
使用频率低，强调分段分块。

注：《HTML5与CSS3权威指南》这本书中说明：一个容器需要被定义样式或者脚本定义行为时，推荐用div而非section，不要将section用作设置样式的容器。

nav
nav 标签，从语义化上看为导航，其用法如下：

通常作为页面导航的链接组
侧边栏导航
使用频率高。

aside
aside 标签，从语义化上看为在旁边、侧边，其用法如下：

在 article 标签中使用时，作为主要内容的附属信息部分，如有关的参考资料、名词解释等。
在 article 标签外使用时，作为页面或者站点全局的附属信息部分，如侧边栏、博客的友情链接部分、广告区域等。
使用频率低。

time
time 标签，从语义化上看为时间，其用法如下：

代表 24 小时中的某个时刻或某个日期
表示时刻时允许带时间差
可定义很多格式的日期和时间
使用频率低。

二、非主体结构元素
header
header 标签，从语义化上看为文档的页眉，其用法如下：

一种具有引导和导航作用的结构元素
通常放置在整个页面或者页面内的一个内容区块的标题
一个网页内并没有限制 header 标签的个数
使用频率极高，比较容易理解。

hgroup
hgroup 标签，从语义化上看为标题组，其用法如下：

作为 header 标签的子元素
一个内容模块中包括了主标题和至少一个子标题才使用 hgroup
通常会将 h1~h6 元素进行分组
使用频率高。

footer
footer 标签，从语义化上看为文档的脚注，其用法如下：

一个内容块区的脚注
通常内容为联系信息、相关阅读、版权信息等
使用频率高，比较容易理解。

address
address 标签，从语义化上看为地址，其用法如下：

用于文档中呈现的联系信息
通常内容为作者、网站链接、电子邮箱、地址、电话号码等
使用频率低。

希望本文对大家在 html5 结构标签上的运用有一定的指导，如果发现内容有错误的地方，欢迎大家指正~