CSS教程:语义化标记抛弃DIV标记

【 tulaoshi.com - css 】

      曾经，设计师们经常会跟频繁使用基于table的没有任何语义的布局。不过最终还是要感谢像Jeffrey Zeldman和Eric Meyer这样的思想革新者，聪明的设计师们慢慢的接受了相对更语义化的div布局替代了table布局，并且开始调用外部样式表。但不幸的是，复杂的网页设计需要大量不同的标签结构代码，我们把它叫做div-soup 综合症。也许你很熟悉下面的代码:

 div id="news"
   div class="section"
      div class="article"
         div class="header"
            h1Div Soup Demonstration/h1
            pPosted on July 11th, 2009/p
         /div
         div class="content"
            pLorem ipsum text blah blah blah./p
            pLorem ipsum text blah blah blah./p
            pLorem ipsum text blah blah blah./p
         /div
         div class="footer"
            pTags: HMTL, code, demo/p
         /div
      /div
      div class="aside"
         div class="header"
            h1Tangential Information/h1
         /div
         div class="content"
            pLorem ipsum text blah blah blah./p
            pLorem ipsum text blah blah blah./p
            pLorem ipsum text blah blah blah./p
         /div
         div class="footer"
            pTags: HMTL, code, demo/p
         /div
      /div
   /div
/div

　　尽管这有些勉强，但上面这个实例还是可以说明使用HTML4对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不过值得激动的是，HTML5解决div-soup 综合症并带给我们一套新的结构化元素。这些新的HTML5元素富有更细致的语义从而代替了那些毫无语义的div标签，并同时为CSS的调用提供了自然的CSS钩子。下面是HTML5的解决方案实例:

 section
   section
      article
         header
            h1Div Soup Demonstration/h1
            pPosted on July 11th, 2009/p
         /header
         section
            pLorem ipsum text blah blah blah./p
            pLorem ipsum text blah blah blah./p
            pLorem ipsum text blah blah blah./p
         /section
         footer
            pTags: HMTL, code, demo/p
         /footer
      /article
      aside
         header
            h1Tangential Information/h1
         /header
         section
            pLorem ipsum text blah blah blah./p
            pLorem ipsum text blah blah blah./p
            pLorem ipsum text blah blah blah./p
         /section
         footer
            pTags: HMTL, code, demo/p
         /footer
      /aside
   /section
/section

　　正如我们所见，HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的div标签。这种语义化的特性不仅提升了我们网页的质量和语义，并且大量减少了曾经代码中用于CSS必须调用的class和id属性。事实上，CSS3也是可以然通过我们忽略掉所有class和id的。