在這篇文章開篇，我先糾正一下我之前寫的一篇入門文章的錯誤，還是先引用一下比較官方的說法吧，避免再次誤導各位新手
“
<!DOCTYPE> 聲明必須位於 HTML5 文檔中的第一行，也就是位於 <html> 標籤之前。該標籤告知瀏覽器文檔所使用的 HTML 規範。
doctype 聲明不屬於 HTML 標籤；tag; 它是一條指令，告訴瀏覽器編寫頁面所用的標記的版本。
在所有 HTML 文檔中規定 doctype 是非常重要的，這樣瀏覽器就能瞭解預期的文檔類型。
HTML 4.01 中的 doctype 需要對 DTD 進行引用，因爲 HTML 4.01 基於 SGML。而 HTML 5 不基於 SGML，因此不需要對 DTD 進行引用，但是需要 doctype 來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行。）。
”
在 HTML 4.01 中有 3 個不同的文檔類型，在 HTML 5 中只有一個：
<!DOCTYPE HTML>
因爲HTML5 這個聲明文檔類型的標籤是向下兼容的，所以即使你的html基本不使用HTML5的標籤 ，你也可以使用這個聲明方式，但是頁面中會有某些不兼容的地方，這個就需要你根據實際情況來修正了。<!doctype html>可以讓瀏覽器在嚴格模式（標準模式）下渲染頁面，而不需要指定某個類型dtd。
再進入今天的主體：table和div 的合理應用
Table在早期的頁面設計中應用廣泛，但是隨着互聯網的發展table漸漸被拋棄，現在互聯網上只有一小部分老站（有名氣，不必要改的那種有很多），還是沿用着table來佈局頁面，現在的新站基本上都是使用了div+css來佈局頁面，但是很多web前端初入門的朋友就會產生一種錯覺，認爲table會是頁面對搜索引擎不友好的元兇，所以在設計列表的時候總是會去使用dt ，ul 之類的標籤。這樣有的使用會讓你多花很多設計頁面樣式的時間，而真正對搜索引擎優化的效果很微弱。
大量使用table的一個非常大的弊端除了對搜索引擎不友好，還有就是對程序員也非常的不友好，table的大量嵌套，會讓人看的很暈。但是如果配合着div使用的話就會提供效果，達到的效果或許比dt，ul來的更加好。
還有一個問題就是大量的table tr td 會讓你頁面的語義非常的差，這裏先不討論標籤語義化，大家自己去百度搜一下，語義良好的頁面，搜索引擎是非常的喜好的，這裏我先介紹一個語義化很好的網站 http://www.w3school.com.cn/ 大家也可以自己動手操作，用谷歌瀏覽器去掉它的css鏈接，然後再看它的頁面佈局，你會發現，它的所有的標題，列表，都井然有序，就像是寫論文的時候非常正規的排版一樣，即使不要樣式表，相信大家也不會產生非常大的厭惡感，但是有些網站就不一樣了，去掉css樣式文件之後，頁面直接就癱了，這裏再發個站www.webgamei.com 去掉它的css樣式文件 （2個） 再看頁面，因爲它的樣式很多都是直接寫進table中的style中，所以你看起來沒有很大的變化，但是你看導航部分，會發現，頁面毫無語義感，若是頁面的樣式分離開了，那去掉css文件，估計沒法看了。
所以這裏建議，在你的頁面設計出來之後，你可以先不去加css樣式，直接先把默認樣式的版面寫出來，在根據頁面去加css自定義樣式，這樣會不會更高效點呢 ，呵呵 ，我沒試過，只是這麼想而以。
關於語義的內容很多，這裏我也不說太多了，介紹大家一本書 《編寫高質量代碼--Web前端開發修煉之道》很不錯的一本書，裏面對語義化介紹的很清楚。頁面佈局是一個經驗積累的過程，看到好的網站，它的頁面佈局，你都可以借鑑一下，看到不好的，你也可以想一下該怎麼去優化它，這樣才能在web前端之路上成長更快。