3.5.7 通用容器div
前面讲到的header、nav、article、section、aside和footer元素，选择使用它们都应该是基于语义结构的考虑，而与样式和布局无关。比如有一个区块，这个区块的内容并不是一组具有相似主题的内容，但是希望这个区块具有某种样式（比如背景颜色、边框等），于是对这个区块使用article或者section元素；再比如有两个区块，希望能在布局上设置为左、右并排放置，于是对其中一个使用section元素，对另一个使用aside元素，以上这几种做法都是不对的。
有时需要在一段内容外围包一个容器，从而可以为其应用CSS样式或JavaScript效果，而这段内容从语义上来看使用article、section、aside或者nav元素都不合适，这时就需要一个通用容器，即一个完全没有语义含义的容器。这个容器就是div元素。有了div元素，就可以为其添加样式。
图3-25所示的招商银行网站主页是非常常见的网页结构，上方有页眉，下方有页脚，中间的部分是左、右两栏布局，在大多数情况下，每一栏都有不止一个区块的内容，主要内容区可能有多个article元素或者section元素，侧边栏中也有多个aside元素，并且页面所有内容都集中在水平居中的位置，两侧留空显示了页面的背景图片。
要实现这样的结构与样式，可以将希望出现在同一栏中的内容包在一个div元素里，然后对这个div元素添加相应的样式。
代码结构如下：
图3-25 招商银行网站主页
从上面的代码可以看到，有一个id为wrapper的div元素包裹着所有的内容，页面的语义没有发生改变，但现在有了一个可以用CSS添加样式的通用容器。在header和footer元素之间是页面的主要内容，分成了左、右两个栏目，左边的第一栏由id为content的div元素包裹起来，右侧的第二栏由id为sidebar的div元素包裹起来。
图3-26显示了上面的代码如何在概念上对应到使用CSS的布局中。div元素自身没有任何默认样式，但是可以使用CSS对具有不同id的div元素设置不同的样式及布局方式，这部分内容将在第5章及第9章介绍。
图3-26 使用div元素的页面结构