新增的主体结构元素

主体结构元素：article、section、nav、aside
非主体结构元素：header、hgroup、footer、address

article元素

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或者其他任何独立的内容。
除了内容部分，一个article通常有它自己的标题（一般放在header里面），有时还有自己的脚注。

<article>  
    <header>    
        <h1>苹果</h1>    
        <p>发表日期: <time pubdate="pubdate">2010/10/09</time></p>  
    </header>  
    <p><b>苹果</b> ，植物类水果，多次花果...（“苹果”文章正文）</p> 
    <footer>    
        <p><small>著作权归***公司所有。</small></p>  
    </footer>
</article>

article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。

<article>  
    <header>    
        <h1>苹果</h1>    
        <p>发表日期: 
           <time pubdate datetime="2010/10/09">2010/10/09</time>
        </p>  
    </header>  
    <p><b>苹果</b> ，植物类水果，多次花果...（“苹果”文章正文）</p> 
    <section>    
        <h2>评论</h2>    
        <article>      
            <header>      
                <h3>发表者：陆凌牛</h3>      
                <p><time pubdate datetime="2010-10-10T19:10-08:00">1小时前</time></p>    
            </header>    
            <p>我喜欢苹果，我最喜爱的品种是红富士。</p>    
        </article>        
        <article>      
            <header>        
                <h3>发表者：张玉</h3>        
                <p><time pubdate datetime="2010-10-10T19:15-08:00">1小时前</time></p>      
            </header>      
            <p>苹果？我不喜欢，我喜欢吃橘子。</p>    
        </article>  
    </section>
</article>

article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样。

<article>  
    <h1>My Fruit Spinner</h1>  
    <object>    
        <param name="allowFullScreen" value="true">    
        <embed src="#" width="600" height="395"></embed>  
    </object>
</article>

section元素

section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。
通常不推荐为那些没有标题的内容使用section元素，它的作用是对内容进行分块，或对文章进行分段。

<article>  
    <h1>苹果</h1>  
    <p><b>苹果</b> ，植物类水果，多次花果...</p>
    <section>    
        <h2>红富士</h2>    
        <p>红富士是从普通富士的芽(枝)变中选育出的着色系富的统称...</p>  
    </section>  
    <section>    
        <h2>国光</h2>    
        <p>国光苹果品，又名小国光、万寿。原产美国，1600年发现的偶然实生苗...</p>  
    </section>    
</article>

在H5中，article可以看成是一种特殊种类的section元素。section元素强调分段或分块，而article强调独立性。
总结：

• 不要将section元素用作设置样式的页面容器。
• 如果article元素、aside元素或nav元素更符合使用条件，不要使用section。
• 不要为没有标题的内容区块使用section元素。

nav元素

nav元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要放进nav元素，只需要将主要的、基本的链接组放进nav元素即可。

<h1>技术资料</h1>
<nav>
    <ul>
        <li><a href="/">主页</a></li>
        <li><a href="/events">开发文档</a></li>
        ...more...
    </ul>
</nav>
<article>
   <header>
        <h1>HTML5与CSS3的历史</h1>
        <nav>
            <ul>
                <li><a href="#HTML5">HTML5的历史</a></li>
                <li><a href="#CSS3">CSS3的历史</a></li>
                ...more...
            </ul>
        </nav>
    </header>
    <section id="HTML5">
        <h1>HTML5的历史</h1>
        <p>讲述HTML5的历史的正文</p>
    </section>
    <section id="CSS3">
        <h1>CSS3的历史</h1>
        <p>讲述CSS3的历史的正文</p>
    </section>
    ...more...
    <footer>
        <p>
            <a href="?edit">编辑</a> | 
            <a href="?delete">删除</a> | 
            <a href="?rename">重命名</a>
        </p>
    </footer>
</article>
<footer>
    <p><small>版权所有：xxx</small></p>
</footer>

nav元素可以用于以下场合：

• 传统导航条
• 侧边栏导航
• 页内导航
• 翻页操作

aside元素

aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其它类似的有别于主要内容的部分。
aside元素主要有以下两种用法：
1）被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释等。

