常用html5标签大全

作为一名网页制作人员或者seo优化人员，不可不知的html5标签。万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。2014年10月29日，html5标准规范制定完成。也是未来发展的趋势。
html5 新增的结构元素，有的经常使用到，有的用不上，它们的出现是更促进页面更有语义，更好的 seo。html5也是新一代超文本标记语言，以及html5和html的区别在哪些方面？以及html5相对于html的优势在哪里？自己想想吧。在此记录一下常用的html5标签。

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

1.主体结构元素包括 article、section、nav、aside、time

2.非主体结构元素包括 header、hgroup、footer、address

使用频率极高的标签article、section、nav、hgroup、header、footer
article标签

article 标签，从语义化上看为文档、页面，其用法如下：通常是一篇文章、一个页面、一个独立完整的内容模块

article 元素可以互相嵌套
示例

<article>

<header>

<h1>是我标签</h1>

</header><p>我是段落</p>

<article>

<div>我的内容</div>

</article>

</article>

hgroup标签hgroup 标签，从语义化上看为标题组，其用法如下：作为 header 标签的子元素一个内容模块中包括了主标题和至少一个子标题才使用 hgroup通常会将 h1~h6 元素进行分组
示例

<article><header><hgrounp>

<h1>我是刘备</h1>

<h2>我是关羽</h2>

<h3>我是张飞</h3>

</hgrounp></header>

<p>吕布惊呆了</p>

</article>

一、结构标签

说到结构标签，我觉得这是相对于html来说，是一个非常好的改变，因为它对于网站的SEO优化有了很大的提升。为什么这么说呢？因为新定义的这些结构标签，搜索引擎蜘蛛能知道它是干什么的。因为我们所做的网站都是需要做SEO的，做排名的。通过排名获得流量，然后进一步进行转化，转化成你想要的money.那么新增加的结构标签有哪些呢？

1.<article> 标记定义一篇文章

2.<header> 标记定义一个页面或一个区域的头部

3.<nav> 标记定义导航链接

4.<section>标记定义一个区域

5.<aside> 标记定义页面内容部分的侧边栏

6.<hgroup>标记定义文件中一个区块的相关信息

7.<figure> 标记定义一组媒体内容以及它们的标题

8.<figcaption>标签定义 figure 元素的标题。

9.<footer> 标记定义一个页面或一个区域的底部

二、新增标签在新增的html标签中我认为最大的好处就是增加了多媒体交互标签。在html中一般我们插入什么音频、视频、flash都会用到<embed>标签，来定义外部的可交互的内容或插件，而在HTML5的多媒体标签的中，我们可以直接添加音频、视频等多媒体文件，而不需要使用外部插件来实现，这样极大地提升了用户体验。

新增的多媒体交互标签有：1.<video> 标记定义一个视频

2.<audio> 标记定义音频内容

3.<source> 标记定义媒体资源

4.<canvas> 标记定义图片

三、重新定义标签在html5标签中，有一些标签相对于html标签来说，更改了它的语义。

重新定义的标签如下：

1.<b>代表内联文本，通常是粗体，没有传递表示重要的意思

2.<i>代表内联文本，通常是斜体，没有传递表示重要的意思

3.<dd>可以同details与figure一同使用，定义包含文本，dialog也可用

4.<dt>可以同details与figure一同使用，汇总细节，dialog也可用

5.<hr>表示主题结束，而不是水平线，虽然显示相同

6.<menu>重新定义用户界面的菜单，配合commond或者menuitem使用

7.<small>表示小字体，例如打印注释或者法律条款

8.<strong>表示重要性而不是强调符号

9.<big> 定义大号文本。

10.<pre> 定义预格式文本。

11.<sup> 定义上标文本。

12.<sub> 定义下标文本。

13.<time> 定义日期/时间。

表单
<form>  定义供用户输入的 HTML 表单。

<input>  定义输入控件。

<textarea> 定义多行的文本输入控件。

<button> 定义按钮。

<select> 定义选择列表（下拉列表）。

<optgroup> 定义选择列表中相关选项的组合。

<option> 定义选择列表中的选项。

<label>    定义input元素的标注。

<fieldset> 定义围绕表单中元素的边框。

<legend> 定义 fieldset 元素的标题。

<isindex> 不赞成使用。定义与文档相关的可搜索索引。

<datalist> 定义下拉列表。

<keygen> 定义生成密钥。

<output> 定义输出的一些类型。

图像
<img> 定义图像。

<map> 定义图像映射。

<area> 定义图像地图内部的区域。

<canvas> 定义图形。

<figcaption> 定义 figure 元素的标题。

<figure> 定义媒介内容的分组，以及它们的标题。

总结：通过对html5的标签来看，不管是从结构标签还是新增的一些标签，使网站更加符合SEO的优化，同时也提升了用户体验。