HTML5/CSS3系列教程：HTML5 区域(Sectioning)的重要性

　　不管你以前在web页面布局中如何称呼它们 - “区域”还是“块”，我们一直都在布局中将页面分成可视的不同区域。但真正的问题在于我们并没有使用任何正确的工具来实现。一般情况下我们使用典型的网格来划分页头，页面主题，页尾等等区域来实现所谓的页面布局。

　　在过去的很多年以来，我们都使用DIV来帮助我们划分页面区域，而为此我们定义了很多class来帮助我们有效定义页面上的每一个层次，最新的HTML5最终帮助我们解决了这个问题 - 使用section 元素， 很多人都非常喜欢这个新的HTML成员，因为i终于在HTML标准中给予了我们准确的开发建议，Section增强了整个DOM的可读性，在这篇文章中我 们将介绍这些新的元素，帮助我们了解能够解决什么问题，提供了什么重要的功能并且对于“语义化Web”做出了什么样的贡献!

　　相关阅读：HTML5/CSS3系列教程：HTML5基本标签使用header，nav和footer

　　开发网站

　　可能大家还记得使用dreamweaver来开发网站的日子，我们通过拖拽来生成一个典型的页面，如下：

　　

　　使用dreamweaver只是为了快速的生成图形界面而非真正意义上的信息语义清晰，当然很多人都使用dreamweaver，包括我自己。典型的傻瓜式开发的产物。

　　web标准

　　当 我们开始熟悉了web标准以及正确开发的相关最佳实践之后，我们需要做的事情仍旧是视觉设计，典型的“CSS布局”，尽量不使用语义错误的table来设 计页面布局。使用基于div的布局作为web设计其实已经很多年了，不过使用div布局导致document结构的混乱和层次的难于维护是显而易见的。而 且最恶心的hack问题也一直困扰我们!

　　Div标签的问题

　　每天都会有成千上的开发人员使用div来分隔，格式化页面内容。我们使用div来分隔不同的内容区域，以保证内容的互相独立。但是事实上div并非用来实现这样的功能的。看看如下这个例子：

　　

　　在 这个简单的局部中，包含了一个文字主题和一个边栏内容。为了让它对于读者绝对清晰，我们将sidebar分离于主体。这里我们使用一个粗边框来封装这个边 栏内容。也许你会说，边栏的标题应该是《h3》，这个我们稍后做解释。所有的定义使用了一个典型的CSS，如果你把CSS去除，你将看到如下 展示：

　　

　　如果我去除了CSS，你看到页面布局变成了响应式风格，这其实就是HTML4 document如何在浏览器中实际被生成的样式。这里我们看到边栏区域其实是document中的另外一段信息。

　　为什么会这样呢?

　　主 要的原因在于《div》是一个流动内容的元素。不管边框或者背景是什么样式，它和主题document并不分离，相反，作为其中的一个部分生 成。当我们移除CSS可以看到，边栏的“Resource”标题并非是一个独立的组件，而是document的一个部分。作为页面的阅读者来说，这一点大 家应该看到。

　　为了更好的说明，我们看看如下代码片段：

　　

Heading

Some content...

Another heading

Some other content...