本節書摘來自異步社群《html5與css3實戰指南》一書中的第2章，第2.2節,作者： 【美】estelle weyl , louis lazaris , alexis goldstein 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
在您學習html5和新技術時，您可能想建立自己的藍圖或示例檔案，并通過它們來建構基于html5的項目。實際上，您可能對已存在的xhtml或html4.0項目已經做了類似的事情。我們鼓勵您這樣做，當然您也可以考慮使用一些線上資源，進而為您提供一個html5的基本起點1。
在這個項目中，我們将從頭開始，編寫自己的代碼，并對每一部分進行詳細講解。當然，即使是最好、最龐大的示例網站也不可能包含所有的新元素和技術。我們也會詳細講解一些未在我們所建立的示例網站中應用的新功能。這樣，在您決定如何建立html5和css3網站和web應用程式時，就會熟悉所提供的各種選項，也就可以将本書當作許多技術的快速參考資料了。
讓我們從一個簡單的html5網頁的基本架構開始：
仔細看一下上面的标記。如果您正在從xhtml或html4過渡到html5，您會立即注意到html5在許多方面是不同的。
**
2.2.1 doctype**
首先，我們進行文檔類型聲明（document type declaration，也稱為doctype）。它可以用來告訴浏覽器（或任何其他分析程式）它們所檢視的檔案類型。在html檔案中，它表示具體的html版本及風格。doctype應是位于html檔案最頂端的第一個項目。過去，doctype聲明非常難看且很難記，對于xhtml 1.0嚴格類型來說，doctype聲明如下所示。
對于html4過渡類型來說，doctype聲明如下所示。
https://yqfile.alicdn.com/17b937f462c153707ead4de3714fcf25cc904ba2.png" >
經過幾年的發展，代碼編輯軟體開始提供包含doctype的html模闆，或提供自動插入模闆的方式。當然，快速的網頁搜尋會很輕松地調出代碼以插入您需要的文檔類型。
盡管在文檔頂端的一長串文本并沒有對我們造成太大的影響（沒有迫使我們的網站浏覽者下載下傳其他的位元組），html5清理了這個難以辨認的眼中釘。現在，我們所需要的隻是下面這一行代碼。
既簡單又明了。請您注意，“5”已經在聲明裡消失了。盡管目前網站标記的版本是“html5”，但這确實僅是之前的html标準的更新—以後的規範還會在今天的基礎上進一步發展。由于浏覽器要支援網站的所有内容，是以這裡沒有一個固定的文檔類型去告訴浏覽器應支援文檔中的哪種功能。
2.2.2 html元素
任何html檔案中所包含的内容都是html元素，該元素在html5中并沒有顯著的變化。在我們的示例中，包含了值為“en”的lang屬性，表示文檔的語言是英語。在基于xhtml的文法中，要求包含xmlns屬性。在html5中，已經沒有這項要求。即使是lang屬性，對于文檔的驗證或正确運作都不是必不可少的。
我們目前所擁有的标記如下所示，其中包括結束</html>标記：
2.2.3 head元素
頁面的下一部分是<head>部分。head中的第一行用來定義文檔的字元編碼。這是另一個被簡化的元素。它的用法如下所示。
html5通過将字元編碼<meta>标簽的内容縮減到最少，進而使之得到改進。代碼如下所示。
在幾乎所有的情況下，utf-8将是您在文檔中使用的值。本章篇幅有限，這裡将不能完整地介紹字元編碼，或許您對此也并不感興趣。當然，如果您想進一步研究，可以通路w3c網站2查閱相關主題。
預先準備 為確定所有浏覽器能夠正确讀取字元編碼，整個字元編碼聲明必須包含在文檔的前512個字元中。必須将它放在所有基于内容的元素前面（比如，
元素，我們将在示例網站中示範）。
關于這個主題，我們可以寫很多。但是，為了使你們節省精力，我們省去了一些細節。現在，我們可以滿意地接受這個簡化的聲明，并繼續我們文檔的下一部分。
在這幾行中，html5與以前版本的文法幾乎沒有什麼不同。頁面标題的聲明和以前一樣，<meta>标簽僅是一個可選的示例，用來表示可放置的位置，您可以按照自己的意願，在此放置任意多個meta元素。
此标記塊的主要部分是樣式表，我們使用習慣的link元素來包含它。初看起來，您可能沒有發現任何差別。但是按照慣例，link元素包含一個type屬性，其值為text/css。有趣的是，在xhtml或html4中不需要該屬性，即使是在使用嚴格的文檔類型時也是如此。因為所有的浏覽器都可以識别連結樣式表的内容類型，而無須其他的屬性，是以，基于html5的文法鼓勵您完全放棄使用type屬性。
2.2.4 公平競争
接下來，在介紹标記中的新元素之前，我們需要先了解一些背景知識。
html5包括一些新元素，比如，我們将稍後介紹的article和section元素。您可能認為是舊版浏覽器的主要問題，但這是錯誤的想法。這是因為大多數浏覽器實際上并不在乎您使用什麼标簽。如果您的html文檔有<recipe>标簽（或甚至使用<ziggy>标簽），或者css将一些樣式附加到該元素上，幾乎所有浏覽器都會正常運作，并應用該樣式。
當然，這個假設的文檔不會生效，但在大多數浏覽器（internet explorer是一個例外）上可正确呈現。在internet explorer 9之前，internet explorer禁止接收無法識别的元素。呈現引擎視這些秘密元素為“未知元素”，是以您不能改變其外觀及行為方式。這不僅包括我們所設想的元素，還包括那些在所開發的浏覽器中未定義的元素。當然也包括html5的新元素。
編寫本書時，internet explorer 9剛剛釋出（被廣泛使用還會需要一段時間），是以這是一個問題。我們想開始使用這些光鮮的新标簽，但是如果不能将這些css規則附加到這些元素上，那麼我們的設計就會崩潰。
幸運的是，這裡有一個解決方案：一個非常簡單的javascript，最初由john resig開發，可以神奇地使html5的新元素在internet explorer的早期版本中顯示。
我們已經在條件注釋的标簽<script>中包含了所謂的“html5 shiv”3。條件注釋是microsoft在internet explorer中實施的一個專用功能。它們向您提供用腳本或樣式确定特定浏覽器版本的能力4。這種條件注釋告訴浏覽器：封裝的标記僅供使用者使用internet explorer 9之前的版本檢視網頁。
請注意，如果您用javascript庫處理html5的新功能或新api，可能已經使html5的腳本可以運作。在本例中，您可以删除關于remy sharp的腳本。其中的一個示例是modernizr5，這是一個javascript庫，它能檢測現代html和css的新功能，将在附錄a介紹它。modernizr包括能夠使html5在internet explorer早期版本中顯示的代碼，是以remy腳本就顯得多餘了。
使用internet explorer 6～internet explorer 8但禁用了javascript的使用者該怎麼辦呢？
當然，仍有一些使用者（禁用了javascript的使用者）不能夠使用remy的html5 shiv，可能有這個或那個原因。作為網站設計人員，即使使用者不能使用javascript，我們也必須使所有使用者都能夠浏覽我們建立的網站内容。當45%～75%的使用者使用internet explorer時，這似乎是一個嚴重的問題。
但是事實并沒有那麼糟糕。許多研究表明，不能使用javascript的使用者非常少，可以忽略不計。
2010年10月在雅虎網站釋出的一項研究 6表明，全世界不能使用javascript的使用者大約隻有1%。而另一個對數十億使用者的研究 7也得到了幾乎相同的結果。在這兩項研究中，相對于世界其他地方，美國使用者不能夠使用javascript的人數最多。
還有其他一些使用html5新元素的方式，不需要javascript在不受支援的浏覽器中顯示設定了樣式的元素。不幸的是，那些方法很不現實，有許多其他缺陷。
如果您仍然十分關心這些使用者，可以考慮這種混合方法。例如，在缺少樣式的地方使用新html5元素不會有大問題，同時對于主要的布局容器，可使用div等傳統的元素。
2.2.5 剩餘部分是曆史簡介
讓我們看看啟動模闆的剩餘部分，我們通常使用body元素以及其結束标記和</html>的結束标記。我們還在script元素中包含javascript檔案的引用。
與我們前面讨論過的link元素非常相像，<script>标簽并不要求您聲明type屬性。在xhtml中驗證包含外部腳本的網頁，<script>标簽應如下所示：
出于實用性目的，javascript僅是一種在web上使用的腳本語言，并且即使您不明确聲明，所有的浏覽器也都會假設您使用的是javascript，是以type屬性無需在html5文檔中聲明：
https://yqfile.alicdn.com/a799d2876cdb1aeb167ebf2bfdb803665e27e97e.png" >
我們将script元素放在頁面底部，以使其符合嵌入javascript的最佳做法。我們還需處理頁面的載入速度。當浏覽器碰到腳本時，它會将腳本分解成若幹部分，此時将暫停載入和呈現頁面的其餘部分。如果在頁面頂部以及所有内容之前放置大量腳本，這将導緻頁面載入十分緩慢。這就是為什麼将大部分腳本放在頁面最底部的原因，這樣可以在頁面載入完成以後，再對腳本進行分解。
在一些情況（比如html shiv）下，由于您想在浏覽器開始呈現頁面之前呈現效果，可根據需要，将腳本放在文檔的head中。2