HTML 文件的組成
基本上，HTML 文件是由標籤 (tag) 和內容交織而成的文字文件。
許多 HTML 標籤是成對的，像 <p>這是一段文字</p> (表示段落)，但也有一些 HTML 標籤是單獨存在的，像 <img src="images/pic.png"> (表示嵌入圖片)。由此可知，HTML 標籤是一種將內容 (content) 和版面 (layout) 混合在一起的文件形式。我們學習 HTML 就是在熟悉這些標籤怎麼使用。
原本 HTML 呈現出來的樣式很樸素，許多網站漂亮的頁面是藉由調整 CSS 而成。現在不會有網站只用 HTML 來寫網頁，都會搭配一些 CSS 樣式表來美化網頁。
由於 HTML 本身是用來呈現靜態頁面的標籤，沒有程式邏輯的部分，會比真正的程式語言來得簡單得多。HTML 頁面的程式邏輯就是用 JavaScript 來撰寫；要注意 JavaScript 是後來才加到瀏覽器中的技術，原本設計 HTML 時沒有包含程式邏輯的部分。
以下是一個 HTML 版的 Hello World 文件：
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Site</title>
</head>
<body>
<h1>Welcome to My Site</h1>
</body>
</html>每份 HTML 文件都要先宣告其版本：
<!DOCTYPE html>網頁宣告會依據 HTML 文件版本的不同而有所不同，這裡是用 HTML5 的宣告。
HTML 在長年發展中，經歷了數個版本的更迭，目前的版本來到 HTML5。網頁技術的發展是漸進的，網頁技術相關的委員會 (W3C) 會定期開會以制定出一套標準，之後各個瀏覽器供應商 (browser vendor) 才去實作，所以標準建立後到實際支援會有一段落差期。其實每個瀏覽器供應商都有派代表到 W3C，而且在會議中掌握主導權。
目前瀏覽器實際的支援度可參考 Can I Use 網站；基本的 HTML 標籤通常都能使用，而比較新的標籤就要實際查一下。
每份 HTML 文件固定的版面如下：
<html>
<head>
<!-- Write metadata here -->
</head>
<body>
<!-- Write document here -->
</body>
</html>扣除宣告區後，最外圍會以一對 <html> 標籤包住整份文件。在每份 HTML 文件內，固定會有一個 <head> 區塊和一個 <body> 區塊，前者是 HTML 文件的元資料 (metadata)，後者則是實際的網頁內容和版面。
HTML 文件是版面和內容交織的文件檔案，標籤的部分不會顯示在最後的頁面上，瀏覽器會將 HTML 標籤結合相關的 CSS 設定後呈現出來，而標籤所包住的文字則是實際呈現在頁面上的文字。
基礎 HTML 標籤
我們在本節中展示一些基礎的 HTML 標籤。
標頭 (Heading)
標頭用於文章標題或子標題，從 <h1> 到 <h6> 共分為六級，範例如下 (看效果)：
<h1>Title</h1>
<h2>Subtitle</h2>
<h3>Subsubtitle</h3>段落 (Paragraph)
在文章中可使用 <p> 來區分段落，範例如下 (看效果)：
<p>Lorem ipsum dolor sit amet, consectetur adipiscing ...</p>
<p>Nam ut odio dolor. Praesent eu nibh imperdiet, imperdiet ex vel, semper ...</p>
<p>Maecenas in tellus lacus. Donec iaculis, lectus non viverra convallis, ...</p>註：本段文字為 lorem ipsum，即用來檢視排版的無意義文字。
清單 (List)
分為有序的 <ol> 和無序的 <ul> 清單，前者會有清單項目編號，後者則無。
以下是有序的清單 (看效果)：
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
以下是無序的清單 (看效果)：
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Citrus</li>
</ul>連結 (Link)
<a> 用來連結其他網頁或網站，以下是實例 (看效果)：
<a href="https://www.google.com.tw/" target="_blank">Google 台灣</a>
href 用來指定連結目標，target="_black" 設置在新視窗開啟頁面，這些都是 HTML 標籤的屬性 (attributes)。
影像 (Images)
<img> 用來載入圖片，以下是實例 (看效果)：
<img src="https://upload.wikimedia.org/wikipedia/en/2/20/Mozilla-Firefox-4-free-Logo1.jpg" alt="mozilla firefox" width="64">
src 用來指定圖片來源，alt 用於圖片無法載入時的替代性文字，width="64" 是指將寬度縮小到 64 像素，而高度會隨之等比例縮放。
開發用網頁伺服器
有些讀者會用開啟檔案的方式來打開 HTML 文件，但有些網頁的行為要透過和網頁伺服器互動才比較好呈現。所以還是建議讀者在本地端建置一個開發用網頁伺服器。
在本地端設置一個真正的網頁伺服器，像 Apache 或 Nginx 等，設置上比較麻煩；比較簡單的方式是使用開發用的網頁伺服器，這類伺服器不需設定，可立即使用；但這類伺服器效能不彰，不會用在實際上線的網站上。
如果讀者有按照我們前文的建議安裝 Node.js 的話，可以安裝 http-server 套件：
$ npm install -g http-server
使用方式如下：
$ cd path/to/project
$ http-server
這時候，http-server 會在工作目錄所在的位置開一個臨時的網頁伺服器，可用來模擬上網時拜訪網頁的情境。
如果使用 PHP 寫網頁程式，5.4 版之後的 PHP 有內建的網頁伺服器：
$ cd path/to/project
$ php -S localhost:8080
如果想用其他工具的讀者，可參考國外網友整理了一份快速建立開發用網頁伺服器的工具清單。
檢查 HTML 代碼
雖然 HTML 只能算是一種靜態代碼而非程式碼，也有一些軟體可以檢查 HTML 代碼是否有錯，像是 HTML 標籤是否成對或是是否寫錯標籤等。HTML Tidy 是一個 HTML 頁面重排 (formatting) 的工具；不過，也可以做為檢查 HTML 代碼的工具。
搭配 -errors 就變成 HTML 的靜態代碼檢查器：
$ tidy -errors path/to/page.html
如果有使用模板語言的話，這個工具就不是那麼方便。我們採取的策略是用 HTTPie 或其他 HTTP client 將頁面抓下來後重導給 tidy：
$ http get http://localhost:8080/ | tidy -errors
這個指令的想法是檢查經模板引擎轉換後的頁面 (web pages)，再回推當初寫的模板是否有錯。當然這樣比不上直接檢查模板，不過，模板代碼不容易直接檢查，這裡的做法也是可以接受的。
HTML 縮小器
理論上，HTML 頁面可藉著移除多餘空白、去除註解等手法將頁面瘦身，更有利於網路傳輸。不過，HTML 縮小器並不普遍；這是因為我們現在很少撰寫純靜態網頁，多由網頁程式動態生成頁面，較難直接用第三方工具對網頁進行後處理 (post processing)。
如果自己使用的網頁框架可加入這類工具，不妨在網頁中使用這些工具替網頁瘦身，像是 Rails 可在網頁的 middleware 中指定 HtmlCompressor::Rack 來替網頁瘦身 (參考這裡)。如果讀者使用其他的網頁框架，則要查閱一下該框架的手冊，查詢如何在輸出頁面時縮小 HTML 代碼。
