1.5.2　比较HTML4与HTML5文档结构

下面通过示例具体说明HTML 5是如何使用全新的结构化标签编织网页的。

【示例1】本例设计将页面分成上、中、下三部分：上面显示网站标题；中间分两部分，左侧为辅助栏，右侧显示网页正文内容；下面显示版权信息，如图1.5所示。使用HTML4构建文档基本结构如下。

    <div id="header">[标题栏]</div>
    <div id="aside">[侧边栏]</div>
    <div id="article">[正文内容]</div>
    <div id="footer">[页脚栏]</div>

图1.5　简单的网页布局

尽管上述代码不存在任何语法错误，也可以在HTML5中很好地解析，但该页面结构对于浏览器来说不具有区分度。对于不同的用户来说，ID命名可能因人而异；但对浏览器来说，就无法辨别每个div元素在页面中的作用，必然影响其对页面的语义解析。

【示例2】下面使用HTML5新增元素重新构建页面结构，明确定义每部分在页面中的作用。

    <header>[标题栏]</header>
    <aside>[侧边栏]</aside>
    <article>[正文内容]</article>
    <footer>[页脚栏]</footer>

虽然示例1和示例2的两段代码不一样，但比较这两段代码可以发现，使用HTML5新增元素创建的页面代码更简洁、明晰。通过比较可以很容易地看出，HTML4使用<div id="header">、<div id="aside">、<div id="article">和<div id="footer">标记元素没有任何语义，浏览器不能根据标记的ID名称推断它的作用，因为ID名称是随意变化的。而HTML5新增元素header，明确地告诉浏览器此处是页头，aside元素用于构建页面辅助栏目，article元素用于构建页面正文内容，footer元素定义页脚注释内容，这样极大地提高了开发者的便利性和浏览器的解析效率。