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

html-css013

HTML5的语义化标签有哪些,作用是什么,第1张

标签种类:

<header>:定义页眉

<nav>:定义导航

<section>:定义文档中的区段

<time>:定义日期和时间

<article>:定义文章

<aside>:定义文章的侧边栏

<figure>:定义一组媒体对象以及文字

<figcaption>:定义figure的标题

<footer>:定义页脚

标签作用:

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

nav用于表示导航;

article标签表示文章;

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

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

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

想了解更多,可点击《如何让旧浏览器支持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。

<header>

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

<nav>

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

<section>

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

<article>

<article> 标签定义独立的内容。

<aside>

<aside> 标签定义页面主区域内容之外的内容(比如侧边栏)。

<figcaption>

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

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

<figure>

<figure>标签规定独立的流内容(图像、图表、照片、代码等等)。

<footer>

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