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

<div id="news">
?? <div class="section">
????? <div class="article">
???????? <div class="header">
??????????? <h1>Div Soup Demonstration</h1>
??????????? <p>Posted on July 11th, 2009</p>
???????? </div>
???????? <div class="content">
??????????? <p>Lorem ipsum text blah blah blah.</p>
??????????? <p>Lorem ipsum text blah blah blah.</p>
??????????? <p>Lorem ipsum text blah blah blah.</p>
???????? </div>
???????? <div class="footer">
??????????? <p>Tags: HMTL, code, demo</p>
???????? </div>
????? </div>
????? <div class="aside">
???????? <div class="header">
??????????? <h1>Tangential Information</h1>
???????? </div>
???????? <div class="content">
??????????? <p>Lorem ipsum text blah blah blah.</p>
??????????? <p>Lorem ipsum text blah blah blah.</p>
??????????? <p>Lorem ipsum text blah blah blah.</p>
???????? </div>
???????? <div class="footer">
??????????? <p>Tags: HMTL, code, demo</p>
???????? </div>
????? </div>
?? </div>
</div>
　　尽管这有些勉强，但上面这个实例还是可以说明使用HTML4对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不过值得激动的是，HTML5解决“<div>-soup” 综合症并带给我们一套新的结构化元素。这些新的HTML5元素富有更细致的语义从而代替了那些毫无语义的<div>标签，并同时为CSS的调用提供了”自然”的CSS钩子。下面是HTML5的解决方案实例:

<section>
?? <section>
????? <article>
???????? <header>
??????????? <h1>Div Soup Demonstration</h1>
??????????? <p>Posted on July 11th, 2009</p>
???????? </header>
???????? <section>
??????????? <p>Lorem ipsum text blah blah blah.</p>
??????????? <p>Lorem ipsum text blah blah blah.</p>
??????????? <p>Lorem ipsum text blah blah blah.</p>
???????? </section>
???????? <footer>
??????????? <p>Tags: HMTL, code, demo</p>
???????? </footer>
????? </article>
????? <aside>
???????? <header>
??????????? <h1>Tangential Information</h1>
???????? </header>
???????? <section>
??????????? <p>Lorem ipsum text blah blah blah.</p>
??????????? <p>Lorem ipsum text blah blah blah.</p>
??????????? <p>Lorem ipsum text blah blah blah.</p>
???????? </section>
???????? <footer>
??????????? <p>Tags: HMTL, code, demo</p>
???????? </footer>
????? </aside>
?? </section>
</section>
　　正如我们所见，HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的<div>标签。这种语义化的特性不仅提升了我们网页的质量和语义，并且大量减少了曾经代码中用于CSS必须调用的class和id属性。事实上，CSS3也是可以然通过我们忽略掉所有class和id的。
跟class属性说再见，欢迎整洁的标签
　　结合了富有新的语义化标记的HTML5，CSS3为web设计师们的网页提供了神一般的力量。有了HTML5的能量，我们将得到更多的对文档代码的控制权，有了CSS3的能量，我们的控制权将趋于无穷大！
　　即使没有那些高级的CSS选择器，我们仍然可以通过强大的HTML5条调用不同的容器而不劳驾class和id这类属性。像以往的DIV布局，我们在css中可能要这样调用:
div#news??? {}
div.section {}
div.article {}
div.header? {}
div.content {}
div.footer? {}
div.aside?? {}
我们再来看看基于HTML5的实例:
section {}
article {}
header? {}
footer? {}
aside?? {}
　　这是个进步，但仍有一些问题需要解决。在<div>实例中，我们需要通过class或id属性来调用页面中的元素。这种逻辑将允许我们将样式应用到文档中的任何一个元素上，无论是整体还是个体。例如在<div>实例中，.section 和 .content元素很容易定位。但是在HTML5实例中，实际文档中会有很多个section元素。其实我们可以添加一些特定的属性选择器来调用那些不同的section元素，不过谢天谢地，我没现在可以用少量的高级CSS选择器来定位不同的section元素。
不使用class和id定位HTML-5元素
　　下面让我们来看看如何在不使用class和id的情况下定位HTML5页面元素的一个实例，我们可以使用三种CSS选择器来定位和辨别实例中的元素。如下:
后代选择器:[CSS 2.1]: E F
兄弟选择器:[CSS 2.1]: E + F
子元素选择器:[CSS 2.1]: E > F
下