<header>    
    <h1>F#入门</h1>  
</header>  
<article>  
    <h1>第四节 词法闭包</h1>  
    <p>lambda表达式可以创建词法闭包...(文章正文）</p>    
    <aside>      
        <!-- 因为这个aside元素被放置在一个article元素内部，
        所以分析器将这个aside元素的内容理解成是和article元素的内容相关联的。 -->      
        <h1>名词解释</h1>      
        <dl>        
            <dt>F#</dt>        
            <dd>F#为.Net2010中引入的新型函数型编程语言</dd>      
        </dl>    
        <dl>        
            <dt>词法闭包</dt>        
            <dd>词法闭包是指，将创建lambda表达式时的环境保存起来...(详细解释）</dd>      
       </dl>       
    </aside>  
</article>

2)在article元素之外使用，作为页面或站点全局的附属信息部分。最典型的形式是侧边栏，其中的内容可以是友情链接、博客中其他文章列表、广告单元等。

<aside>
    <nav>
        <h2>评论</h2>
        <ul>
            <li><a href="http://blog.sina.com.cn/1683">erway</a>    10-24 14:25</li>
            <li><a href="http://blog.sina.com.cn/u/1345">太阳雨</a>   10-22 23:48<br/>
                <a href="http://blog.sina.com.cn/s/blog_6a9kv8f.html#comment">顶，拜读一下老牛的文章</a>
            </li>
            <li>
                <a href="http://blog.sina.com.cn/u/1259295385">新浪官博</a>08-12 08:50<br/>
                <a href="#">恭喜！您已经成功开通了博客</a>
            </li>
       </ul>
    </nav>
</aside>

time元素

time元素代表24小时中的某个时刻或某个日期，表示时刻时允许带时差。它可以定义很多格式的日期和时间。

<time datetime="2017-1-1">1月1日</time>
<time datetime="2017-1-1T20:00">我生日</time>
<time datetime="2017-1-1T20:00Z">我生日</time>
<time datetime="2017-1-1T20:00+09:00">我生日</time>

编码时机器读到的部分在datetime属性里，而元素的开始标记和结束标记中间的部分是显示在网页上的。datetime属性中日期与时间之间要用T文字分隔，T表示时间。时间加上Z文字表示给机器编码时使用UTC标准时间，最后一行加上了时差，表示向机器编码另一个地区时间，如果是编码本地时间，则不需要添加时差。

pubdate属性

pubdate属性是一个可选的、boolean值的属性，它可以用到article元素中的time元素上，意思是time元素代表了文章（article元素的内容）或整个网页的发布日期。

<article>
    <header>
        <h1>关于<time datetime=2010-10-29>10月29日</time>的舞会通知</h1>
        <p>发布日期:<time datetime=2010-10-11 pubdate>2010年10月11日</time></p>
    </header>
    <p>大家好:我是法律系3年级学生代表,......(关于舞会的通知)</p>
</article>

新增的非主体结构元素

header元素

header元素是一种具有引导和导航作用的结构元素。通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其它内容，例如数据表格、搜索表单或相关的logo图片。

<header>
    <h1>网页标题</h1>
</header>
<article>
    <header>
        <h1>文章标题</h1>
    </header>    
    <p>文章正文</p>
</article>

一个header元素通常包括至少一个h1~h6元素，也可以包括hgroup元素，还可以包括nav或其他元素。

hgroup

hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组比如一个内容区块的标题及其子标题算一组。如果文章只有一个主标题，是不需要hgroup元素的。

<article>
    <header>
        <h1>文章标题</h1>
        <p><time datetime="2010-03-20">2010年10月29日</time></p>
    </header>
    <p>文章正文</p>
</article>

如果文章有主标题，主标题下边有子标题，就需要用hgroup元素了。

<article>
    <header>
        <hgroup>
            <h1>文章主标题</h1>
            <h2>文章子标题</h2>
        </hgroup>
        <p><time datetime="2010-03-20">2010年10月29日</time></p>
    </header>
    <p>文章正文</p>
</article>

footer元素

footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。

<footer>
    <ul>
        <li>版权信息</li>
        <li>站点地图</li>
        <li>联系方式</li>
    </ul>
</footer>

还可以为article元素和section元素添加footer元素。

<article>
    文章内容
    <footer>
        文章的脚注
    </footer>
</article>
<section>
    分段内容
    <footer>
        分段内容的脚注
    </footer>
</section>

address元素

address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、网站链接、电子邮箱、真实地址、电话号码等。

<footer>
    <div>
        <address>
            <a title="文章作者：xxx" href="http://blog.xx.com.cn/xx">陆凌牛</a>
        </address> 
        发表于<time datetime="2020-10-04">2020年10月4日</time>
    </div>
</footer>

增强的页面元素

新增的figure元素与figcaption元素

figure元素也是一种元素的组合，带有可选标题。figure元素用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生任何影响。figure元素所表示的内容可以是图片、统计图或代码示例。
figcaption元素表示figure元素的标题，它从属于figure元素 ， 必须书写在figure元素内部，可以书写在figure元素内的其他从属元素的前面或后面。一个figure元素内最多只允许放置一个figcaption元素，但允许放置多个其他元素。

<figure> 
    ![](tyl1.jpg) 
    ![](zyf.jpg)
    ![](zxy.jpg)
    <figcaption>我喜爱的明星</figcaption>
</figure>

figure元素所表示的内容通常是图片、统计图或代码示例，但并不仅限于此，它同样可以用来表示音频插仲件、 视频插件或统计表格等。

新增的mark元素

mark元素表示页面中需要突出显示或高亮显示的，对于当前用户具有参考作用的一段文字。它通常使用于引用原文的时候，目的是引起读者的注意。
除了在搜索结果中高亮显示关键词之外，mark元素的另一个主要作用是在引用原文的时候，为了某种特殊目的而把原文作者没有特别重点标示的内容给标示出来。

刘德华：光芒万丈的不老情人
<p>　　
有人说华仔是东方的<mark>汤姆•克鲁斯</mark>，是忧郁的王子<mark>劳伦斯•奥立佛</mark>。
华仔那张以鹰钩鼻为核心的脸蛋的确有些欧美人的韵味，与一般的亚洲人的脸不太一样。
</p>

新增的progress元素

progress元素代表一个任务的完成进度，这个进度可以是不确定的，只是表示进度正在进行，但不清楚还有多少工作量没有完成，也可以用0到某个最大数字之间的数字来表示准确的进度完成情况(譬如进度百分比)。
该元素具有两个属性来表示当前任务完成情况，value属性表示已经完成了多少工作量，max属性表示总共有多少工作量。工作量的单位是随意的，不用指定。
在属性设定的时候，value属性和max属性只能指定为有效的浮点数，value属性的值必须大于0，且小于或等于max属性，max属性的值必须大子0。

<script>
var progressBar = document.getElementById('p');
function button_onclick(){
    var progressBar = document.getElementById('p');
    progressBar.getElementsByTagName('span')[0].textContent ="0";
    for(var i=0;i<=100;i++)
        updateProgress(i);
}
function updateProgress(newValue) {
    var progressBar = document.getElementById('p');
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
}
</script>
<section>
    <h2>progress元素的使用示例</h2>
    <p>完成百分比: <progress id="p" max=100><span>0</span>%</progress></p>
    <input type="button" onclick="button_onclick()"  value="请点击"/>
</section>

新增的meter元素

meter元素表示规定范围内的数量值。例如磁盘使用量，对某个候选者的投票人数占总投票人数的比例等。
meter元素有如下六个属性：

• value：在元素中特地表示出来的实际值。默认为0，可以给该属性指定一个浮点小数值
• mín：指定规定的范围时允许使用的最小值，默认为0，设定该属性时设定的值不能小于0
• max：指定规定的范围时允许使用的最大值，如果设定时该属性值小于min属性的值， 那么把min属性的值视为最大值。max属性的默认值为1
• low：规定范围的下限值。必须小于或等于high属性的值。同样的，如果low属性值小于min属性的值，那么把min属性的值视为low属性的值
• high：规定范围的上限值。如果该属性值小于low属性的值，那么把low属性的值视为high属性的值。同样的，如果该属性值大于max属性的值，那么把max属性的值视为high属性的值
• optimum：最佳值，属性值必须在min属性值与max属性值之间，可以大于high属性值

<p>磁盘使用量 : <meter value="40" min="0" max="160" > 40/160</meter>GB</p>
<p>你的得分是 :
    <meter value="91" min="0" max="100" low="40" high="90" optimum="100'>A+</meter>
</ p>
<!--不是一定要使用属性-->
<meter>80%</meter>
<meter>3/4</meter>
<!--下面写法是不正确的，因为画面上什么都不显示 -->
<meter min="0" max="100" value="75"></meter>

改良的ol列表

在H5中，将ol列表进行了改良，为它添加了start属性与reversed属性。
如果不想ol元素所代表的列表编号从1开始，可以使用star属性来自定义编号的初始值。

<ol start=5>
<li>列表内容5</li>
<li>列表内容6</li>
<li>列表内容7</li>
</ol>

如果想对列表进行反向排序，可以使用ol列表的reversed属性。

<ol reversed>

改良的dl列表

在HTML4中，dl元素是一个专门用来定义术语的列表，dl列表中包括几条术语定义，列表中的每一项包含一个术语及一个或多个对那条术语的定义，这些术语与名词解释是多对多的关系一一一条术语可以有多个定义，但不同的术语又可能存在相同的定义，因此，从总体来说，这些术语的定义是模糊的、混乱的，经常被误解、错用或者根本就不被使用了。
在H5中，将该元素进行重新定义，重新定义后的dl列表包含多个带名字的列表项。每一项包含一条或多条带名字的dt元素，用来表示术语，dt元素后面紧跟一个或多个dd元素，用来表示定义。在一个元素内，不允许有相同名字的dt元素，不允许有重复的术语。
dl列表可以用来定义文章或网页上的术语解释。

<article>
    <h1>aritcle元素</h1>
    <p>一块独立的内容。它可以用来表示RRS中一块独立的内容，也可以用来表示博客中独立的一篇文章。...</p>
    <aside>
        <h2>术语解释</h2>
        <dl>
              <dt><dfn>RSS</dfn></dt>
              <dd>RSS也叫聚合RSS是在线共享内容的一种简易方式(也叫聚合内容)...</dd>
              <dt><dfn>博客</dfn></dt>
              <dd>博客，又译为网络日志、部落格或部落阁等，是一种通常由个人管理...</dd>
        </dl>
    </aside>
</article>

dl列表也可以用来表示一些页面或article元素中内容的辅助信息，例如作者、类别等。

<dl>
<dt>作者</dt>
<dd>陆凌牛</dd>
<dt>出版社</dt>
<dd>机械工业出版社</dd>
<dt>类别</dt>
<dd>网络开发</dd>
</dl>

加以严格限制的cite元素

cite元素表示作品(例如一本书、一 篇文章、一首歌曲等)的标题。该作品可以在页面中被详细引用，也可以只在页面中提一下。
在HTML4中，cite元素可以用来表示作者，但在H5中明确规定了不能用cite元素表示包括作者在内的任何人名，因为人名不是标题 (当然除非标题就是一个人的名字)。但是为了与HTML4或之前版本的网页兼容，并没有把它当作错误，所以这只是一个规定而已。

<h3>cite元素示例</h3>
<p>我最喜欢的电影是由甄子丹主演的<cite>精武风云</cite>。</p>

重新定义的small元素

在H5中，对small元素进行了重新定义，使其由原来的通用展示性元素变为更具体的、专门用来标识所谓"小字印刷体"的元素，通常用在诸如免责声明、注意事项、能律规定、与版权相关等的法律性声明文字中，同时不允许被应用在页面主内容中，只允许被当做辅助信息用inline方式内嵌在页面上使用。同时，small元素也不意味着元素中内容字体会变小，如果需要将字体变小，需要配合着css样式表来使用。