html5的语义化,html5语义化标签优点

HTML5的语义化标签有哪些，作用是什么

标签种类：

header：定义页眉

nav：定义导航

section：定义文档中的区段

time：定义日期和时间

article：定义文章

aside：定义文章的侧边栏

figure：定义一组媒体对象以及文字

figcaption：定义figure的标题

footer：定义页脚

标签作用：

header与footer标签用于表示页面、应用或某个模块的头部和尾部；

nav用于表示导航；

article标签表示文章；

aside标签和article标签用法类似，只是表示内容会出现在侧边栏；

figure标签表示一段自包含的内容——独立的流内容（图像、图标、照片、代码等）

在开发当中，可以使用section和article标签替代过度的div标签，用这些标签来对页面进行内容划分。

想了解更多，可点击《如何让旧浏览器支持HTML5新标签》

相关问答

Q1: html5的语义化标签有哪些

1.header：标签定义“网页”或“section”的页眉。

通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。

2.nav：定义导航链接的部分。

3.footer标签：代表“网页”或“section”的页脚。

通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。

如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。

4. hgroup元素：“网页”或“section”的标题

当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

5.section标签：定义文档中含有标题和段落的区域。（强调分段或分块）

6.article：代表独立、完整、可独自被外部引用的内容（博客或报刊中的文章、一遍论坛帖子、一段用户评论或独立的插件、或任何独立的内容）;（强调的是独立性！可含有完整的标题、内容、脚注)

7. aside标签：表示当前页面或文章的附属信息部分，可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。

8. figure标签：规定独立的流内容（图像、图表、照片、代码等等）。

figcaption标签：用于元素定义figure的标题。

1）.一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。

2）.figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。

9. time标签：定义时间或日期

10. address标签：代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。

Q2: html5的语义化标签有哪些及其作用?

header

header元素描述了文档的头部区域

nav

标签定义导航链接的部分。

section

section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

article

article 标签定义独立的内容。

aside

aside 标签定义页面主区域内容之外的内容（比如侧边栏）。

figcaption

figcaption 标签定义 figure 元素的标题.

figcaption元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

figure

figure标签规定独立的流内容（图像、图表、照片、代码等等）。

footer

    footer 元素描述了文档的底部区域.

Q3: HTML5文档的语义化是指什么？

在HTML5中新增了很多语义标签概念，使HTMl文档根据页面内容结构选择语义标签，是页面结构内容格式化。它有利于清楚的描述HTML文档的意义给浏览器和开发者。下面列举了一些我们常用到的语义标签：

section元素 表示页面中的一个内容区 块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用，表示文档结构。例：HTML5中section……/section；HTML4 中div ……/div。

article元素 表示页面中一块与上下文不相关的独立内容。比如一篇文章。

aside元素 表示article元素内容之外的、与article元素内容相关的辅助信息。

header元素 表示页面中一个内容区块或真个页面的标题。

hgroup元素 表示对真个页面或页面中的一个内容区块的标题进行组合。

footer元素 表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。

nav元素 表示页面中导航链接的部分。

figure元素 表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用

figcaption元素为figure元素组添加标题。

到这里你可以能对如何对HTML页面语义化还是一直半解。下面我们就来通过一个具体的页面结构进行说明。

今天你的leader兴致冲冲地找到你，希望你可以帮他一个小忙，他现在急着要去开会。要帮什么忙呢？你很好奇。

他对你说，公司打算做一个公司主页，让你设计下这个页面的基本结构。

这个任务很简单嘛！你爽快的答应了，然后你就自己设计出来如下图所示的页面基本结构布局。

好了，完工！你自信满满。

你的leader过来看了下你的成果。总体来说，他还挺满意。但是他说从你设计的网页布局中我们视觉正常的人可以直观的看到页面的布局，并获取页面的内容信息。

但是屏幕阅读器或者搜索引擎无法获取准确获取页面的内容信息和内容相互之间的关系。

这样的设计是正确的但是还可以进行改进。

于是他百忙之中抽出一点时间对你的网页布局做了改进

• 在你的设计的布局中加入了一些HTML5中的语义元素，这样无论是人还是机器都可以很轻松的从设计布局中读取到相关信息了。这样的设计是不是更合理呢？这样做的好处有：

1、将构造HTML页面内容语义元素一起使用，可以将HTML内容分成明确的几个区域。

2、建立区域关系后的页面，对于人或者机器，都更具有可读性。而且，这也有利于搜索引擎访问页面。

3、建立区域关系后的页面，也有利于网页风格的一致性。

这些都是HTML5的基础知识，在教程网站秒秒学中有很多关于这些知识的讲解，推荐你可以去看看。