使用 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:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

HTML5 :


<meta charset="UTF-8" /> 

从这两个,或许你就已经感受到了 HTML5 的魅力, HTML5 写起来非常简洁高效,让人爱不释手。

网页相关资源的引入

使用 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:


<div id="footer">© Copyright 2012 我爱水煮鱼 保留所有权利 </div>

HTML5:

<footer>© Copyright 2012 我爱水煮鱼 保留所有权利 </footer>

不要乱用 section 标签

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”博客也采用了比较规范的写法,也可以借鉴。

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

兼容早期的浏览器

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

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

标签:

热门文章