曾經，設計師們經常會跟頻繁運用基於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的。
CSS 語義化標記拋棄DIV標記
曾經，設計師們經常會跟頻繁使用基於table的沒有任何語義的布局。不過最終還是要感謝像jeffrey zeldman和eric meyer這樣的思想革新者，聰明的設計師們慢慢的接受了相對更語義化的布局替代了table布局，並且開始呼叫外部樣式表。但不幸的是，複雜的網頁設計需要大量不同的標籤結構 我們...
html5語義化標籤
1.文章標題 文章內容.文章內容.2.定義文件中的節 區段，比如章節 頁首或文章中的其他部分。比如我們對一篇文章進行分章節。文章標題 章節一的標題 文章內容.章節二的標題 文章內容.應包含一組內容及其標題。如果內容沒有標題，不推薦使用。3.定義頁面的導航區域。頁面a頁面b 頁面c4.定義頁面主區域內...
HTML5語義化標籤
語義化標籤 h5的語義化標籤 css的方式進行布局 標籤有自己的含義，瀏覽器或者程式設計師一看就知 瀏覽器支援情況 ie9 firefox chrome safari oprea 針對ie9以下相容性問題 1 在 該標籤的css樣式中設定 display block 通過dom的方式建立這個標籤 d...