HTML 是什麼？初學者快速了解網頁結構與基本語法
HTML 是建立網頁的基礎語言，全名為 HyperText Markup Language，中文通常稱為「超文字標記語言」。無論是一個簡單的公司介紹頁、部落格文章頁，還是功能完整的網站系統，幾乎都離不開 HTML。對初學者來說，HTML 並不是拿來寫複雜邏輯的程式語言，而是用來定義網頁內容與結構的標記語言。
簡單來說，HTML 負責告訴瀏覽器：哪一段是標題、哪一段是段落、哪裡是一張圖片、哪裡是一個按鈕、哪裡是一個連結。當瀏覽器讀取 HTML 後，就會依照這些標記把內容顯示成我們平常看到的網頁畫面。因此，如果你想學會網站製作，HTML 幾乎就是最先要認識的一步。
為什麼學網站設計一定要先懂 HTML？
很多人在剛接觸網站時，會先看到畫面設計、動畫效果或互動功能，於是誤以為網站最重要的是外觀。但實際上，一個網站最根本的核心，是內容結構是否清楚，而 HTML 正是負責這件事的基礎。
舉例來說，當你進入一個企業官網時，你會看到頁面上有主標題、品牌介紹、服務項目、成功案例與聯絡資訊。這些區塊不是憑空出現的，而是透過 HTML 將內容一層一層組織起來。之後再搭配 CSS 做視覺設計、搭配 JavaScript 增加互動效果，才會成為完整的網站。
也就是說，HTML 像是房子的骨架，CSS 像是裝潢，JavaScript 則像是自動門、燈光控制或其他互動設備。若沒有骨架，後面的效果再漂亮，也無法穩定成立。
HTML 的基本結構長什麼樣子？
一份最基本的 HTML 文件通常會包含以下幾個重要部分：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一個網頁</title>
</head>
<body>
<h1>歡迎來到我的網站</h1>
<p>這是一段簡單的介紹文字。</p>
</body>
</html>這段程式碼雖然簡單，但已經具備一個網頁最基本的結構。每個部分都有其用途，了解它們的角色，是學習 HTML 的第一步。
1. DOCTYPE 的作用
<!DOCTYPE html> 用來告訴瀏覽器，這是一份 HTML5 文件。雖然只有一行，但它很重要，因為它會影響瀏覽器解析網頁的方式。如果缺少這一行，某些瀏覽器可能會用舊版模式來顯示頁面，導致版面表現不一致。
2. html 標籤
<html> 是整份文件最外層的標籤，代表 HTML 文件的開始與結束。通常也會加上 lang 屬性，像是 lang="zh-Hant"，讓瀏覽器與搜尋引擎知道這個頁面的語言是繁體中文。
3. head 區域
<head> 裡面放的是網頁的設定資訊，不是直接顯示在頁面上的內容。像是編碼設定、手機版顯示設定、網頁標題、SEO相關描述，都會放在這個區域。
4. body 區域
<body> 才是使用者實際會看到的內容。標題、段落、圖片、清單、按鈕、表格，通常都寫在這裡。
HTML 標籤是什麼？
HTML 的核心概念就是「標籤」。標籤通常由小於與大於符號包起來，例如 <p>、<h1>、<a>。多數標籤會成對出現，前面是開始標籤，後面是結束標籤，例如：
<p>這是一段文字</p>這代表「這一段內容是一個段落」。瀏覽器看到後，就會用段落的方式來顯示它。
有些標籤則屬於空元素，不需要結束標籤，例如：
<img src="image.jpg" alt="範例圖片">這類標籤通常直接透過屬性來提供資訊，不會包住文字內容。
初學者最常用的 HTML 標籤有哪些？
標題標籤：h1 到 h6
HTML 提供六層標題，從 <h1> 到 <h6>。h1 通常代表頁面最重要的主標題，h2 用於主要段落標題，h3 則可作為次階層說明。
良好的標題結構不只讓讀者容易閱讀，也有助於搜尋引擎理解內容架構。對教學文章、公司介紹頁或服務說明頁來說，標題層級是否清楚，往往會影響整體品質。
段落標籤：p
<p> 用來表示一段完整文字。一般網站文章中的大部分正文，都是用這個標籤組成。如果沒有使用段落標籤，而只是把文字全部堆在一起，閱讀體驗通常會很差。
連結標籤：a
<a> 用來建立超連結，讓使用者可以點擊前往其他頁面。
<a href="https://example.com">前往官方網站</a>其中 href 是最重要的屬性，代表連結目標位置。
圖片標籤：img
<img> 用來插入圖片，常見寫法如下：
<img src="product.jpg" alt="產品展示圖">其中 src 表示圖片路徑，alt 則是圖片替代文字。這個替代文字除了在圖片讀取失敗時顯示，也有助於無障礙閱讀與搜尋引擎理解圖片內容。
清單標籤：ul、ol、li
當你需要整理重點時，清單標籤就非常實用。ul 是無序清單，ol 是有序清單，而 li 則是每一個項目。
<ul>
<li>認識 HTML 結構</li>
<li>學會常用標籤</li>
<li>建立第一個網頁</li>
</ul>HTML 屬性是什麼？
除了標籤本身之外，HTML 還有一個重要概念叫做「屬性」。屬性用來補充說明這個標籤的設定，例如連結要前往哪裡、圖片來源是什麼、區塊有沒有 class 名稱等。
例如：
<a href="https://example.com" target="_blank">點我開啟網站</a>這裡的 href 與 target 都是屬性。target="_blank" 表示在新分頁開啟連結。
理解屬性後，你會開始知道 HTML 不只是「放文字」，而是可以逐步控制內容的行為與用途。
語意化 HTML 為什麼重要？
學 HTML 到一定程度後，會開始接觸「語意化」這個概念。所謂語意化 HTML，就是使用更有意義的標籤來描述內容，而不是全部都用 <div> 包起來。
例如：
<header>表示頁首<nav>表示導覽列<main>表示主要內容<section>表示內容區段<article>表示文章內容<footer>表示頁尾
這樣做的好處很多。首先，程式結構會更清楚，自己未來回頭看也比較容易維護；其次，搜尋引擎更容易理解頁面內容；再來，對無障礙瀏覽工具也更友善。
因此，對現在的網站來說，HTML 不只是能顯示就好，而是應該盡量用正確、清楚、可理解的方式來寫。
初學者如何完成第一個 HTML 頁面？
如果你是第一次接觸 HTML，可以用以下方式練習：
- 先用記事本或任一文字編輯器建立一個
index.html檔案 - 輸入基本 HTML 結構
- 加入一個主標題與幾段文字
- 再加入一張圖片與一個連結
- 儲存後用瀏覽器打開檔案查看效果
一開始不需要急著做漂亮設計，也不需要馬上學複雜功能。只要先理解結構、標籤與內容的關係，就已經是很好的開始。
初學 HTML 時常見的錯誤
1. 標籤沒有正確關閉
例如開了 <p> 卻沒有寫 </p>，瀏覽器雖然有時會自動修正，但長期來看會造成結構混亂。
2. 標題層級亂用
有些人會因為字看起來比較大，就直接用很多個 h1 或跳過層級。這樣雖然表面上看起來沒問題，但對內容結構與搜尋理解都不理想。
3. 過度依賴 div
<div> 當然可以用，但如果整個頁面什麼都只用 div，會讓結構失去語意。該用標題、段落、清單或語意區塊時，還是應該選擇更合適的標籤。
4. 忽略 alt 與基本設定
很多初學者插入圖片時會忘記寫 alt，或忽略 meta charset、viewport 等基礎設定。這些看似小地方，實際上會影響網站的完整性與可用性。
HTML、CSS、JavaScript 三者的差別
這三者常常一起被提到，但分工其實很明確。
- HTML：負責內容與結構
- CSS：負責樣式與版面設計
- JavaScript：負責互動與功能邏輯
例如一個按鈕：
- HTML 會定義這裡有一個按鈕
- CSS 會決定按鈕的顏色、大小、圓角與位置
- JavaScript 會決定點擊後要做什麼事
所以，若你想真正進入網站製作領域，HTML 是起點，但不是終點。不過只要 HTML 基礎扎實，後面學 CSS 與 JavaScript 會容易很多。
學 HTML 最重要的不是死背，而是理解結構
很多人剛開始學 HTML 時，會急著背很多標籤名稱，結果沒多久就忘光。其實 HTML 最重要的，不是把標籤全部背下來，而是理解「這段內容應該用什麼結構來表達」。
例如一篇文章，本來就應該有主題、有段落、有重點、有清楚的階層；而 HTML 只是把這些原本就應該存在的結構，明確地標示出來。當你能從內容本身思考結構，寫 HTML 就不會只是在堆程式碼，而是在整理資訊。
結語
HTML 是每一個網站的起點，也是理解網頁世界最基礎的一步。它不負責花俏特效，也不負責複雜運算，但它決定了整個頁面的內容架構是否清楚、是否容易閱讀、是否方便搜尋引擎理解。
如果你是初學者，建議先從最基本的標題、段落、圖片、連結與清單開始練習，不需要一開始就追求很難的效果。當你能熟悉 HTML 的基本邏輯後，再逐步進入 CSS 與 JavaScript，會更容易建立完整的網站觀念。
對任何想學網站設計、內容編輯、SEO 優化或前端開發的人來說，HTML 都不是可有可無的知識，而是一個非常值得打穩的基礎。
