曾經，設計師們經常會跟頻繁使用基於table的沒有任何語義的布局。不過最終還是要感謝像Jeffrey Zeldman和Eric Meyer這樣的思想革新者，聰明的設計師們慢慢的接受了相對更語義化的<div>布局替代了table布局，並且開始調用外部樣式表。但不幸的是，復雜的網頁設計需要大量不同的標簽結構代碼，我們把它叫做“<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 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的解決方案實例:
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>
<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的。