Question

在创建可以通过W3C标准验证的页面时，HTML5强调简化标签，仅链接那些我们必须的CSS、JavaScript和图片文件。智能手机用户只能使用有限的带宽访问我们的页面，而响应式设计的一个主要目标就是，网站不仅要对用户有限的视口做出响应，还要以最快的时间加载网页。虽然移除冗余的标签元素只能节省一点字节，但积少成多！

较之上一个版本的HTML（HTML 4.0.1），HTML5进行了极大的改进，提供了许多新特性。前端开发工程师可能主要对HTML5的新语义元素感兴趣，这些新元素给搜索引擎提供了含义更加丰富的代码。HTML5也可以在表单提交等基本网页交互场景中对用户做出反馈，一般不再需要复杂的JavaScript表单处理流程。同样，这为我们的响应式设计来带来的好处就是，允许我们创建更加简洁和快速的代码。

1.6.1　省时省力

HTML文档的第一行都是使用Doctype（文档类型声明）开头。老实说，这段代码一般都是由代码编辑器自动生成或者是从模板文件中粘贴过来的（没人会真的手工敲出完整的HTML 4.01文档类型声明吧？）。标准的HTML 4.01网页的文档类型声明如下所示：

如今在HTML5中，则化繁为简：

如前所述，我写页面的时候从来不会手工敲出文档类型声明，我猜你也不会。——那你嚷嚷半天有什么实际意义？ 不要着急，还得往页面中链接JavaScript或CSS文件呢。在HTML 4.01中，链接一个脚本文件的正确方法如下：

HTML5中变得更简单：

如你所见，type属性不再是必需的。链接CSS文件与此类似。HTML5也接受非常松散的语法。如，<sCRipt SrC＝js/jquery-1.6.2.js></script>和之前所举例子一样有效，尽管我们省略了脚本源文件地址两边的引号，而且标签和属性名大小写字母混用，但HTML5并不介意，这样的代码照样能够通过W3C的HTML5验证工具（http://validator.w3.org/）的验证。如果你在写代码时容易丢三落四，这或许是个好消息。如果你想从代码中剔除每一个可能多余的字符，这点尤其有用。在代码编写方面还有很多细节可以让我们的工作更加轻松从容，但我猜你一定期待HTML5更多的精彩内容。那就让我们来快速浏览一下HTML5新增的语义元素。

1.6.2　新增了语义化标签元素

制作标准的HTML页面时，头部和导航一般都是标配，如下所示：

看看我们用HTML5如何实现：

怎么样？对于表示每个结构化元素的毫无个性的<div>标签（虽然为应用样式加了class名），HTML5为我们提供了一些有语义的元素。页面中的一些通用结构体如头部和导航（后面还会看到更多）有了独立的标签。使用<nav>标签会使我们的代码变得更有语义，如同告诉浏览器，“嘿，这块内容就是导航”。这对我们来说是件好事，但更重要的是对搜索引擎来也是件好事。搜素引擎能比以前更好地理解我们的网页，并相应地评定网页内容。

在编写HTML页面时，我经常提醒自己，这些页面在最终发布到互联网上之前，将按流程交给负责后台开发的同事（你懂的，就是那些使用PHP、Ruby、.NET、ColdFusion等等语言的帅哥们）。为了和后台开发人员保持良好的协作关系，我通常都会给代码中的</div>结束标签添加注释，以确保其他人（也包括我自己）能够轻松地确定<div>元素在哪里结束。HTML5可以让我们省去大部分这样的工作。查看HTML5代码时，假如看到一个</header>结束标签，你会立即明白哪个标签结束了，不用注释。

以上我们只窥见了HTML5语义增强的一斑。先别激动，我们还要认识一位朋友。如果没有它，就没有网页设计的新时代，它就是CSS3。