1. 主体结构元素
在HTML5中,为了使文档的结构更加清晰明确,增加几个与页眉、页脚、内容区块等文档结构相关联的结构元素。
1.1 article元素
article元素表示文档、页面或应用程序中独立、完整、可以独立被外部引用的内容。可以是一篇博客或文章,或其他的任何独立的内容。
除了内容部分,一个article元素可以有header元素、footer元素。
<article>
<header>
<h1>Title</h1>
<div><time>2015-04-09</time></div>
</header>
<div></div>
<footer>
<small>Copywrite</small>
</footer>
</article>
article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联。如一篇博客文章中,评论可以使用嵌套article元素,用来显示评论的article元素被嵌套包含在表示整体内容的article元素中。
<article>
<header>
<h1>Title</h1>
<div><time>2015-04-09</time></div>
</header>
<div></div>
<section>
<h2>Comments</h2>
<article>
<header>
<h3></h3>
<div></div>
</header>
</article>
<article>
<header>
<h3></h3>
<div></div>
</header>
</article>
</section>
<footer>
<small>Copywrite</small>
</footer>
</article>
1.2 section元素
section元素用于对页面内容进行分块,一个section元素通常由内容及其标题组成。通常不在没有标题的内容区域使用section。
<article>
<h1></h1>
<section>
<h2></h2>
<div></div>
</section>
<section>
<h2></h2>
<div></div>
</section>
</article>
<section>
<h1></h1>
<article>
<h2></h2>
<div></div>
</article>
<article>
<h2></h2>
<div></div>
</article>
</section>
1.3 nav元素
nav元素是一个可以用作页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。一个页面可以有多个nav元素,作为页面整体或不同部分的导航。
示例
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
1.4 aside元素
aside元素用来表示当前页面或文章的附属信息部分,可以包含与当前页面或主要内容相关的引用、侧边栏、导航条,以及其他类似的有别于主要内容的部分。
aside元素的两种主要用法:
1>、被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的参考资料、名称解释等。
<article>
<aside>
<h1>名称解释</h1>
<p></p>
</aside>
</article>
2>、在article元素之外使用,作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以是友情链接、博客中其他文章列表或评论等。
<aside>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</aside>
1.5 time元素
time元素代表24小时中的某个时刻或某个日期,可以定义多种格式的日期和时间。
<time datetime="2015-04-18">2015年04月18日</time>
编码时机器读到的部分在datetime属性里,元素在网页显示的是开始标记与结束标记之间的部分。
pubdate属性
pubdate属性是一个可选的、boolean值的属性,用于time元素上表示发布日期。
<time datetime="2015-04-18" pubdate>2015年04月18日</time>
2. 非主体结构元素
2.1 header元素
header元素是具有引导和导航作用的结构元素,常用来放置整个页面或页面内的一个内容区块的标题。一个网页内并未限制header元素的个数,可以有多个,为每个内容区块添加header元素。
<header>
<h1>标题</h1>
</header>
<article>
<header>
<h1>标题</h1>
</header>
</article>
在HTML5中,一个header元素通常包括至少一个heading元素(h1-h6)。
2.2 footer元素
footer元素可以作为一个区块的脚注,通常包括脚注信息,如作者、相关阅读链接及版权信息等。
<footer>
<ul>
<li></li>
<li></li>
</ul>
</footer>
可以为article元素或section元素添加footer元素。
<article>
<footer>
<p></p>
</footer>
</article>
<section>
<footer>
<p></p>
</footer>
</section>
2.3 address元素
address元素用来在文档中呈现联系信息,包括文档作者、链接、邮箱等。
<footer>
<address>作者</address>
<time datetime="2015-04-18" pubdate>2015年4月18日</time>
</footer>