3.2 HTML5页面主体内容标签
在HTML5页面中，为了使文档的结构更加清晰明确。新增了几个与页眉、页脚、内容区块等文档结构相关联的文档结构标签，通过使用这些文档结构标签，可以在HTML文档中清晰地划分不同的内容区块。在本节中将向读者详细介绍HTML5中在页面的主体结构方面新增的结构标签。
3.2.1 标识文章<article>标签
网页中常常出现大段的文章内容，通过文章结构元素可以将网页中大段的文章内容标识出来，使网页的代码结构更加整齐。在HTML5中新增了<article>标签，使用该标签可以在网页中定义独立的内容，包括文章、博客和用户评论等内容。
<article>标签的基本语法格式如下。
<article>文章内容</article>
一个<article>元素通常有它自己的标题，一般放在一个<header>标签中，有时还有自己的脚注。
如下面的网页HTML代码。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>网页新闻</title> </head> <body> <article> <header> <h1>新闻标题</h1> <time pubdate="pubdate">2017年11月12日</time> </header> <p>新闻正文内容</p> <footer> 新闻版底信息 </footer> </article> </body> </html>
在以上的HTML页面代码中，在<header>标签中嵌入文章的标题，在这部分中，文章的标题包含在<h1>标签中，使用<time>标签包含文章的发布日期。在<header>标签的结束标签之后使用<p>标签包含新闻的正文内容，在结尾外使用<footer>标签嵌入文章的版底信息作为脚注。整个示例的内容相对比较独立、完整，因此，对这部分使用了<article>标签。
<article>标签是可以嵌套使用的，当<article>标签嵌套使用的时候，内部的<article>标签中的内容必须和外部的<article>标签中的内容相关。
如下面的网页HTML代码。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>网页新闻</title> </head> <body> <article> <header> <h1>新闻标题</h1> <time pubdate="pubdate">2017年11月12日</time> </header> <p>新闻正文内容</p> <footer> 新闻版底信息 </footer> <section> <h2>评论</h2> <article> <header> <h3>用户1</h3> </header> <p>评论内容</p> </article> <article> <header> <h3>用户2</h3> </header> <p>评论内容</p> </article> </section> </article> </body> </html>
以上的HTML代码中通过结构标签将内容分为几个部分，文章标题放在<header>标签中，文章正文放在<header>标签的结束标签后的<p>标签中，然后使用<section>标签将正文与评论部分进行了区分，在<section>标签中嵌入了评论的内容，评论中每一个人的评论相对来说又是比较独立、完整的，因此对它们都使用了一个<article>标签，在评论的<article>标签中，又可以分为标题与评论内容部分，分别放在<header>标签与<p>标签中。
另外，<article>标签也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样。
使用<article>标签表示插件的代码如下所示。
<article> <h1>使用插件</h1> <object> <param name="allowFullScreen" value="true"> <embed src="文件地址" width="宽度" height="高度"> </embed> </object> </article>
3.2.2 标识章节<section>标签
在网页文档中常常需要定义章节等特定的区域。在HTML5中新增了<section>标签，该标签用于对页面中的内容进行分区。一个section元素通常由内容及其标题组成。<div>标签也可以用来对页面进行分区，但是<section>标签并不是一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用<div>标签，而非<section>标签。
<section>标签的基本语法格式如下。
<section>文章内容</section>
提示
<div>标签关注结构的独立性，而<section>标签关注内容的独立性。<section>标签包含的内容通常都是一段独立的内容，可以单独将该段内容单独存储，同样可以很好地表达其含义。
如下面的HTML代码中使用<section>标签将新闻列表的内容单独分隔，在HTML5之前，通常使用<div>标签来分隔该块内容。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>网页新闻</title> </head> <body> <section> <h1>网站新闻</h1> <ul> <li>新闻标题1</li> <li>新闻标题2</li> <li>新闻标题3</li> ...... </ul> </section> </body> </html>
<article>标签和<section>标签都是HTML5新增的标签，它们的功能与<div>标签类似，都是用来区分页面中不同的区域，它们的使用方法也相似，因此很多初学者会将其混用。HTML5之所以新增这两种标签，就是为了更好地描述HTML文档的内容，所以它们之间是有区别的。
<article>标签代表HTML文档中独立完整的可以被外部引用的内容。例如，博客中的一篇文章，论坛中的一个帖子或者一段用户评论等。因为<article>标签是一段独立的内容，所以<article>标签中通常包含头部（<header>标签）和底部（<footer>标签）。
<section>标签用于对HTML文档中的内容进行分块，一个<section>标签中通常由内容及标题组成。<section>标签中需要包含一个<hn>标签，一般不包含头部（<header>标签）或者底部（<footer>标签）。通常使用<section>标签为那些有标题的内容进行分段。
<section>标签的作用是对页面中的内容进行分块处理，相邻的<section>标签中的内容应该是相关的，而不是像<article>标签中的内容那样是独立的。如下面的HTML代码。
<article> <header> <h1>网页设计介绍</h1> </header> <p>这里是网页设计的介绍内容，介绍有关网页设计的相关知识……</p> <section> <h2>评论</h2> <article> <h3>评论者：用户1</h3> <p>这里是评论内容</p> </article> <article> <h3>评论者：用户2</h3> <p>这里是评论内容</p> </article> </section> </article>
在以上的HTML代码中，可以观察到<article>标签与<section>标签的区别。事实上<article>标签可以看作是特殊的<section>标签。<article>标签更强调独立性、完整性，<section>标签更强调相关性。
既然<article>和<section>标签是用来划分区域的，又是HTML5的新增标签，那么是否可以使用<article>和<section>标签来取代<div>标签进行网页布局呢？答案是否定的，<div>标签的作用就是用来布局网页，划分大的区域的。在HTML 4中只有<div>和<span>标签用来在HTML页面中划分区域，所以我们习惯性地把<div>当成一个容器。而HTML5改变了这种用法，它让<div>的工作更纯正，<div>标签就是用来布局大块，在不同的内容块中，按照需求添加<article>、<section>等内容块，并且显示其中的内容，这样才是合理地使用这些元素。
因此，在使用<section>标签时需要注意以下几个问题。
• 不要将<section>标签当作设置样式的页面容器，对于此类操作应该使用<div>标签来实现。
• 如果<article>标签、<aside>标签或者<nav>标签更符合使用条件，不要使用<section>标签。
• 不要为没有标题的内容区块使用<section>标签。
在HTML5中，<article>标签可以看成是一种特殊种类的<section>标签，它比<section>标签更强调独立性，即<section>标签强调分段或分块，而<article>标签则强调独立性。具体来说，如果一块内容相对来说比较独立、完整的时候，应该使用<article>标签，但是如果想将一块内容分成几段的时候，应该使用<section>标签。另外，在HTML5中，<div>标签只是一个容器，当使用CSS样式的时候，可以对这个容器进行总体的CSS样式的套用。
3.2.3 标识导航<nav>标签
导航是每个网页中都包含的重要元素之一，通过网站导航可以在网站中各页面之间进行跳转。在HTML5中新增了<nav>标签，使用该标签可以在网页中定义网页的导航部分。
<nav>标签的基本语法格式如下。
<nav>导航内容</nav>
<nav>标签标识的是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都需要被放置在<nav>标签中，只需要将主要的、基本的链接组放进<nav>标签中即可。
一个页面中可以拥有多个<nav>标签，作为页面整体或不同部分的导航。具体来说，<nav>标签可以用于以下位置。
• 传统导航条。常规网站都设置有不同层级的导航条，其作用是将当前页面跳转到网站的其他主要页面上去。
• 侧边栏导航。现在主流的博客网站及商品网站上都有侧边栏导航，其作用是从当前页面跳转到其他页面上去。
• 页内导航。页面导航的作用是在本页面几个主要的组成部分之间进行跳转。
• 翻页操作。翻页操作是指在多个页面的前后页或博客网站的前后篇文章滚动。
在HTML5中，只要是导航性质的链接，就要将其放入到<nav>标签中，该标签可以在一个HTML文档中出现多次，作为整个页面的导航或部分区域内容的导航。如下面的HTML代码。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>网页新闻</title> </head> <body> <nav> <ul> <li><a href="#">网站首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">设计作品</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </body> </html>
在以上的HTML代码中，<nav>标签中包含了4个用于导航的超链接，该导航可以用于网页全局导航，也可以放在某个段落作为区域导航。
提示
很多用户喜欢使用<menu>标签进行导航，<menu>标签主要是用在一系列交互命令的菜单上的，如使用在Web应用程序中。在HTML5中不要使用<menu>标签代替<nav>标签。
3.2.4 标识辅助内容<aside>标签
侧边结构元素可用于创建网页中文章内容的侧边栏内容。在HTML5中新增了<aside>标签，用于创建其所处内容之外的内容，<aside>标签中的内容应该与其附近的内容相关。
<aside>标签的基本语法格式如下。
<aside>辅助信息内容</aside>
<aside>标签用来表示当前页面或文章的辅助信息内容部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条及其他类似的有别于主要内容的部分。<aside>标签主要有以下两种使用方法。
（1）<aside>标签被包含在<article>标签中，作为主要内容的辅助信息部分，其中的内容可以是与当前文章有关的相关资料、名词解释等。其基本应用格式如下。
<article> <h1>文章标题</h1> <p>文章主体内容</p> <aside>文章内容的辅助信息内容</aside> </article>
（2）在<article>标签之外使用<aside>标签，作为页面或全局的辅助信息部分。最典型的是侧边栏，其中的内容可以是友情链接，博客中的其他文章列表、广告等。其基本应用格式如下。
<aside> <h2>列表标题1</h2> <ul> <li>列表项1</li> <li>列表项2</li> </ul> <h2>列表标题2</h2> <ul> <li>列表项1</li> <li>列表项2</li> </ul> </aside>
3.2.5 标识文章发布日期<time>标签
微格式是一种利用HTML的class属性来对网页添加附加信息的方法，附加信息如新闻事件发生的日期和时间、个人电话号码、企业邮箱等。
微格式并不是在HTML5出现之后才有的，在HTML5之前它就和HTML结合使用了，但是在使用过程中发现在日期和时间的机器编码上出现了一些问题，编码过程中会产生一些歧义。HTML5新增了<time>标签，通过该标签可以无歧义地、明确地对机器的日期和时间进行编码，并且以让人易读的方式展现出来，这个元素就是<time>标签。
<time>标签代码24小时中的某个时刻或某个日期，表示时刻时允许带时差。它可以定义很多格式的日期和时间，其语法格式如下。
<time datetime="2017-11-12">2017年11月12日</time> <time datetime="2017-11-12">11月12日</time> <time datetime="2017-11-12">我的生日</time> <time datetime="2017-11-12T18:00">我生日的晚上6点</time> <time datetime="2017-11-12T18:00Z">我生日的晚上6点</time> <time datetime="2017-11-12T18:00+09:00">我生日的晚上8点的美国时间</time>
编码时引擎读到的部分在datetime属性中，而元素的开始标签与结束标签中间的部分是显示在网页上的。datetime属性中日期与时间之间要使用字母“T”分隔，“T”表示时间。
注意倒数第2行，时间加上字母“Z”表示机器编码时使用UTC标准时间，倒数第一行则加上了时差，表示向机器编码另一地区时间，如果是编码本地时间，则不需要添加时差。
pubdate属性是一个可选的布尔值属性，可以添加在<time>标签中，用于表示文章或者整个网页的发布日期。使用格式如下。
<time datetime="2017-11-12" pubdate>2015年11月12日</time>
由于<time>标签不仅仅表示发布时间，而且还可以表示其他用途的时间，如通知和约会等。为了避免引擎误解发布日期，使用pubdate属性可以显式地告诉引擎文章中哪个时间是真正的发布时间。