HTML 語法教學，HTML 入門新手必學

HTML 是什麼？

HTML 是 Hypertext Markup Language 的縮寫，也就是「超文本標記語言」(請注意，他是標記語言，不是程式語言)。

- HyperText：一種結構化的文字
- Markup language：一種用來標記文字的系統語法

身為標記語言，HTML 有各式各樣的標籤去定義網頁內容要如何呈現。例如：元件可能是文字、圖片或超連結；標籤則定義元件要放左邊還是放右邊、斜體還是粗體等等。本文帶你了解 HTML 是什麼，以及 HTML 語法入門教學。

HTML 的組成

請打開你的 VSCode，新增一個名為「basic.html」的檔案。細讀以下的 HTML 文件，裡面包含 HTML 的最基本結構。試著用你的方式觀察與描述它，然後把它寫入你的 basic.html。

讓我們來解釋一下這段 HTML 所表達的意義。

宣告

第一行是一個「宣告」： <!DOCTYPE html> 告訴瀏覽器這份文件是一個 HTML5 的網頁，瀏覽器因而知道要怎麼用正確的方式來展示你的網頁。請注意宣告要寫在第一行，因為瀏覽器是一行一行讀取文件的，想愈早告訴他的資訊，請寫在愈上面。

<html></html>

<html>…</html> 包住了整個網頁，表示這是一份 HTML 文件。被 <html> </html>包圍的內容，我們稱為網頁「元素」(element)。一份完整的 HTML 文件，必然會在 <html> </html>裡包含 <head></head> 和 <body> </body>兩個網頁元素。

<head></head>

<head></head> 包圍的資訊稱為「標頭」，<head></head> 裡宣告各種網頁資訊，這些資訊不會顯示給使用者看，因為它們的溝通對象是瀏覽器與其他的網路服務，如 Google 搜索引擎，Facebook 等。<head></head> 宣告的資訊包括網頁標題、外部連結、網頁樣式、JavaScript 腳本、meta tag⋯⋯等。我們在以後的章節會有更詳細的介紹。

現在，請你立刻在標頭裡加上以下內容：

加入上述< meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ > 在 <head>標籤內，表示要適應各種網路瀏覽器的編碼問題，如：IE瀏覽器預設文字編碼是BIG-5，我們在這邊先宣告統一使用utf-8編碼，解決使用不同瀏覽器會看到亂碼的問題。</head>

接著用瀏覽器打開 basic.html，找找看 <title></title> 的資訊出現在哪裡？如果你的網頁被搜尋引擎找到，同樣的資訊也會顯示為搜尋結果的標題。

<body></body>

<body></body> 包圍的內容是會直接顯示給使用者看的內容，也是這個網頁的核心。需要 CSS 來定義樣式的內容，也都會放在 body 裡面，現在，請你立刻在 body 裡輸入以下內容：

<body></body>
<h1></h1>我要學會HTML!!!

接著刷新瀏覽器，看看網頁裡跑出了什麼？

註解 (Comment) <!– –>

寫在「註解」(Comment) 裡的東西會被機器直接跳過，通常是工程師協作時交流的注意事項，或是自己的備忘。例如：

<!– 在這裡我們會埋 Facebook 廣告的追蹤碼 Here we will put Facebook ad pixel –>

點我免費領取全端開發學習地圖！

HTML 的巢狀結構

HTML 其實是個「標記」 (markup) 的概念。HTML 的繪寫是 “Hypertext Markup Language.” 而 “markup” 的意思跟用螢光筆劃記的感覺很像，把文字標記起來，賦予某種特性。

你試試在編輯器寫出以下的五段文字，再用瀏覽器去看看：

- Results
- <h1>Results</h1> are impressive!
- <h4>Results</h4> are impressive!
- <p>Results</p> are impressive!
- <strong>Results</strong> are impressive!

有發現什麼嗎？你應該注意到了，HTML 標籤都是成對的，而且是「巢狀」的結構。<html>、<head> 等被 < > 包圍的符號，是 HTML 這種 markup 語言的「標籤」(tag)，標籤普遍需要有明確的開始和結束，才能把一段文字包圍起來：</head></html>

瀏覽器需要正確與完整的標記才指定你想表達的意思，所以結構對 HTML 非常重要。只要巢狀的結構有錯，瀏覽器就無法正確呈現你設計的網頁，甚至不會再理會你的網頁內容。但你也別擔心，像 VSCode 這樣的瀏覽器都會自動幫你檢查。

