2.3 HTML5结构元素
结构元素，又称为区块型元素，是用来定义区块内容范围的元素。之前，区块型元素只有<div>一个，HTML5新增了7个语义化结构元素，包括<article>、<aside>、<nav>、<section>、<header>、<footer>、<main>，但<main>元素不常用，最主要的原因是IE浏览器都不支持，所以在本章节不做讲解。图2-13列出了HTML5常用的6个机构元素。
图2-13 HTML5新增结构元素图
2.3.1 header 元素
2-4 HEADER元素
<header>元素通常被放置在页面或者页面中某个区块元素的顶部，其包含整个页面或者区块的标题、简介等信息，起到引导与导航的作用。
其不但可以放置页面或者页面中某个区块的标题，还可以放置搜索表单、logo图片等元素，按照最新的W3C标准，还可以放置<nav>导航栏。
例题2-13：使用<header>标签的网站头部实例。代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用header标签的网站头部实例</title>
</head>
<body>
<header>
<img src="images/logo.png" alt="**科技" />
<h1>**信息科技有限公司</h1>
</header>
</body>
</html>
需要注意的是，一个文档中可以包含一对或者一对以上的<header>标签。标签的位置是次要的，不一定非要显示在页面的上方。可以为任何需要的区块标签添加<header>元素，例如下面将要讲解的<article>、<section>等标签。
2.3.2 nav 元素
2-5 NAV元素
<nav>元素表示页面的导航，可以通过导航链接到网站的其他页面，或者当前页面的其他部分。
<nav>不但可以作为页面独立的导航区域存在，还可以在<header>标签中使用。此外，<nav>标签还可以显示在侧边栏中。由此可见，一个页面中可以有多个<nav>标签。
根据HTML5标准，<nav>标签只用于页面的主要导航部分。因为搜索引擎或者屏幕阅读器会根据<nav>标签来确定网站的主体内容，所以并不是任意一组超链接都适合放置在<nav>标签中，只要将主要的、基本的链接组放进<nav>即可。对于有辅助性的页脚链接，则不推荐使用<nav>标签。
例题2-14：<nav>标签的语法结构和使用方法。代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用nav标签</title>
</head>
<body>
<header>
<img src="images/logo.png" alt="**科技" />
<h1>**信息科技有限公司</h1>
<nav>
<li><a href="#">首页</a></li>
<li><a href="example.html">客户案例</a></li>
<li><a href="service_one.html">技术服务</a></li>
<li><a href="aboutus_one.html">关于我们</a></li>
<li><a href="connection.html">联系我们</a></li>
</nav>
</header>
</body>
</html>
值得注意的是，HTML5规范不允许将<nav>标签嵌套在<address>标签中使用。
2.3.3 aside 元素
<aside>元素所包含的内容不是页面的主要内容，具有独立性，是对页面的补充。<aside>标签一般使用在页面、文章的侧边栏、广告、友情链接等区域。
例题2-15：<aside>标签的语法结构和使用方法。代码如下：
…
<article>
<h1>HTML5结构元素</h1>
<p>...．正文．....</p>
<aside>
<h2>什么是语义化标签</h2>
<p>语义化标签就是．.....</p>
</aside>
</article>
…
2.3.4 article 元素
2-6 ARTICLE元素
article元素表示包含于一个文档、页面、应用程序或网站中的一段独立的内容，可以被独立地发布或者重新使用文章标签标记。
<article>标签应该使用在相对比较独立、完整的内容区块，所以可以在一篇博客、一个论坛帖子、一篇新闻报道或者一个用户评论中使用它。通常情况下，一个<article>元素包括标题、正文和脚注。和<nav>标签一样，该标签同样不能用在<address>标签中。
例题2-16：<article>标签的语法结构和使用方法。代码如下：
…
<article>
<h1>HTML5结构元素</h1>
<p>...．正文．....</p>
<footer>版权所有*伪版必究</footer>
</article>
…
<article>标签还可以嵌套使用，但是它们必须是部分与整体的关系。例如，在一篇发表的博客中，可以对读者评论使用该标签。
例题2-17：<article>标签嵌套的语法结构和使用方法。代码如下：
…
<article>
<h1>HTML5结构元素</h1>
<p>...．正文．....</p>
<article>
<header>
<h2>读者评论</h2>
</header>
<article>
<header>
<h3>评论人：张三</h3>
<p>评论时间：<time datetime="2017-12-15">2017-12-15 11:45:23</time> </p>
</header>
<p>张三到此一游</p>
</article>
<article>
<header>
<h3>评论人：李四</h3>
<p>评论时间：<time datetime="2017-12-09">2017-12-09 14:20:15
</time></p>
</header>
<p>李四到此一游</p>
</article>
</article>
</article>
…
2.3.5 section 元素
2-7 SECTION元素
<section>元素是一个主题性的内容分组，通常用于对页面进行分块或者对文章等进行分段。
<section>标签所包裹的是有一组相似主题的内容，可以用这个标签来实现文章的章节、标签式对话框中的各种标签页等类似的功能。
<section>通常包含一个头部<header>，可能还会包含一个尾部<footer>。
例题2-18：<section>标签的语法结构和使用方法。代码如下：
…
<article>
<h1>JavaScript框架</h1>
<p>JavaScript框架是指以Javascript语言为基础搭建的编程框架。</p>
<section>
<h2>angular.Js<h2>
<p>angular.Js是一款优秀的前端JS框架</p>
</section>
<section>
<h2>Vue.js<h2>
<p>Vue.js是用于构建交互式的Web界面的库</p>
</section>
<section>
<h2>jQuery<h2>
<p>jQuery是一个快速、简洁的JavaScript框架</p>
</section>
</article>
…
在这篇关于JS框架的文章中，所列举的三个框架都是文章主题构成的一部分，所以使用<section>标签对其进行分段。
不但可以在<article>标签中使用<section>标签，还可以在<section>标签中使用<article>标签。
例题2-19：在<section>标签中使用<article>标签的语法结构和使用方法。代码如下：
…
<section>
<h1>HTML5技术栈</h1>
<p>广义而言的HTML5包含HTML、CSS和JavaScript三个部分</p>
<article>
<h2>HTML<h2>
<p>内容</p>
</article>
<article>
<h2>CSS<h2>
<p>样式</p>
</article>
<article>
<h2>JavaScript<h2>
<p>行为</p>
</article>
</section>
…
在这个例子中，<section>标签代表一段内容，在这段内容中，HTML、CSS、JavaScript是三个完全独立的部分，因而为这三个不同的部分分别使用<article>标签。
<div>、<section>、<article>三者的比较：
① <div>：应用广泛，只要想为一个区域定义一个样式或者为其添加JS行为，就可以使用div标签。
② <section>：包含的内容是一个明确的主题，通常有标题区域。
③ <article>：如果页面中需要一个单独的模块来实现一个单独的功能，就用<article>，其他的时候都用<section>。
2.3.6 footer 元素
2-8 FOOTER元素
<footer>元素一般被放置在页面或者页面中某个区块的底部，包含版权信息、联系方式等信息。
跟<header>标签一样，<footer>标签的使用个数没有限制，可以在任意需要的区块底部使用。
例题2-20：<footer>标签的语法结构和使用方法。代码如下：
…
<footer>
<small>
版权所有 ©2016-2017**信息科技有限公司
</small>
</footer>
…