武林網(www.survivalescaperooms.com)文章簡介：復雜的網頁設計需要大量不同的標簽結構代碼，我們把它叫做“div-soup” 綜合癥。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

>
   >
      >
         >
            >
         >
            >
            >
         >
            >
      >
         >
            >
         >
            >
            >
         >
            >
      >
</div>

　　盡管這有些勉強，但上面這個實例還是可以說明使用HTML4對一個復雜的設計進行代碼化后依然過于臃腫(其實xHTML1.1也不過如此)。不過值得激動的是，HTML5解決“<div>-soup” 綜合癥并帶給我們一套新的結構化元素。這些新的HTML5元素富有更細致的語義從而代替了那些毫無語義的<div>標簽，并同時為CSS的調用提供了”自然”的CSS鉤子。下面是HTML5的解決方案實例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

>
         >
            >
         >
            >
         </section>
         <footer>
            <p>Tags: HMTL, code, demo</p>
         </footer>
      </aside>
   </section>
</section>

　　正如我們所見，HTML5可以讓我們用很多更語義化的結構化代碼標簽代替那些大量的無意義的<div>標簽。這種語義化的特性不僅提升了我們網頁的質量和語義，并且大量減少了曾經代碼中用于CSS必須調用的class和id屬性。事實上，CSS3也是可以然通過我們忽略掉所有class和id的。