本文是HTML及CSS课程的第十六课。主要介绍HTML5中新增的用于布局的语义标签，这些标签可以让开发人员和浏览器更加直观的了解网页的每个部分
以下是一个常见的页面草图，它由几个功能区域组成，页面标题，导航区，侧边栏，主内容区，页脚。这些功能区域也是一般网站基本都应具有的部分。如下： 如果要实现上面的页面布局效果，在HTML5以前的时代，代码一般会是下面的样子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 页面草图 </title> </head> <body> <div class="header">页面标题</div> <div class="nav">主导航区</div> <div class="aside">侧边栏</div> <div class="main">主内容区</div> <div class="footer">页脚</div> </body> </html>而在HTML5中，我们可以使用新增的更具语义化的标签，如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 页面草图 </title> </head> <body> <header>页面标题</header> <nav>主导航区</nav> <aside>侧边栏</aside> <main>主内容区</main> <footer>页脚</footer> </body> </html>可以看到，使用了<header>、<nav>、<aside>、<main>、<footer>这些比<div>更具语义的标签表示网页的各个部分，让开发人员更直观的了解页面每个部分的功能，同时，搜素引擎也可以更方便的理解页面的各个部分。
HTML5中新增的常用语义标签包括：
区块标签：<article>、<section>、<nav>、<aside>、<header>、<footer>内容分组标签：<figure>、<figcaption>、<main>文本级别标签：<time> 说明：区块标签和内容分组标签均为块标签，文本级别的标签是行标签。通过恰当合理的用于这些标签，我们可以将新的，丰富的含义添加到我们的网页中。我们将以下面的页面为例，说明HTML5中新增语义标签的具体用法，示例页面如下：
<article>标签为文章标签，一个<article>标签可以表示一个文档，页面、应用程序或网站中的一段独立的内容，也就是说，它能够独立的被发布或重新使用；例如：一篇博客，一个论坛帖子，一篇新闻报道，一个用户评论等。 如下： <article>标签也可以表示用户评论，如果想把一篇文章和它的评论都表示出来，可以嵌套使用，如：
<article> <!--文章内容--> <article> <!--文章评论--> </article> <article> <!--文章评论--> </article> </article> <article> <!--文章内容--> <article> <!--文章评论--> </article> <article> <!--文章评论--> </article> </article><header>标签一般放置在页面的顶部，或者页面中某一个区块元素的顶部，包含整个页面或某个区块元素的标题，简介等信息。比如： 或者： 说明：
一个页面中可以包含一个或多个<header>标签，可以为<body>、<article>、<section>和<aside>添加<header>元素。<header>标签不一定非要显示在页面的上方，它的内容决定这个需要使用<header>标签，位置并不重要。<footer>标签表示页脚，注脚等，该标签一般放置在页面的底部，或者页面中某个区块元素的底部。如： 或者：
<nav>标签表示页面的导航，可以通过导航链接到网站的其他页面，或者当前页面的其他部分。比如： 说明：
<nav>标签常用于这些场景：作为页面中独立的导航区域，作为页面头部区域的一部分（如上例），显示在侧边栏中的导航区域或综合以上的场景（同时显示在页面头部和侧边栏中等）。搜索引擎经常根据<nav>标签来确定网页中的主要内容，因此，并不是任何一组超链接都适合放在<nav>标签中，比如，很多网站顶部靠左或靠右的登陆条，或者很多网站会在页脚显示一些隐私条款，免责声明，友情链接等的信息，它们都不是网站的主要内容，虽然也可以使用<nav>标签，但是完全没有必要。<aside>标签包含的内容不是页面的主要内容，具有独立性，是对页面内容的补充。一些使用<aside>标签的例子，如页面侧边栏，广告，友情链接，文章引语（内容摘要）。如下：
<section>标签在HTML5中表达的意义比较抽象，它表示一个主题性的内容分组，通常包含一个头部（<header>），可能会有一个尾部（<footer>）。如下： 说明：
<section>标签有点类似<div>标签，都是将一定的区块内容组织到一起，但也有很大的不同： <div>标签应用更广泛，只要你想为一个区域定义一个样式，就可以使用<div>标签。<section>标签包含的内容应该具有要给明确的主题，通常会带有一个标题区域。 上面的例子中，左侧边栏可以分为两部分，每一部分都可以用一个<section>标签来表示。<main>标签用来表示页面的主体内容，每一个页面只能包含一个<main>标签，<main>标签中不不包括网站的标题，logo，主导航，版权声明等信息。如下：
figure本身为图像的意思，figcaption就是图像标题。顾名思义，<figure>标签和<figcaption>标签用来表示一副图片及标题。在真正运用中，不只有图片可以放置于<figure>标签中，以后我们学习的<viedo>（视频）也常常放置于<figure>中。如下：
<time>标签用来表示日期，或者一个时间，或者同时表示一个日期和时间值。如下： 说明：
<time>标签中有一个重要的属性datetime，它的属性值必须是一个固定格式的时间值，可以被浏览器、搜索引擎等方便的识别。如果<time>添加了datetime属性，那么标签中间的文本只要人可以识别就可以了，比如“今天”，“结婚纪念日”，“情人节”或者“1小时前”等。如果<time>标签中没有定义datetime属性，那么标签中间的文本就需要一个固定格式的时间值。固定格式的时间值常用写法如下： 常用写法说明2015-06-30指定年月日2015-06指定年月15-06-30年份可以是两位数字14:54:39指定时分秒（24小时制）14:54指定时分（24小时制）2015-06-30 14:54:39指定日期和时间2015-06-30T14:54:39T表示时间，意义同上2015-06-30T14:54:39ZZ表示使用UTC标准时间，UTC标准时间+8小时=北京时间