更重要的是，你必須根據巢狀結構好好縮排你的程式碼！「格式碼的可讀性」是評估你是否為合格工程師的重要指標，而清楚的縮排是良好的第一印象，撰寫 HTML 時，請保持不同層級的標籤空 2 格 (如下圖)。

HTML 的標籤

隨著學習 HTML 的進展，你會陸續認識新的標籤：

- 標題：h1, h2, h3, h4, h5, h6
- 文字段落：p
- 清單：ul, ol, li
- 強調語氣：em, strong
- 換行：br
- 水平線：hr
- 超連結：a
- 圖片：img
- 區域：div, span
- 表格：table, tr, th, td
- 表單：form, label, input

除了 img 標籤外，header、nav、main 和 section 是語義元素 (semantic element)，也就是「有意義的元素」，能讓搜尋引擎辨識出正確的網頁內容。

語義元素出自於 HTML5，你可以前往 W3School 瞭解更多資訊。

若你偶爾會使用 Word 等文書處理器，你會對等下介紹的元素非常熟悉，唯一要學的，是用 HTML 標籤來定義這些元素。

常見 HTML elements

其實一張圖就說完了，現在來動手實作，請你打開剛才建立的 basic.html，跟著介紹來更新你的文件，並隨時刷新瀏覽器裡，看看網頁的樣子。

上一單元我們已經介紹過 title，接下來我們從標題開始，以下介紹的內容，請你一律輸入在 <body></body> 裡面。

標題 headings

<h1></h1>我要學會HTML！
<h2></h2>我要學會HTML！
<h3></h3>我要學會HTML！
<h4></h4>我要學會HTML！
<h5></h5>我要學會HTML！
<h6></h6>我要學會HTML！

可以使用的標題有 6 層，這些標題組合成你的網頁內容大綱，當搜尋引擎找到你的網頁時，會依照標題來認識你的內容，因而判斷相關性。

段落 paragraphs

<h1></h1>我要學會HTML！
<p></p>動手做是最好的學習方法。<p></p>

<p> 把你的內容標記成段落，這是一個很常用的標籤。</p>

清單 list

「清單」有兩種，項目符號的清單，或有數字順序的清單。

無順序的項目符號清單 <ul>（unordered list）</ul>

<h2></h2>清單 Lists

<p></p>這是沒有順序的項目符號清單<p></p>

<ul></ul><!– unordered list –>
<li></li>這是沒有順序的清單
<li></li>以 ul 元來定義清單的範圍
<li></li>用 li 標示各別項目

有順序的清單 <ol>（ordered list）</ol>

<p></p>這是有數字順序的清單<p></p>

<ol></ol><!– ordered list –>
<li></li>這是有順序的清單
<li></li>以 ol 元來定義清單的範圍
<li></li>一樣用 li 標示各別項目

請注意 <li> 元素必然被放在 <ul> 或 <ol> 的下一層，這是 </ol></ul></li>Mozilla Developer Network (MDN) 制定的標準。

清單的巢狀特性，讓他們特別適合被改造成網站的導覽選單 (navigation)，學會 CSS 以後，你將會知道怎麼做。

斜體 (emphasis) 與粗體 (strong)

在 HTML 我們一般會用兩種方法來強調需要強調的內容

- Emphasis (斜體)： <em></em>

- Strong (粗體)： <strong></strong>

在介紹他們如何使用之前，不知道你有沒有發現，目前為止介紹的元素，都是一次佔滿一行？

這種一次佔一行的叫「區塊元素」(block elements)，接下來我們舉「行內元素」(inline elements) 的例子，在後面的 CSS 章節你會深入認識兩者的區分。

<h2></h2>行內元素

<p></p>校長說：Coding 哪裡都可以學，真正重要的是你的 <em></em>Mindset！<p></p>
<p></p>再說一次：Coding 哪裡都可以學，真正重要的是你的 <strong></strong>Mindset！<p></p>
<p><em><strong></strong></em></p>You need to get it done！<p></p>

空元素 (Empty elements)

上一節我們談到絕大多數的 HTML 標籤都是成對出現，具有開始與結束，以巢狀結構包圍內容，定義出一個區塊。

但某些元素無法包圍任何內容，因此他們被稱為「空元素」(empty element)。最常見的空元素是斷行以及水平線。

斷行 (break)

在 HTML 文件裡，你必須特意定義斷行，例如這樣：

<h2></h2>空元素

<p></p>祝你在大航道學習愉快！<br>
ALPHA Camp<p></p>

