HTML 是什麼？超文本標記語言入門與網頁三劍客
HTML 的全名是 HyperText Markup Language（超文本標記語言）。它是一種標記語言，而非一般熟知的程式設計語言；它會告訴瀏覽器該如何呈現您的網頁，單純簡易或是極其複雜的頁面都沒問題。
HTML 包含了一系列的元素（elements），而元素包含了標籤（tags）與內容（content），我們用標籤來控制內容的呈現樣貌，例如：字體大小、斜體粗體、在文字或影像設置 超連結 等。
標記語言與程式語言的差別
程式語言有變數、判斷、迴圈這些流程控制的能力，可以 運算 出結果；標記語言則沒有，它做的事情只有一件：替內容加上標記，說明這段內容是什麼。
<h1>今天的天氣</h1>
<p>台北，晴時多雲。</p>上面這段沒有任何運算，只是告訴瀏覽器以及搜尋引擎、螢幕閱讀器：第一行是 主標題，第二行是一個 段落。這種 說明內容語意 的能力，正是 HTML 的價值所在，也是 SEO 與網頁無障礙的基礎。
前端網頁開發三劍客
一個網頁通常由三種技術共同組成，各自負責不同的職責：
| 技術 | 負責 | 對應到人 |
|---|---|---|
| HTML | 網頁的內容和語意結構 | 骨架 |
| CSS | 網頁的樣式和畫面如何被呈現 | 外表 |
| JavaScript | 網頁的行為，讓網頁可以跟使用者互動 | 動作 |
HTML
用來描述網頁的內容和語意結構，是三者中最先學、也最該學好的一項。
CSS
用來描述網頁的樣式和畫面如何被呈現，包含顏色、字級、排版與動畫。詳見 CSS 樣式表是什麼。
JavaScript
用來描述網頁的行為，讓網頁可以跟使用者互動，例如：透過 DOM 動態改變畫面內容。詳見 JavaScript 到底是什麼。
小提醒
初學者常會把 HTML 與 CSS 混雜在一起。它們是不一樣的東西喔！結構歸結構、樣式歸樣式，日後維護才不會綁在一起改。
HTML 基礎架構
以下為一份基礎的 HTML 架構，每一個 標籤 包覆的內容中，可以再包含其他的 標籤，所以說 HTML 文件的結構是屬於一種階層式的樹狀結構：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>我的第一個網頁</title>
</head>
<body>
<h1>Hello, HTML!</h1>
</body>
</html>| 標籤 | 說明 |
|---|---|
<!DOCTYPE html> | 宣告這是一份 HTML5 文件，要寫在最前面 |
<html> | 整份文件的根元素，lang 用來標示網頁語系 |
<head> | 檔頭區域，放 網頁標題、<meta>、CSS 等不會顯示在畫面上的資訊 |
<body> | 網頁內容區，所有看得到的內容都寫在這裡 |
想更進一步了解元素怎麼組成、文件各區塊分別放什麼，可以接著看 元素的組成 與 文件架構。
常見問題
HTML 是程式語言嗎？
不是。HTML 是標記語言（Markup Language），只負責描述內容與語意結構，沒有變數、判斷、迴圈這些流程控制能力。要讓網頁能運算與互動，得交給 JavaScript。
HTML 的元素與標籤有什麼不同？
標籤是像 <p> 與 </p> 這樣的角括號記號，元素則是 開始標籤 + 內容 + 結束標籤 的整體。也有像 <img>、<br> 這種沒有內容、不需要結束標籤的空元素。細節可參考 元素的組成。
HTML、CSS、JavaScript 該從哪一個開始學？
先學 HTML。CSS 的樣式要套用在 HTML 元素上，JavaScript 也要透過 DOM 操作 HTML 元素，沒有 HTML 的結構概念，後面兩者都會學得很吃力。
為什麼不要把樣式直接寫在 HTML 裡？
把結構與樣式混在一起，會讓同一份樣式難以重複使用，改版時也得逐個標籤修改。把樣式抽到 CSS，HTML 專心描述語意，維護與協作都會輕鬆很多。
HTML 文件為什麼是樹狀結構？
因為標籤可以層層包覆：<html> 包住 <head> 與 <body>，<body> 再包住其他元素，形成父子關係的階層。瀏覽器就是依這個階層建立 DOM 樹來解析與渲染網頁。
