在學習HTML5並將新技術新增到工具箱時，您可能會想要構建自己的HTML樣板，以開始所有以後的專案。我們鼓勵這樣做，本文可以幫助您構建自己的HTML模板。
在本文中，我們將研究如何入門。讓我們從一個簡單的HTML5頁面開始：
Doctype首先，我們有Document Type Declaration或doctype。這只是告訴瀏覽器（或任何其他解析器）正在檢視的文件型別的一種方式。對於HTML檔案，它表示HTML的特定版本和風格。doctype應該始終是任何HTML檔案頂部的第一項。許多年前，doctype宣告是一個醜陋且難以記憶的混亂。對於XHTML 1.0 Strict：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">對於HTML4 Transitional：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">儘管文件頂部的一長串文字並沒有真正傷害我們（除了迫使我們站點的檢視器下載一些額外的位元組），HTML5消除了那種難以理解的眼神。現在您需要的是：
<!doctype html>很簡單，而且很重要。可以使用大寫，小寫或大小寫混合的doctype。您會注意到宣告中明顯缺少“ 5”。儘管當前的Web標記迭代被稱為“ HTML5”，但它實際上僅是先前HTML標準的演進-將來的規範將僅僅是我們今天擁有的標準的發展。
由於通常要求瀏覽器支援Web上的所有現有內容，因此無需依賴doctype來告訴他們在給定文件中應支援哪些功能。換句話說，僅doctype不會使您的頁面相容HTML5。這完全取決於瀏覽器。實際上，您可以在頁面上使用具有新HTML5元素的這兩種舊文件型別之一，並且該頁面將呈現與使用新doctype時相同的外觀。
html元素任何HTML文件中的下一個html元素是HTML5，該元素都沒有發生太大變化。在我們的示例中，我們包含lang列值為的屬性，該屬性en指定文件為英語。在基於XHTML的語法中，需要包含一個xmlns屬性。在HTML5中，不再需要此lang屬性，甚至該屬性對於文件驗證或正常執行也是不必要的。
因此，這是到目前為止的內容，包括結束</html>標記：
<!doctype html><html lang="en"></html>頁面的下一部分是本<head>節。內的第一行head是定義文件字元編碼的行。自XHTML和HTML4以來，這是另一個已簡化的元素，是可選功能，但建議使用。過去，您可能是這樣寫的：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">HTML5透過將字元編碼<meta>標記減少到最低限度來對此進行改進：
<meta charset="utf-8">在幾乎所有情況下，utf-8都是您將在文件中使用的值。字元編碼的完整說明不在本文的討論範圍之內，您也可能不會那麼感興趣。儘管如此，如果您想更深入地研究，可以閱讀有關W3C或WHATWG的主題。
注意：為確保所有瀏覽器正確讀取字元編碼，必須在文件的前512個字元中的某些位置包含整個字元編碼宣告。它也應該出現在任何基於內容的元素之前（例如<title>在我們的示例站點中緊隨其後的元素）。
關於這個主題，我們可以寫很多東西，但是我們想讓您保持清醒-因此，我們將為您省去那些細節！現在，我們很樂意接受此簡化的宣告，然後繼續進行文件的下一部分：
此標記塊的關鍵部分是樣式表，該樣式表是使用常規link元素包含的。link除href和外，沒有其他必填屬性rel。該type屬性（在舊版HTML中是常見的）不是必需的，也不需要指示該樣式表的內容型別。
公平競爭引入HTML5時，它包含了許多新元素，例如article和section。您可能會認為這是較舊的瀏覽器對無法識別的元素的支援所面臨的主要問題，但是您會錯了。這是因為大多數瀏覽器實際上並不關心您使用什麼標籤。如果您有一個帶有recipe標籤（或ziggy標籤）的HTML文件，並且CSS在該元素上附加了一些樣式，則幾乎每個瀏覽器都將像完全正常一樣繼續執行，而無需抱怨即可應用樣式。
當然，這樣的假設性文件將無法驗證並且可能存在可訪問性問題，但是它幾乎可以在所有瀏覽器中正確呈現-Internet Explorer（IE）的舊版本除外。在版本9之前，IE阻止無法識別的元素接收樣式。這些神秘元素被渲染引擎視為“未知元素”，因此您無法更改它們的外觀或行為方式。這不僅包括我們想象的元素，還包括那些瀏覽器版本開發時尚未定義的任何元素。這意味著（您猜對了）新的HTML5元素。
好訊息是，最近幾天，IE的使用率已經下降，IE11的全球使用率已下降到約2.7％（截至2018年），而實際上之前的版本已下降。
但是，如果您確實需要支援古老的瀏覽器，則仍然可以使用可信賴的HTML5 Shiv，這是John Resig最初開發的非常簡單的JavaScript。受Sjoerd Visscher的想法啟發，它使新的HTML5元素可在IE的舊版本中進行樣式設定。不過，確實，現在不需要了。正如我可以使用所指出的那樣，所有現代瀏覽器甚至最新的舊版本都支援HTML5元素。（單擊“顯示全部”選項以檢視所有瀏覽器版本。）一個例外是某些瀏覽器無法識別較新的main元素。但是，對於這些瀏覽器，只要新增適當的樣式（例如將其設定為block元素），您仍然可以使用此元素。
剩下的就是歷史檢視開始模板的其餘部分，我們具有常用body元素以及其結束標記和結束html標記。我們還在script元素內引用了JavaScript檔案。
<script src="js/scripts.js" type="text/javascript"> </script>因為從實際上所有角度來看，JavaScript是Web上唯一使用的真正指令碼語言，並且由於所有瀏覽器都假定您正在使用JavaScript，即使您沒有明確宣告這一事實，因此type在HTML5文件中該屬性也是不必要的：
<script src="js/scripts.js"> </script>我們已將script元素放在頁面底部，以符合嵌入JavaScript的最佳做法。這與頁面載入速度有關。當瀏覽器遇到指令碼時，它將在解析指令碼時暫停下載並呈現頁面的其餘部分。如果在頁面頂部任何內容之前都包含大型指令碼，這將導致頁面載入速度大大降低。這就是為什麼大多數指令碼應放在頁面的最底部，以便僅在頁面其餘部分載入後才進行解析的原因。
但是，在某些情況下（例如，使用HTML5 shiv），指令碼可能需要放置在文件的開頭，因為您希望指令碼在瀏覽器開始呈現頁面之前生效。
下一步您還可以透過互動性和程式化反應式UI將網站或Web應用程式開發提升到一個新的水平。例如，檢視有關JavaScript和React的廣泛資源。並使用最佳Web工具和庫的指南，找出如何更快地啟動新專案。另外，如果您想在不學習編碼的情況下建立網站體驗，請閱聯絡浪知潮。最新的無程式碼工具浪潮改變了局面，第一次它們的功能強大到足以在許多情況下替代編碼。