如果你把 <br> 拿掉，在網頁裡就只會留下一個空白 (請注意仍然有一個空白)。

此時你應該有注意到我們寫的是 <br> 而不是 <br>。其實兩種都有效，但寫 <br> 比較順應長遠的趨勢，斜線代表了標籤的結束，因此當我們寫 <br> 時，表示你對瀏覽器更明確地定義了這個標籤「結束在開始的位置」。

水平線 (horizontal rules)

讓我們在網頁最下方加上水平線：

<hr>
<p></p>恭喜你學完了 HTML 基本元素，就是這麼簡單！<p></p>

同樣，寫 <hr> 或 <hr> 都可以。水平線預設的長相就是一條橫線，開始使用 CSS 後，你可以加上更多外觀的改造。

程式設計入門，4 週進度班從零基礎建立數位職涯基礎能力

HTML5 和 HTML 有什麼不同？

HTML5 是 HTML 的最新版本，它引入了許多新的元素和特性，旨在增強網頁的表現力和語義。以下是 HTML5 與原本的 HTML（即 HTML 4.01 和 XHTML）的主要差異：

1. 新的語義元素：HTML5 引入了一些新的語義元素，如 <article>、<section>、<nav>、<header>、<footer> 和 <aside>。這些元素使得我們能更準確地描述網頁的結構和內容。
2. 多媒體支持：HTML5 提供了 <audio> 和 <video> 兩個新的元素，用於在網頁中直接嵌入影音內容，而不再需要第三方插件（如 Flash）。
3. 圖形和動畫：HTML5 引入了 <canvas> 元素，可以用於在網頁上繪製2D圖形和動畫。此外，HTML5 也支持 SVG 和 WebGL，用於呈現2D和3D的矢量圖形。
4. 新的表單輸入類型：HTML5 引入了一些新的表單輸入類型，如 email、tel、search、url、color、date、range 和 number，這些新的輸入類型可以使得在收集和驗證用戶輸入數據時更加方便。
5. APIs 和 JavaScript 改進：HTML5 提供了一系列的新的 JavaScript APIs，包括拖放 API、地理位置 API、本地存儲 API（localStorage 和 sessionStorage）等，可以使得網頁具有更多的互動性和功能。
6. 移動設備支持：HTML5 設計之初就考慮了對移動設備的支持，許多新的特性（如觸摸事件、導航等）都是針對移動設備設計的。
7. 改進的語義和易用性：HTML5 適應了現代網頁的需求，加入了許多改進語義和易用性的元素和屬性，如 <data-*> 自定義數據屬性、aria-* 可訪問性屬性等。

寫好 HTML 的好處

從本文中，你理解了 HTML 就是定義你的網頁內容，你也學到怎麼使用基本的 HTML 元素了。

清楚佈局你的 HTML 標籤，有 2 大好處。一，能大幅提升之後修改網頁內容與用 CSS 來調整網頁樣式的效率；二，對像 Google 等搜尋引擎來說，他們更容易弄懂你的網頁內容，因而把你放到比較容易被使用者搜尋到、搜尋結果的前幾頁或是前幾名。

雖然目前已經有不少「所見即所得」的軟體 (如 Dreamweaver) ，能幫你像畫圖一樣打造網頁了。但一個好的開發者，總是用文字編輯器來撰寫 HTML。

透過HTML，開發者能夠創建結構化的網頁內容，並利用其他工具如CSS和JavaScript來提供吸引人的設計和動態功能。熟練運用HTML，您將能創建出功能豐富且用戶友善的網頁，滿足各種需求，從網誌和商業網站，到社交媒體平台和網路應用。

HTML相關資源

W3Schools HTML Tutorial – 這是一個非常全面的HTML入門教程，適合所有水平的開發者。
MDN Web Docs – Mozilla提供的HTML參考資料庫，包含詳細的語法和範例。
HTML5 Boilerplate – 這是一個簡單的HTML5模板生成器，可以幫助你快速開始一個新的項目。
HTML-Cleaner – 這是一個用於清理和格式化HTML代碼的線上工具。
Emmet – 這是一個編輯器插件，可以快速生成HTML和CSS代碼，非常適合提高開發效率。
HTML Validator – 這是一個線上HTML代碼驗證工具，用於檢查HTML代碼是否有語法錯誤。
CodePen – 這是一個線上代碼編輯和預覽平台，可以用於實驗HTML、CSS和JavaScript代碼。

HTML 語法教學，HTML 入門新手必學

HTML 是什麼？

HTML 的組成