使用 HTML5 正确合理的重构你的网页

HTML5 是下一代 Web 开发标准，到现在的2012年， HTML5 规范编写完成了，虽然计划到2022年，浏览器将会完全支持整个 HTML5 ，但是现在经过浏览器厂商的努力，现代浏览器已经可以支持一部分 HTML5 的新功能。此外，在 QQ空间、百度等网站，都已经使用 HTML5 进行了重构。浏览器也在不断的升级，将会对 HTML5 有一个更好的支持。

我们为什么要使用 HTML5

HTML5 的语法更简单精炼，语义性更强，便于编写代码和理解别人编写的代码。搜索引擎也在不断的提升自己对 HTML5 页面的抓取、提取信息技术，语义性的增强，也便于搜索引擎的理解，对 SEO 也有一定的意义。

我们要如何使用 HTML5 重构网页

HTML5 中增加了大量的新标签。这些标签大体可以分为两类：1，功能性标签。2，语义性标签。

功能性标签：就是类似canvas、video 等标签，它是 HTML5 新创造出来的，用于实现一些新功能用的。这类新增标签，用于某些新功能的，这些新功能往往需要浏览器配合实现，所以在早期的浏览器中，功能不会得到支持。

语义性标签：就是类似 header、footer、nav 等等标签。它们类似 div，没有什么新增的功能，但是语义性增强了。例如，使用 header 括起来的内容，就会被认为是头部相关，页面中使用 nav 括起来的有序列表（ol）或者无序列表（ul），就会被认为是这个网站（或者网页）的导航。这类标签同样是新增的，在早期浏览器中不会被支持，但是这与功能性的标签不同，由于它的本质和 div 类似，所以可以通过一段 JavaScript 代码来进行 hack 从而让早期浏览器支持。这点我们将会在文章后面介绍到。

我们要重构 HTML5 页面，就是使用 HTML5 的新标签和相关的新用法，针对原来的用法进行相应的替换。而本文的内容，就是介绍重构网页比较常用的 HTML5 语义性标签的用法，以及如何合理正确的使用这些标签来替换之前网页的相应标签。这里，我以一个博客网站作为案例。

本文要用的 HTML5 标签

更简洁的 DOCTYPE 文档声明

在 XHTML 或者 HTML4 中，有多少人能记住并手写出来最顶端的 DOCTYPE 声明？那么长，那么复杂的 DOCTYPE 声明，只能靠复制。而在 HTML5 中，DOCTYPE 只有四个字母 “html”。

XHTML：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
HTML5 ：

<!DOCTYPE html>
更简洁的文档编码声明

同样的，在 XHTML 和 HTML4 中，要声明文档编码需要使用 meta 标签，写很多东西。在 HTML5 中，meta 标签直接添加了一个 charset 属性，用来描述文档编码。

XHTML：

网页相关资源的引入

使用 link 标签引入 CSS ，使用 script 标签引入 JavaScript。这些和以前一样没有变化。

网站的头部区域

网站的头部区域，通常放置网站的标题、副标题、头部广告、网站介绍、网站导航等等。在之前的 XHTML 或者 HTML4 中，通常写一个 id=“header” 的 div 来实现。但是由于使用频率太高，于是 HTML5 中，新增了一个 header 标签，用于表示头部区域。

XHTML：

<div id=”header” ></div>
HTML5：

<header></header>
网站的标题和描述

正确的并且有 SEO 功效的网站标题区域（LOGO）写法应该是这样的：

使用 h1 来标记网站的标题，使用 h2 来标记网站的副标题、描述等。

如果网站使用图片作为 LOGO ，也要使用这种方法，但是为了版面，需要使用文本隐藏技术，将这些文字隐藏。之后，再使用 img 标签引入 LOGO 图片，然后添加 img 的 alt 属性为网站名称，并且为图像添加一个链接，链接到网站首页。

在 HTML5 中，新增了一个 hgroup 标签，用于对标题以及子标题进行分组。我们可以使用 hgroup 元素包裹网站标题（h1)和网站副标题（h2）。

XHTML：

<h1>我爱水煮鱼</h1>
<h2>人人都爱 WordPress</h2>
HTML5：

<hgroup>
<h1>我爱水煮鱼</h1>
<h2>人人都爱 WordPress</h2>
</hgroup>
使用 article 表示文字的一个摘要

HTML5 新增 article 标签，来表示文档、页面或者独立的、完整的、可以独自被外部引用的内容。例如博客里面的一篇文章、一个文章摘要、一篇论坛帖子等等独立的内容。

所以，对于博客来说，我们要使用 article 来标记博客文章摘要列表。需要注意的是，article 元素通常要有自己的标题（通常为h1或h2），一般放在 header 标签里面。还应该有 aside （稍后说），来描述这篇文章摘要相关的信息（例如文章发布时间、文章作者、文章标签、分类目录等等）。当然还要有主体内容，尽可能的还要有 footer （稍后说），来表示底部相关信息。这些元素共同构成一个完整的 article 。

XHTML：

<div id=”entry”>
<h1>使用 HTML5 正确合理的重构你的网页</h1>
<div id=”entry-meta”>作者：潜行者m 时间：2012-9-27</div>
<div id=”entry-content”><p>这篇文章写了如何使用 HTML5 重构你的网页等等等等等等等等等</p></div>
</div>
HTML5 ：

