我们结合移动设备（手机和平板电脑）的特性，介绍HTML5中新增的语义化标签元素，以及在移动Web浏览器下Web页面布局的知识及例子。
HTML5标准添加的新元素当中，用于标识常见页面结构的包括：section、header、footer、nav、article和mark等。
元素定义文档的页面组合，通常是一些引导和导航信息。而定义中说明
标签内通常包含section的头部信息，如hl-h6或hgroup等，但这不是必需的。同时也可以包含列表、搜索框或主题相关的Logo。如下代码所示：
<header><hl>zzfriend.com,这是一个html5社区</h1><p>这篇文章主要介绍HTML5新标签含义</p></header>
实际上，这是一段带有含义的HTML标签，用来表示头部信息，里面还有h1和p的内容，而且与以下的页面代码是一致的。
<div class='header'><h1>zzfriend.com,这是一个html5社区</h1><p>这篇文章主要介绍HTML5新标签含义</p></div>
元素定义文档或章节的末尾部分，通常包含一些章节的基本信息，如作者信息、相关链接及版权信息。而联系信息相关的内容一般会配合
标签。例如以下代码：
<footer><p>隐私信息|版权信息</p><p>关于我们|联系我们</p></footer>
需要注意的是，一个HTNfL页面上可以允许有一个或多个header和footer。
在footer标签内，不仅可以包含p标签等相关内容，同时也可以插入比如nav、ul、div等其他元素。因此需要根据实际情况而布局页面。从上述代码可以看出，虽然footer标签的内容插入了部分版权信息及相关的联系信息，但并不是带含义的内容，下面将介绍nav元素，它可以帮助此部分含有语义内容。
元素定义为用来构建导航，显示导航链接。nav标签的主要作用是放入一些当前页面的主要导航链接，例如在页脚显示一个站点的导航链接。我们将刚才footer标签的实例代码稍微更改一下，以表达导航语义的性质，如下代码所示：
<footer>
<nav>
<ul>
<li><a href=''>隐私信息</a></li>
<li><a href=''>版权信息</a></li>
<li><a href='>关于我们</a></li>
<li><a href=''>联系我们</a></li>
</ul>
</nav>
</footer>
代码改写后，footer页脚内容在页面中已经表达出基本的含义，这就是一个页脚的导航链接列表。当然，nav标签并不仅限于使用在footer中，其具体使用的地方并没有严格的要求。一般情况下，作为导航标签，在页面中任意地方都可以使用nav元素。但是为了更好地对页面进行规划和被搜索引擎收录，建议在真正含有导航功能意义的地方，才使用nav元素标签。
元素定义一个页面的区域，用来表示包含和页面相关的主要内容，其作用主要是装载非正文类的内容，例如广告、侧边栏等。在传统的WordPress博客模板中，其基本的布局主要是两栏或三栏布局。
上图所示的布局方式属于典型的博客页面布局，该布局的右侧边栏部分及区域都可以调整成前面提到的几个HTML5元素标签。
在HTML5规范中，article元素表示文档、页面，用来显示一块独立的文章内容，如一则网站新闻、一篇博客文章等。anicle标签是可以相互嵌套的。例如如下代码：
<article><header><h1>html5新元素article示例标题</h1></header><p>article新元素内容区域</P><footer><ul><li>文章标签1</li><li>文章标签2</li></ul></footer></article>
我们来解释一下上述代码。代码中使用article表示一篇文章主题内容元素，其内主要由三部分组成。其中header部分主要表示文章的头部信息，一般包含标题、时间、作者等信息，代码中使用h1元素表示文章的标题。第二部分目前使用p元素表示文章的主体内容。第三部分是footer，该部分一般包含文章标签等相关信息。
在HTML5规范中，section元素定义为文档中的节。比如章节、页眉、页脚或文档中的其他部分。
例如如下代码：
<article><section><hl>Apple</h1><p>iPhone手机内置的web游览器是mobile safari</p></section><section><h1>google</h1）<p>Android平台下自带的移动Web游览器是Android Browser</p></section></article>
HTML5将hgroup标签定义为对网页或区段的标题元素进行组合，通过使用多级别的hl—h6标签节点进行分组，例如副标题、标签行等。例如：
<header><hgroup><h1>本网站是一个关于HTML5的网站</h1><h2>这篇文章主要介绍HTML5新元素</h2><hgroup></header>
代码中，我们在header内使用hgroup元素表示一组信息。hgroup内共有hl和h2两部分元素内容，它们都分别表示为主标题和副标题等。
对于hgroup元素的用法，虽然没有严格的要求，但适当的使用hgroup元素对于SEO有一定的好处，因此hgroup标签内建议使用hl-h6标签。
实际上，除了我们介绍的语义标签外，在HTML5的标准中还定义了更多不同语义的标签。
* audio:定义音频内容。
* canvas:定义画布功能。
* command:定义一个命令按钮。
* datalist:定义一个下拉列表。
* details:定义一个元素的详细内容。
* dialog:定义一个对话框。
* keygen:定义表单里一个声称的键值。
* mark:定义有标记的文本。
* output:定义一些输出类型。
* progress:定义任务的过程。
* source:定义媒体资源。
* video:定义一个视频内容。
虽然HTML5标准中新增了很多新的元素，但实际上在移动Web应用中使用的机会并不多。
audio及video等标签虽然可以在移动Web应用中得到实践，但由于其性能、兼容性以及页面渲染等原因，它们还不能很好地应用到智能手机以及平板电脑的Web浏览器上。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery