首页 » 编程语言 » html » 正文

HTML5标签:hgroup元素的使用方法及作用

html元素<hgroup>标签是html5中新增的标签,主要对多层级的h1~h6标题进行分组,下面,我们就详细了解一下<hgroup>标签的使用方法及作用。

<hgroup>标签定义

<hgroup> 标签被用来对多级标签进行分组,将 h1~h6标题元素包裹起来;

<hgroup> 标签通常是将多层级的h1~h6元素进行分组,也可以将一个article 元素里的主标题和子标题进行分组。

<hgroup> 标签是 HTML 5 中新增的标签

浏览器支持情况

 <hgroup> 标签已被 IE9、Firefox、Opera、Chrome 和 Safari 支持;

但在 IE 8 或 更早版本的 IE 浏览器中,不被支持。

<hgroup>标签用法

<hgroup>标签代表“网页”或“section”的标题,当元素有多个层级时,该元素可以将h1到h6元素放在其内。

1、只要页面中内容区块有主标题和副标题,就可以对其进行组合,演示代码如下:

<hgroup>         
<h1>内容区块主标题</h1>         
<h2>内容区块副标题</h2>
</hgroup>

2、<hgroup>标签用于文章(article标签)或者某段独立的内容区块,演示代码如下:

 <article>
        <header>
          <hgroup>
            <h1>这是文章标题一</h1>
            <h2>这是文章标题二</h2>
          </hgroup>
          <p>这是文章的一些基本信息,比如摘要,作者,发布日期等等</p>
        <header>
        <p>文章内容</p>
      </article>

3、<hgroup>标签用于章节、段(section标签)中或者需要分区块的地方,演示代码如下:

      <section>
        <header>
          <hgroup>
            <h1>这是章节父标题一</h1>
            <h2>这是章节子标题二</h2>
          </hgroup>
          <p>这里是章节或者分区块的一些基本信息介绍</p>
        <header>
        <p>章节或者分区块的内容</p>
      </section>

以上代码中有父标题和子标题,使用<hgroup>标签对其进行包裹组合。

<hgroup>标签注意事项

<hgroup>标签只是对标题进行组合,而对标题的样式没有影响。

如果只需要一个h1-h6标签就不用hgroup

如果有连续多个h1-h6标签就用hgroup

如果在页面头部、文章头部、章节或者分段分块的头部,至少有两个主题标签,才可以使用<hgroup>标签,如果只有一个主题标签,则不需要使用;



欢迎您发表评论或留言