<article>
<header>
<h1>使用 HTML5 正确合理的重构你的网页</h1>
</header>
<aside id=”entry-meta”>作者:潜行者m 时间:<time datetime=”2012-9-27″>2012-9-27</time></aside>
<div id=”entry-content”><p>这篇文章写了如何使用 HTML5 重构你的网页等等等等等等等等等</P></div>
</article>
使用 aside 标签描述文章或网站的相关信息

在文字摘要的周围，我们通常要使用一些信息来描述这篇文字，例如作者是谁，文字写于什么时间，文字的相关标签或者分类目录是什么。这些属于文章的附属信息。我们可以使用 aside 标签来标记他们。标记之后，表示属于这个 article 的相关描述信息。此外,aside 也用于边栏功能。

XHTML：

<div id=”sidebar”>这里是边栏</div>
HTML5：

<aside>这里是边栏</aside>
使用 time 标签来标记文章发布时间

标记文字的发布时间，可以让机器、搜索引擎等理解这篇文章是什么时间发表的。之前的话，可能要以抓取时间为发布时间或者从文章中抓取类似“本文发表于XX”的文字进行分析。

XHTML：

<div id=”meta”>本文写于 2012-9-27</div>
HTML5：

<aside>本文写于 <time datetime=”2012-9-27″>2012-9-27</time></aside>
<aside>本文写于 <time datetime=”2012-9-27″ pubdate=”pubdate”>2012-9-27</time></aside>
这个 time 标签还有一个 pubdate 属性需要特别注意一下，在上面，我给出了两种写法，第二中多了一个 pubdate 属性。增加这个属性，主要是为了标记正确发布时间，防止出现以下情况。

<h1>关于9月28日停电公告</h1>
<aside>发布日期:<time datetime=”2012-9-27″ pubdate=”pubdate”>2012年9月27日</time></aside>
用 pubdate 规定正确的发布时间，但是需要注意，在 W3C 标准中，并没有 pubdate 这个属性，这个属性是由 mozilla 他们自己规定的。所以添加 pubdate 属性之后，无法通过 W3C 的 HTML5 验证。

使用 nav 标签标记网站导航

nav 标签通常用于以下场合：网站导航条、侧边栏导航条、页内导航、前页后页翻页等。但是，普遍认为的是，一个页面上最好只用一个 nav 标签，用它来标记最重要的导航条（一般就是网站的导航条）。这样，可以让搜索引擎等快速定位，避免误导。通常配合 ul 或 ol 列表标签一块使用。

XHTML：

<div id=”nav”>
<ul>
<li>首页</li>
<li>推荐阅读</li>
<li>优惠码</li>
</ul>
</div>
HTML5：

<nav>
<ul>
<li>首页</li>
<li>推荐阅读</li>
<li>优惠码</li>
</ul>
</nav>
使用 footer 标签标记网站底部

网站底部通常用来说明网站信息的版权、网站所有者、备案等等信息。

XHTML：

section 的语义为“部分”，通常对网站或页面上的内容，进行分开。个人认为这是一个比较鸡肋的属性，本身它的功能和 div 标签类似，同时又和 article 标签的功能类似。本人之前在博客中写过一篇关于区分 section 和 article 元素的文章：article 元素与 section 元素区别详解。从那次写文章到现在的6个月的学习，我感觉 section 标签的用法越来越难以把握，所以如果你无法确定应该使用什么标签，请使用 div ，不要一味的乱用 section 。

HTML5 没有抛弃 div 标签

有人认为， HTML5 中新增的那么多语义性的标签，随便一个都比 div 更有语义性。那么我就不用 div 了，全部给成 HTML5 新增的标签。这是大错特错的。W3C 并没有规定 HTML5 废除了 div 标签。实际上 div 标签，仍然用于全局的布局。在你无法非常有把握使用什么 HTML5 标签的时候，请使用 div 标签！

HTML5 重构的一个比较好的例子

结构清晰合理的、使用 HTML5 重构过的网站有很多，这里只拿出几个比较好的比较典型的例子来分析。这里以“我爱水煮鱼” 博客作为例子（地址：http://blog.wpjam.com/）。你可以随时打开，然后右键“查看源代码”来观看详细的代码。此外，“潜行者m”博客也采用了比较规范的写法，也可以借鉴。

兼容早期的浏览器

早期的浏览器中，由于没有这些新增标签，所以无法解析网页中的样式。但是新增标签，实质上与 div 性质类似，所以就有人使用了一段 JavaScript 代码，创建与新增标签中名称相同的对象。这样，浏览器就可以将 CSS 和标签结合解析，看到实际效果。这段代码就是 HTML5 Shiv，更详细的使用说明，请看这里：使用 HTML5 Shiv 让 IE 支持 HTML5 。

由于 HTML5 比较新的技术，对此的介绍和教程还比较少，所以本文难免出现一些不准确的地方，请高手评论赐教！想学习 HTML5 的朋友，这里也推荐了一些学习书籍：HTML5 和 CSS3 书籍推荐。

Tags: HTML, HTML5, 前端开发

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。