HTML5 新增结构标签（元素）_html5新增的文档结构元素中头部标记或标签是-优快云博客

本文介绍了HTML5中新增的结构元素，包括article、section、nav、aside、time等，强调了它们在文档结构中的作用和意义。time元素与pubdate属性用于机器可读的日期和时间，提高搜索引擎友好性。同时，提到了非主体结构标签如header、footer、hgroup和address的用途。对于兼容性问题，建议使用html5shiv.min.js等库解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本着学习并记录的态度，把看过的记录记录，为自己回顾用，和新人踩坑用。
注意：h5新标签用兼容性问题，不过现代浏览器基本可以不用考虑这个兼容性了。
一、HTML5 新增主结构标签（元素）

1. article 元素
article 代表文档，页面或程序中相对独立、完整的部分，通常用article 包裹。例如文章一样，里头依然可以包括header 、section 等元素。

    <article>
        <header>头部</header>
        <!--<p>这是article
            这样的嵌套是不允许的      
            <article>
            </article>
        </p>-->
        <!--注意在p元素中不能再嵌套article元素，浏览器在解析的时候会将article元素给提出来-->
        <!--也可以嵌套article-->
        <article>
            <header>头部</header>
            <section>内容区块</section>
            <footer>底部</footer>
        </article>
        <footer>底部</footer> 
    </article>

2. section 元素
区块元素，将相对独立的部分用section 进行包裹，可以包含多个区块元素。（可以嵌套）。一个section元素通常使用标题和对应的内容的。不得为了样式的需要而使用section。可以使用div。
3. nav 元素
导航区块元素，作为导航连接组使用。（导航栏、侧边导航栏等）

    <nav>
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">简介</a></li>
            <li><a href="">首页</a></li>
            <li><a href="">简介</a></li>
        </ul>
    </nav>

4. aside 元素
表示当前或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条。
5. time 元素和pubdate属性 ☆ （为了机器编码的时间，之前采样的是微格式形式【类名，属性】）
HTML5 新增的主体结构元素 time、pubdate 属性，用来无歧义、明确地对机器的日期和时间进行编码，并且以让人易读的方式来展现它，这个元素就是 time 元素。
作用：便于 搜索引擎 搜索，让搜索引擎知道这个页面的时间。
datetime是规定日期和时间。否则，由元素的内容给定日期和时间。
pubdate是指示元素中的日期和时间，是文档（或

元素）的发布日期。

    <!--  pubdate 代表当前发布的时间   与其他时间进行区分开  -->
    <time datetime="2016-10-16" pubdate>2016-10-16</time>
    <!--  舞会时间     -->
    <time datetime="2016-10-16">2016-10-16</time>
    <!--   日期和时间之间用T进行分割 间隔分隔符   -->
    <time datetime="2016-10-16T20:00">2016-10-16</time>
    <!--  Z表示机器编码使用的utc标准编码    -->
    <time datetime="2016-10-16T20:00Z">2016-10-16</time>
    <!--  +表示时差   -->
    <time datetime="2016-10-16T20:00+09:00">2016-10-16</time>

二、HTML5 新增非主体结构标签（元素）

1、header 元素
一般是一个页面的头部信息。（也可在区域块使用，感觉没必要）。
2、footer 元素
一般是一个页面的尾部信息。（也可在区域块使用，感觉没必要）。
3、hgroup 元素
hgroup 元素是将标题及其子标题进行分组的元素（标题比较多的场合下使用）。hgroup元素通常会将h1~h6元素进行分组。将一个article 元素里头标题及其子标题算为一组。
3、address 元素 ☆
用来呈现用户的联系方式，电话号码，地址等等，利于机器阅读。（平时可以留意使用）。

* 三、兼容性处理*
在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement(‘tagName’)创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement(‘tagName’)来创建一遍（创建标签），这样IE低版本也能正常解析HTML5新标签了，在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载第三方的一个JS库来解决兼容问题。
百度html5shiv.min.js 或者去github找找。

<!--[if lte IE 8]>
        <script src="./js/html5shiv.min.js"></script>
<!--[endif]>

                                                            by   turbo