緣於頁面結構語義化的考慮，我們應該慎用div和span這兩個通用元素，只有當划分頁面結構模塊時才使用div元素，因為模塊本身是沒有任何語義的，他僅代表一塊獨立的結構。如果想對段落內部分內聯元素或文本應用某種特殊樣式時，就可以使用span元素把他們獨立封裝在一個容器內。
div作為布局元素，它與表格一樣是可以嵌套的。因為瀏覽器對於任何元素的解析方式都是一樣的，一般從最里層開始，然后不斷向外解析。當嵌套層級很深時，將會使瀏覽器消耗更多的資源對嵌套關系進行解析，勢必會影響瀏覽器的速度。
對於一個上下三行的布局結構：
<div id="header"></div> <div id="main"></div> <div id="footer"></div>
為了實現頁面固定寬度和居中顯示效果，分別給三個div設置css樣式就有點麻煩了，我們可以給它嵌套一個div層：
<div id="wrap"> <div id="header"></div> <div id="main"></div> <div id="footer"></div> </div>
實際上這種增加一層div嵌套的方法，肯定會給瀏覽器的顯示帶來負擔，我們可以將body元素作為一個外套,這樣就能充分發揮body的作用，以免造成浪費。
<body id="wrap"> <div id="header"></div> <div id="main"></div> <div id="footer"></div> </body>
又比如：要給上述頂部頁眉部分加一個導航條：
<div id="wrap"> <div id="header"> <div id="logo"></div> <div id="banner"></div> <div id="nav"> <ul> <!--導航列表--> <li></li> <!--導航列表項--> <li></li> <!--導航列表項--> <li></li> <!--導航列表項--> </ul> </div> </div> </div>
上述代碼是最優化的么？當然不是，ul元素與div元素一樣都是塊狀元素，一個導航菜單外面嵌套兩層元素，勢必會產生代碼冗余，如果沒有被定義的特殊樣式，我們完全可以這樣寫：
<body id="wrap"> <div id="logo"></div> <div id="banner"></div> <div id="nav"> <ul> <!--導航列表--> <li></li> <!--導航列表項--> <li></li> <!--導航列表項--> <li></li> <!--導航列表項--> </ul> </div> </body>
這種情況就是最優的。但是，這樣做存在一定的風險，可能需要使用更多的css樣式來控制整個元素的顯示。如果多嵌套一層，對頁面布局會有更大的幫助，能節省大量不必要的css控制代碼，此時布局的功能重要性就遠大於結構的功能性。
總之，在我們大力提倡盡力減少div元素的多次嵌套時，是針對當前網頁設計中設計師亂套div元素的現狀而說的，但並不是談套色變，必要的嵌套是應該的，也是必須的！
補充：頁面語義化操作：
1、XHTML結構的語義性
2、構建語義化頁面操作
